セマンティック構造

HTML タグの名前にはすべて意味（semantic）があり、使用時にはタグの意味にできるだけ合致するようにし、誤った意味のタグを使用しないようにするべきです。セマンティック的に適切なウェブページは、自然と良好な構造を持ち、開発者にとって読みやすく書きやすく、メンテナンスも容易になります。また、コンピュータがウェブページの内容をより良く処理するのにも役立ちます。

意味

HTML タグの重要な役割の一つは、ウェブページの要素の性質を宣言することです。これにより、ユーザーはタグを見るだけでその要素の意味を理解でき、HTML ソースコードを読むだけでウェブページの大まかな構造を把握できます。これは、HTML のセマンティック原則と呼ばれています。

以下は、典型的なセマンティック構造を持つウェブページの例です。

<body>
  <header>ヘッダー</header>
  <main>
    <article>
      <h1>記事タイトル</h1>
      <p>記事内容</p>
    </article>
  </main>
  <footer>フッター</footer>
</body>

上記のコードを見るだけで、ページがヘッダー（<header>）、本文（<main>）、フッター（<footer>）の3つの部分に分かれていることがわかります。

HTML ウェブページを作成する際、最初のステップは、セマンティック構造のウェブページの骨格を作成することです。

よく使われるタグ

`<header>`

<header> タグは、複数の場面で使用できます。ウェブページ全体のヘッダーを表すことも、記事やブロックのヘッダーを表すこともできます。

ウェブページのヘッダーに使用される場合は、「ページヘッダー」と呼ばれます。ウェブサイトのナビゲーションや検索バーは、通常 <header> 内に配置されます。

<header>
  <h1>会社名</h1>
  <ul>
    <li><a href="/home">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

<header> が記事のヘッダーに使用される場合は、記事のタイトル、著者などの情報を含めることができます。

<article>
  <header>
    <h2>記事タイトル</h2>
    <p>張三、投稿日：2010年1月1日</p>
  </header>
</article>

<header> はさまざまな場面で使用できるため、1つのページに複数の <header> が含まれる可能性がありますが、特定の場面では1つしか含めることができません。例えば、ウェブページのページヘッダーは1つしか存在できません。また、 <header> 内に別の <header> や <footer> を含めることはできません。

`<footer>`

<footer> タグは、ウェブページ、記事、またはセクションのフッターを表します。ウェブページ全体のフッターに使用される場合は、「ページフッター」と呼ばれ、通常は著作権情報やその他の関連情報が含まれます。

<body>
  <footer>
    <p>© 2018 xxx 会社</p>
  </footer>
</body>

上記のコードでは、著作権情報が <footer> 内に配置されています。

<footer> は記事内にも配置できます。

<article>
  <header>
    <h1>記事タイトル</h1>
  </header>
  <footer>
    <p>© 転載禁止</p>
  </footer>
</article>

<footer> はネストできません。つまり、内部に別の <footer> や <header> を配置することはできません。

`<main>`

<main> タグは、ページの主要コンテンツを表します。1つのページには、 <main> は1つしか存在できません。

<body>
<header>ヘッダー</header>
<main>
  <article>記事</article>
</main>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>

上記のコードは、最も典型的なページ構造です。

<main> はトップレベルのタグであり、 <header>、 <footer>、 <article>、 <aside>、 <nav> などのタグ内に配置できないことに注意してください。

また、機能的なブロック（例えば検索バー）は、現在のページが検索ページでない限り、 <main> 内に配置するのは適切ではありません。

`<article>`

<article> タグは、ページ内の独立したコンテンツを表します。ページの他の部分がなくても、独立して使用できる意味を持ちます。通常は、記事やフォーラムの投稿を表すために使用されます。独自のタイトル（ <h1> から <h6> ）を持つことができます。

<article>
  <h2>記事タイトル</h2>
  <p>記事内容</p>
</article>

1つのウェブページには、複数記事を含むなど、1つまたは複数の <article> を含めることができます。

`<aside>`

<aside> タグは、ウェブページまたは記事の主要コンテンツと間接的に関連する部分を配置するために使用されます。ウェブページレベルの <aside> は、サイドバーを配置するために使用できますが、必ずしもページの側面にあるとは限りません。記事レベルの <aside> は、補足情報、コメント、または注釈を配置するために使用できます。

以下は、ウェブページレベルの <aside> の例です。

<body>
  <main>主体内容</main>
  <aside>サイドバー</aside>
</body>

以下は、記事の注釈の例です。

<p>第1段落</p>

<aside>
  <p>この段落は記事の重要なポイントです。</p>
</aside>

`<section>`

<section> タグは、テーマを持つ独立したセクションを表します。通常は、ドキュメント内で章を表すために使用されます。例えば、 <article> は複数の <section> を含むことができます。 <section> は常に複数で使用され、1つのページに <section> が1つだけ存在することはありません。

<article>
  <h1>記事タイトル</h1>
  <section>
    <h2>第1章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第2章</h2>
    <p>...</p>
  </section>
</article>

上記のコードでは、 <article> には2つの <section> が含まれており、2つの章を表しています。

<section> は、スライドショー表示のページに非常に適しており、各 <section> が1つのスライドを表します。

一般的に、 <section> にはタイトルが必要です。つまり、 <h1> 〜 <h6> タグが含まれている必要があります。複数の <section> を同じ <article> 内に配置したり、1つの <section> 内に複数の <article> を含めることもできます。これは、 <section> と <article> が現在のページでどのような意味を持つかによって異なります。

`<nav>`

<nav> タグは、ページまたはドキュメントのナビゲーション情報を配置するために使用されます。

<nav>
  <ol>
    <li><a href="item-a">商品 A</a></li>
    <li><a href="item-b">商品 B</a></li>
    <li>商品 C</li>
  </ol>
</nav>

一般的に、 <nav> は <header> 内に配置されることが多く、 <footer> 内に配置するのは適切ではありません。また、1つのページに複数の <nav> が存在することもあります。例えば、1つはサイトナビゲーション用、もう1つは記事ナビゲーション用などです。

<nav> 内は通常リストですが、他のタグを配置することもできます。

`<h1>` 〜 `<h6>`

HTML は、記事の見出しを表すために6つのタグを提供しています。見出しのレベルに応じて、全部で6つのレベルに分けられます。

<h1>：一级标题（いちじみょうだい）
<h2>：二级标题（にじみょうだい）
<h3>：三级标题（さんじみょうだい）
<h4>：四级标题（よんじみょうだい）
<h5>：五级标题（ごじみょうだい）
<h6>：六级标题（ろくじみょうだい）

<h1> は最も高いレベルの見出しで、 <h6> は最も低いレベルの見出しです。次のレベルの見出しは、常に前のレベルの見出しの子見出しになります。例えば、1つの <h1> の後には複数の <h2> が続き、各 <h2> の後には複数の <h3> が続くことができます。

<body>
  <h1>JavaScript 言語紹介</h1>
    <h2>概要</h2>
    <h2>基本概念</h2>
      <h3>ウェブページ</h3>
      <h3>リンク</h3>
    <h2>主な使い方</h2>
</body>

上記のコードは、章の見出しを使用して、記事の主要な構造を明確に示しています。具体的な内容は、章の見出しの下に記述することができます。

見出しはレベルを飛ばすべきではありません。例えば、 h1 の下に直接 h3 を記述するなどです。このようにしてもエラーは発生しませんが、記事の明確な章構造が失われる原因となります。

デフォルトでは、ブラウザは見出しを太字で表示します。 h1 のフォントサイズは h2 よりも大きく、 h2 は h3 よりも大きく、というように続きます。

`<hgroup>`

メインの見出しに複数のレベルの見出し（例えば、副題を含む場合など）が含まれる場合は、 <hgroup> タグを使用して、複数のレベルの見出しをその中に配置することができます。

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

<hgroup> には <h1> 〜 <h6> のみを含めることができ、他のタグを含めることはできないことに注意してください。

セマンティック構造

意味

よく使われるタグ

<header>

<footer>

<main>

<article>

<aside>

<section>

<nav>

<h1> 〜 <h6>

<hgroup>