文章構造化タグ(article, section, aside, nav)

2022/11/16

article, section, aside, navなど文章の構造を強化するためのタグが存在します。ここでは簡単な利用例を紹介します。

セクション関連のタグ

文章のかたまりを意味づけるために、以下のタグを利用できます。

タグ	概要
article	独立したコンテンツ。
section	章分けなどで利用。タイトルと内容で構成される１つのまとまり。内部に `見出し(Hタグ)` を含むことが推奨されている。
aside	関連リンクなどの補足情報。
nav	ナビゲーション。

ページ構造化タグ

HTML5では、headerタグ、footerタグなどが追加されています。HTML5以前で、<div id="header">としていた箇所が、<header>に置き換えられるイメージです。

タグ	概要
main	ページ内のメインコンテンツとなるセクションへ使用。 1ページ内に1つのみ使用。 article, aside, footer, header, navの中には入れてはいけない。
header	ヘッダー。
footer	フッター。

利用例

<body>
<div id="wrapper">

  <!-- ヘッダー -->
  <header id="header">
    <div class="container">
      <h1 class="site-title"><a><img src=""></a></h1>
      <p class="site-description"></p>
      <dl id="site-info">
        <dt></dt>
        <dd></dd>
      </dl>
    </div>
  </header>

  <!-- グローバルナビゲーション -->
  <nav id="gnav">
    <div class="container">
      <ul>
        <li id="menu-item-1"><a>ホーム</a></li>
        <li id="menu-item-2"><a></a></li>
      </ul>
    </div>
  </nav>

  <!-- パンくずナビゲーション -->
  <nav id="breadcrumb">
    <div class="container">
      <ul>
        <li><a>ホーム</a></li>
        <li><a></a></li>
      </ul>
    </div>
  </nav>

  <div class="wrapper">
    <!-- メイン -->
    <main>
      <h1>コンテンツの見出し</h1>

      <article>
        <section>
          <h1></h1>
          <section>
            <h2></h2>
          </section>

          <section>
            <h2></h2>
          </section>

          <section>
            <h2></h2>
          </section>

          <aside></aside>
        </section>
      </article>
    </main>

    <!-- サイドバー -->
    <aside class="sidebar">
    </aside>

    <p id="pagetop"><a></a></p>
  </div>

  <!-- フッター -->
  <footer id="footer">
    <div class="container">
      <p id="copyright">
        <small>Copyright (c) XXXXX All Rights Reserved.</small>
      </p>
    </div>
  </footer>
</div>
</body>

よかったらシェアしてね！