HTMLタグの意味と使い方一覧

HTML基本タグ一覧＜レイアウト編＞

Webサイトの構造を作るときに欠かせないのが、「ブロック要素」と呼ばれるタグたちです。
ページ全体の土台を組み立てるために、これらのタグを正しく使えると、整理された読みやすいHTMLが書けます！

<header>：ページやセクションの「上部」

<header>
  <h1>サイトのタイトル</h1>
  <nav>メニュー</nav>
</header>

• ページ全体、または各セクションの“はじめ”の部分を示します。
• ロゴ・サイト名・ナビゲーション（メニュー）などが入ります。

<main>：ページの「主なコンテンツ部分」

<main>
  <h2>お知らせ</h2>
  <p>新しいサービスを開始しました。</p>
</main>

• そのページで一番大切なコンテンツ部分を囲むタグです。
• ページに1つだけ使用するのが原則。

<footer>：ページやセクションの「下部」

<footer>
  <p>Copyright © 2025 MySite</p>
</footer>

• ページやセクションの締めくくり部分に使います。
• 会社情報・著作権・お問い合わせ・SNSリンクなどが入ります。

<section>：意味のある「まとまり」を作る

<section>
  <h2>サービス紹介</h2>
  <p>私たちはWeb制作を行っています。</p>
</section>

• 見出し＋内容で構成される「意味のあるかたまり」を表します。
• <article>との違い：独立性があるかどうか（後述）

<div>：意味のない「箱（ボックス）」

<div class="box">
  <p>ここは見た目を整えるためのグループです。</p>
</div>

• 見た目を整えたり、CSSでグループ化したいときに使う汎用のボックス
• 意味はないが自由度が高い（クラス名で意味をつけることが多い）

📌 注意： 最近のHTML5では、意味のあるタグ（<section>や<article>など）を優先するのが基本。

<article>：独立したコンテンツ（ブログ・ニュースなど）

<article>
  <h2>ブログタイトル</h2>
  <p>この記事ではHTMLについて解説します。</p>
</article>

• 単体で成り立つ内容（＝独立性がある）ときに使います。
• ニュース記事、ブログ投稿、商品レビューなどに適しています。

HTMLタグの意味と使い方一覧＜テキスト編＞

HTMLでは、テキスト（文字）を表示したり、見出しを付けたり、強調したりするために、さまざまなタグを使います。

ここでは、「これだけ知っていれば十分！」という基本テキストタグ10個を、意味と使い方とともにご紹介します。

<h1>〜<h6>：見出しタグ

文章のタイトルや小見出しを付けるときに使います。
数字が小さいほど大きな見出しです。

<h1>一番大きな見出し</h1>
<h2>次に大きな見出し</h2>

📌 注意： <h1>は基本的に1ページに1つだけにしましょう。SEOにも関係します。

<p>：段落（パラグラフ）を表す

文章のかたまりを作る基本のタグです。

<p>これは段落です。文章のまとまりごとに使います。</p>

改行とは違い、ひとまとまりの文章として扱われます。

<br>：改行タグ

文章の途中で改行したいときに使います。閉じタグは不要です。

こんにちは！<br>
今日もいい天気ですね。

<strong>：強調（太字）

大事な言葉や強調したい部分に使います。画面上は太字になります。

<p>この商品は<strong>今だけ半額</strong>です！</p>

📌 意味的にも「重要」である」と伝えるタグなので、SEOでも評価されます。

<em>：強調（斜体または傾斜）

感情的な強調に使います。多くのブラウザでは斜体になります。

<p><em>本当に</em>ありがとうございました。</p>

<b>：見た目だけ太字

見た目は太字になりますが、「意味としての強調」はありません。

<p><b>太字になります</b>が、重要性は伝えません。</p>

<i>：見た目だけ斜体

斜体になりますが、意味的な強調はありません。専門用語や引用に使われることもあります。

<p>iPhoneの<i>Pro Max</i>を使っています。</p>

<small>：小さい文字

注釈や補足などに使います。文字が一回り小さく表示されます。

<p>価格は税込です。<small>（送料別途）</small></p>

<mark>：ハイライト（背景色付き）

目立たせたいキーワードやフレーズを黄色でハイライトします。

<p>重要な箇所を<mark>目立たせる</mark>と読みやすくなります。</p>

<blockquote>：引用文

文章の引用をするときに使います。インデントされて表示されます。

<blockquote>
  「HTMLはホームページの骨組みを作る言語です。」
</blockquote>

HTMLタグの意味と使い方一覧＜img編＞

Webページに画像を表示したいときに使うのが、<img>タグです。
見た目が華やかになるだけでなく、商品の魅力を伝えたり、図解で理解を助けたりするためにも大事なタグです。

この記事では、HTML初心者がまず覚えておきたい画像の表示方法をわかりやすく解説します。

基本の書き方：画像を表示する

<img src="sample.jpg" alt="サンプル画像">

属性	意味
src	表示したい画像のファイル名やURL（sourceの略）
alt	画像が表示できないときの代わりのテキスト（alternativeの略）

📌 ポイント：

• タグは閉じタグがいらない（1つで完結する）特殊なタイプです。
• alt属性はSEO・アクセシビリティのためにも必須です。

よく使う画像ファイルの種類

拡張子	特徴
.jpg（.jpeg）	写真や背景などに向いている（軽くてキレイ）
.png	背景を透明にできる／ロゴやアイコン向き
.gif	アニメーション可能な画像
.webp	高画質＆軽量な次世代画像フォーマット（最近は主流）

実際に表示される例（ブラウザ）

<img src="logo.png" alt="会社のロゴ">

画面上にはロゴ画像が表示され、もし画像が壊れていて表示できない場合は「会社のロゴ」というテキストが代わりに表示されます。

画像のサイズを調整する方法

width や height 属性でサイズを指定できます。

<img src="photo.jpg" alt="風景" width="300" height="200">

📌 注意点：

• 元画像の縦横比を保つ場合は、width だけ指定すればOK。
• CSSで調整する方法も主流です：

<img src="photo.jpg" alt="風景" style="width: 300px;">

外部サイトの画像を表示する（URL指定）

<img src="https://example.com/images/sample.jpg" alt="外部の画像">

• 自分のサーバーに画像がない場合、外部URLでも表示可能
• ただし相手側の画像が消えたら表示されなくなるので注意！

画像をリンクにする

画像をクリックしたら別ページに飛ばしたい場合は、<a>タグと組み合わせます。

<a href="https://example.com">
  <img src="banner.jpg" alt="バナー">
</a>

よくあるミスと注意点

ミス例	修正方法
ファイル名が間違っている	大文字小文字・スペルを確認
画像のパスがずれている	同じフォルダにあるか確認（img/〇〇.jpgなど）
alt属性がない	SEOや読み上げ支援のために必ず入れる

まとめ：imgタグはWebの“顔”

HTMLで画像を表示すると、サイトの印象がぐっと良くなります。
以下のポイントを押さえれば、初心者でも安心して使えます！

✔︎ おさらいポイント

• <img>タグは閉じタグ不要（1つでOK）
• srcは画像の場所、altは説明文
• サイズ調整はwidth・heightまたはCSSで
• リンクや外部画像とも組み合わせOK