HTMLを学び始めたときに、まず覚えておきたい「よく使うタグ」を、用途ごとにまとめて詳しく解説します。「なぜそう書くのか」「どんな場面で使うのか」までしっかり説明していきます。
ページ全体の構造を作るタグ：header / main / footer
header：ページの「頭」にあたる部分
header は、ページやセクションの「先頭部分」を表すタグです。
サイトのロゴ、ページタイトル、ナビゲーションメニューなど、そのページ全体の概要や導入部分を置く場所として使われます。
<header>
<h1>サイトタイトル</h1>
<nav>
<a href="/">ホーム</a>
<a href="/about">このサイトについて</a>
</nav>
</header>- ページ全体の上部に置かれることが多い
- 1ページに複数の
headerを使うことも可能（セクションごとなど） - 見た目を変えるのはCSSで行い、
headerは「ここが先頭部分」という意味を伝える役割
main：そのページの「主役の内容」
main は、そのページで最も重要な「メインコンテンツ」を囲むタグです。
記事本文や商品説明など、そのページを訪れた人が一番読みたい部分を入れます。
<main>
<h2>この記事のタイトル</h2>
<p>ここに記事の本文が入ります。</p>
</main>- 1ページに1つだけ使うのが基本
- サイドバーやヘッダー、フッターなどは
mainの外側に置く - 検索エンジンにも「ここが本文です」と伝えやすくなる
footer：ページの「足」にあたる部分
footer は、ページやセクションの「末尾部分」を表すタグです。
コピーライト表記、運営者情報、問い合わせリンクなど、ページの締めくくりにふさわしい情報を置きます。
<footer>
<p>© 2024 My Website</p>
<a href="/contact">お問い合わせ</a>
</footer>- ページ全体の一番下に置かれることが多い
- セクションごとに
footerを持たせることもできる - 「終わりの部分」であることを意味的に示せる
文章や見出しに関係するタグ：h1〜h6 / p / br / strong
見出しタグ：h1〜h6
h1〜h6 は、文章の構造を示す「見出しタグ」です。
数字が小さいほど重要度が高く、h1 が最上位の見出しになります。
<h1>ページ全体のタイトル</h1>
<h2>大きな見出し</h2>
<h3>その中の小見出し</h3>h1は通常そのページのタイトルとして1つだけh2は大きな章、h3はその中の小見出し、といった階層構造を意識する- 見た目を大きくするためだけに使うのではなく、「文章の構造」を表すために使う
p：段落（パラグラフ）
p は、文章のひとまとまりを表すタグです。 1つの p の中には、1つの話題や意味のまとまりを入れるイメージです。
<p>これは1つ目の段落です。ひとつの話題について説明しています。</p>
<p>これは2つ目の段落です。別の話題について書いています。</p>- 改行したいからといって、何でもかんでも
brを使うのではなく、 話題が変わるところでpを分けると読みやすくなる - 段落ごとに余白がつくのは、ブラウザの標準スタイルによるもの
br：行を強制的に折り返す
br は、段落の中で行だけを変えたいときに使います。 詩や住所、短い文章で改行したいときなどに便利です。
<p>
〒123-4567<br>
東京都〇〇区〇〇1-2-3<br>
サンプルビル 5F
</p>- 段落を分けるほどではないが、見た目として行を変えたいときに使用
- 多用しすぎると、構造がわかりにくくなるので注意
strong：重要な部分を強調する
strong は、意味的に重要な部分を強調するタグです。 見た目としては太字になることが多いですが、「重要である」という意味を持っています。
<p>
この商品は、<strong>数量限定</strong>での販売となります。
</p>- 単なる装飾ではなく、「ここは特に大事」という意味を持たせたいときに使う
- 強調しすぎると、どこが本当に重要なのかわからなくなるので、ポイントを絞って使う
箇条書きや手順を表すタグ：ul / ol / li
ul：順番のないリスト（箇条書き）
ul は、順番に意味がない「箇条書きリスト」を作るタグです。 特徴や項目を並べるときに使います。
<ul>
<li>特徴1：軽い</li>
<li>特徴2：丈夫</li>
<li>特徴3：シンプルなデザイン</li>
</ul>- 「・」のような黒丸がつくのが一般的な表示
- 順番が重要でないときに使う
ol：順番に意味があるリスト（番号付き）
ol は、手順やランキングなど、順番に意味があるリストを作るタグです。
<ol>
<li>会員登録をする</li>
<li>メールを確認する</li>
<li>ログインしてプロフィールを設定する</li>
</ol>- 自動的に「1. 2. 3.」と番号が振られる
- 手順や優先順位を示したいときに便利
li：リストの1項目
li は、ul や ol の中で使う「リストの1つの項目」を表すタグです。 li 単体では使わず、必ず ul か ol の中に書きます。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>- 1つの
liの中に、文章や画像など、さまざまな要素を入れることもできる - リストを使うことで、情報を整理して見せやすくできる
4. 画像とリンクに関するタグ：img / a
img：画像を表示する
img は、ページに画像を表示するためのタグです。 src 属性で画像ファイルの場所を指定し、alt 属性で画像の説明文を書きます。
<img src="images/sample.jpg" alt="サンプル商品の写真">src：画像ファイルのパス（URL）alt：画像が表示できないときに代わりに表示されるテキスト（画面読み上げソフトにも読まれるため、内容を簡潔に説明するのが望ましい）imgは「閉じタグ」を持たない単独のタグ
a：リンクを作る
a は、別のページや同じページ内の別の場所などに移動するための「リンク」を作るタグです。 href 属性でリンク先のURLを指定します。
<a href="https://example.com">公式サイトはこちら</a>href：リンク先のURL- 同じサイト内の別ページなら相対パスで書くこともできる
- 新しいタブで開きたい場合は
target="_blank"を付けることもある
表形式のデータを整理するタグ：table / tr / th / td
table：表全体をまとめる「枠」
table は、表（テーブル）を作るためのタグで、行や列をまとめる“器”の役割です。
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫状況</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>200円</td>
<td>在庫あり</td>
</tr>
<tr>
<td>バナナ</td>
<td>150円</td>
<td>在庫わずか</td>
</tr>
<tr>
<td>オレンジ</td>
<td>180円</td>
<td>在庫切れ</td>
</tr>
</tbody>なぜ使うのか
- 情報を「行 × 列」で整理して見せたいときに最適
- CSS でデザインを整えやすい
- スクリーンリーダーにも「これは表です」と伝わるためアクセシビリティが高い
どんな場面で使う？
- 料金表
- スケジュール表
- 商品スペック一覧
- データ比較表
tr：表の「1行」を表す
tr（table row） は、表の中の「横1行」を作るタグです。
<tr>
<td>商品名</td>
<td>価格</td>
</tr>ポイント
- tr の中に th や td を並べて「行」を構成する
- tr 単体では意味を持たず、table の中で使う
使う場面
- 表の行を追加したいとき
- データを縦方向に積み重ねたいとき
th：見出しセル（ヘッダーセル）
th（table header） は、表の中で「見出し」を表すセルです。
<tr>
<th>商品名</th>
<th>価格</th>
</tr>なぜ th を使うのか
- 自動的に太字・中央寄せになる（ブラウザの標準スタイル）
- スクリーンリーダーが「これは見出し」と認識し、表の意味が伝わりやすくなる
- データの意味が明確になる
使う場面
- 表の1行目に項目名を並べる
- 列ごとの意味を示したいとき
td：通常のセル（データセル）
td（table data） は、表の中の「データ」を入れるセルです。
<tr>
<td>りんご</td>
<td>200円</td>
</tr>特徴
- 表の中で最もよく使うタグ
- 文字だけでなく、画像・リンク・ボタンなども入れられる
使う場面
- 表に実際のデータを入れるとき
- 商品一覧、料金表、比較表などあらゆる表で使用
レイアウトや小さな要素をまとめるタグ：div / span
div：ブロック要素をまとめる「箱」
div は、ページのレイアウトを作るための“箱”のようなタグです。
<div class="container">
<h2>商品一覧</h2>
<p>おすすめの商品を紹介します。</p>
</div>なぜ div を使うのか
- 意味を持たない「汎用コンテナ」として自由に使える
- CSS でレイアウトを組むときの基本単位
- ブロック要素なので、前後で改行される（1つのまとまりとして扱われる）
どんな場面で使う？
- セクションをまとめたいとき
- カードデザインの枠
- レイアウトの列・行を作るとき
- CSS フレックスやグリッドの親要素として
注意点
- 意味を持たないため、使いすぎると「div地獄」になりやすい
- 本来意味を持つタグ（section, article, header など）が使えるならそちらを優先
span：文章の一部を囲む「インライン要素」
span は、文章の中の一部分だけを囲んで装飾したいときに使うタグです。
<p>
この商品は <span class="highlight">期間限定</span> で販売しています。
</p>特徴
- インライン要素なので、前後で改行されない
- 意味を持たないため、CSS で見た目を変えるために使うことが多い
- strong のように「意味的な強調」はしない
どんな場面で使う？
- 文中の一部だけ色を変えたい
- 特定の単語だけ背景色をつけたい
- 小さなアイコンやラベルを文章に埋め込みたい
div と span の違いを一言でまとめると
| タグ | 種類 | 主な用途 | 改行 |
|---|---|---|---|
| div | ブロック要素 | レイアウト・大きなまとまり | 改行される |
| span | インライン要素 | 文中の一部を装飾 | 改行されない |
まとめ
HTMLタグを正しく使うことは、 SEO・アクセシビリティ・保守性 のすべてに直結します。 header / main / footer で構造を明確にし、 見出しタグで階層を整理し、 リストや表で情報を整理することで、 ユーザーにも検索エンジンにも理解しやすいページになります。 「意味を持つタグを選ぶ」ことを意識するだけで、コード品質は大きく向上します。
