HTML/CSS：意味のあるタグ（セマンティック）

header の中に h1 がある

<header> で h1 を囲む。

<header>
  <h1>サイト名</h1>
</header>

header はページやセクションの導入部を表す。ロゴやサイト名を入れるのが一般的。

解答 == B

ページの中心となる内容を表すタグ。

B

main はページの主要部分なので1つだけ。header や footer は記事ごとにも使えるので複数可。

nav の中に li が2個、a が2個

nav で ul を囲み、li の中に a を入れる。

<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="menu.html">メニュー</a></li>
  </ul>
</nav>

nav は「主要なナビゲーション」を表す。ページ内のすべてのリンクを nav で囲む必要はなく、メニューなど主要な移動手段に使う。

<header><h1>タイトル</h1></header>
<____>
  <p>本文です。</p>
</____>

main の中に p がある

「主要な」を意味する4文字のタグ。

main

main で囲むと「ここが本題」と明示できる。読み上げソフトは、メニューを飛ばして main から読み始められるようになる。

解答 == B

div は意味を持たないタグ。

B

div は最後の手段。まず適切なタグが無いか考え、無ければ div を使う——この順序が大切。

article の中に header・p・footer がある

article の中に header と footer を入れられる。

<article>
  <header>
    <h2>記事タイトル</h2>
  </header>

  <p>記事の本文です。</p>

  <footer>
    <p>投稿者：山田</p>
  </footer>
</article>

header と footer は article の中でも使える。「その記事の導入部と末尾」という意味になり、ページ全体の header とは別物として扱われる。

<main>
  <p>本文</p>
</main>
<____>
  <p>関連リンク</p>
</____>

aside の中に p がある

「わきに置く」を意味する5文字のタグ。

aside

aside は本題から少し外れた補足。サイドバーや関連記事のリンクなどに使う。

解答 == B

切り出して他所に置いても意味が通るかどうか。

B

ブログ記事や商品カードは article（それだけで意味が通る）。「会社概要」の中の「沿革」は section（文書の一部）。

time の datetime が 2026-08-19

<time datetime="2026-08-19">表示用の文字</time> と書く。

<time datetime="2026-08-19">2026年8月19日</time>

人間向けの表示と、機械向けの値を分けられる。「8月19日」では機械には何年か分からないが、datetime があれば正確に伝わる。

footer の中に address がある

<address> は連絡先を表すタグ。既定で斜体になる。

<footer>
  <address>東京都渋谷区1-2-3</address>
</footer>

address は「連絡先」を表す。住所全般ではなく、その文書やサイトの問い合わせ先に使うのが本来の用途。

header・main・footer がそれぞれ1個

3つのタグを縦に並べる。main は header と footer の間。

<header>
  <h1>ゼロカラカフェ</h1>
</header>

<main>
  <p>本日も営業しています。</p>
</main>

<footer>
  <p>&copy; 2026 ゼロカラカフェ</p>
</footer>

これがWebページの最も基本的な骨組み。ほぼすべてのサイトがこの3層構造をしている。

header の中に h1 と nav、nav の中に a が2個

header の中に nav を入れる形が一般的。

<header>
  <h1>サイト名</h1>

  <nav>
    <ul>
      <li><a href="index.html">ホーム</a></li>
      <li><a href="about.html">会社概要</a></li>
    </ul>
  </nav>
</header>

ヘッダーにナビを入れるのが定番。サイト名とメニューが並ぶ、見慣れた形になる。

article が2個、それぞれに h2 と p がある

article は「単体で成立する内容」なので、記事ごとに使う。

<article>
  <h2>記事1</h2>
  <p>1つ目の記事の本文です。</p>
</article>

<article>
  <h2>記事2</h2>
  <p>2つ目の記事の本文です。</p>
</article>

記事一覧では article を並べる。それぞれが独立した内容なので、切り出してRSSなどに配信しても意味が通る。

main の中に article と aside がある

main の中に article と aside を並べる。

<main>
  <article>
    <h2>本文</h2>
    <p>記事の内容です。</p>
  </article>

  <aside>
    <h2>関連情報</h2>
    <p>あわせて読みたい記事。</p>
  </aside>
</main>

aside は main の中にも外にも置ける。記事に関連する補足なら中、サイト全体のサイドバーなら外——内容との関係で判断する。

div の中に h3・p、p の中に span がある

div はブロック全体を囲む箱、span は文中の一部を囲む。

<div class="product">
  <h3>ノートPC</h3>
  <p>128,000円 <span class="sale">セール中</span></p>
</div>

div は縦に積まれ、span は文中に溶け込む。この違いは display の値（block と inline）によるもので、HT12で詳しく扱う。

すべての要素の数と入れ子構造が一致

header と footer はページ全体と article の中で計2つずつになる。main の中に article と aside を並べる。time には datetime 属性を付ける。

<header>
  <h1>ゼロカラブログ</h1>

  <nav>
    <ul>
      <li><a href="index.html">ホーム</a></li>
      <li><a href="posts.html">記事一覧</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>HTMLの基本</h2>
      <time datetime="2026-08-19">2026年8月19日</time>
    </header>

    <p>HTMLはWebの骨組みです。</p>

    <footer>
      <p>著者：山田</p>
    </footer>
  </article>

  <aside>
    <h2>関連記事</h2>
    <p>CSSの基本も合わせてどうぞ。</p>
  </aside>
</main>

<footer>
  <address>東京都渋谷区1-2-3</address>
  <p>&copy; 2026 ゼロカラブログ</p>
</footer>

header と footer が2つずつあることに注目してほしい。1つはページ全体の、もう1つは記事の——それぞれ「何の導入部・末尾なのか」が入れ子の位置で決まる。これは矛盾ではなく、正しい使い方だ。

一方で main は1つしかない。「このページの本題はここ」という宣言は、複数あっては意味をなさないからだ。読み上げソフトを使う人は、メニューを聞き流して main から読み始められる——この機能は main が1つだからこそ成立する。

<time datetime="2026-08-19">2026年8月19日</time> という書き方も重要だ。人間には「2026年8月19日」と読ませ、機械には 2026-08-19 という正確な値を渡す。表示と意味を分離するという考え方は、HTMLの随所に現れる。

そして、このページには div が1つも出てこない。適切なタグがあるなら、そちらを使う——div はあくまで最後の手段だ。すべてを div で書いたページも見た目は同じになるが、機械にとっては意味のない箱が並んでいるだけになる。

ここまででHTMLの構造は一通り学んだ。次章ではフォームを扱い、ユーザーからの入力を受け取る方法を学ぶ。