📗

HTMLのセクショニングコンテンツ

2022/07/27に公開

HTML

tech

セクションについて

HTMLにおいて、文章の節や章などのまとまりは「セクション」と呼ばれます。
マークアップからセクション構造を決定する方法として、「暗黙のセクション」と「セクショニングコンテンツ」によるものがあります。

暗黙のセクション

HTMLには、h1~h6までの見出しが用意されており、ある見出しが出現してから同ランクの見出しもしくは高いランクの見出しが出現するまでが１つのセクションとみなされます。

    <!-- ここから -->
    <h2>見出し</h2>
    <p>本文</p>
    <!-- ここまでが1つのセクション -->

    <!-- またここから新しいセクションとみなされる -->
    <h2>見出し２</h2>
    <p>本文２</p>

セクショニングコンテンツ

また、HTMLにはセクションの範囲を明示する要素が用意されており、それらを使うことでセクションを表現することができます。
セクションを明示する要素として

section
article
aside
nav

が挙げられます。

<!-- section要素を使って明示的にセクションを表現 -->
<section>
    <h1>見出し</h1>
    <section>
        <h2>はじめに</h2>
        <p>説明文</p>
    </section>
    <section>
        <h2>次に</h2>
        <p>説明文</p>
    </section>
</section>

section要素

文書やアプリの一般的なセクションを表します。
通常はsection要素の先頭にh1などの見出し要素を置きます。
見出しがなくてもエラーにはなりませんが、タイトルがないのは望ましくないとされています。

<!-- section要素の先頭に見出しがなくて良くない例 -->
<section>
    <p>このsection要素の使い方は望ましくない例です👆</p>
</section>

<!-- 見出しを持たないブロックを使うとき -->
<div>
    <p>見た目上の単なる囲みなどがほしいときはdivタグを使うといい👆</p>
</div>

article要素

article要素は、サイトやアプリ内のブログ記事とかTwitterのツイートなどの、自己完結する構造を表すときに使われます。
section要素との違いとして、article要素はそのセクションだけで完結するものを指します。
入れ子構造にもでき、その場合は内側のarticle要素は親要素のarticle要素に関連するものとなります。
また、footer要素やaddress要素をarticle要素に含めることで、そのarticle要素の連絡先情報などを表すことができます。

<article>
    <h3>記事タイトル</h3>
    <p>記事本文</p>
    <!-- 記事に関連する投稿者情報👇 -->
    <address>
	 <h4>記事投稿者情報</h4>
         <a href="mailto:example@example.com">example@example.com</a><br>
         <a href="tel:+0000000000">(000) 000-0000</a>
    </address>
</article>

aside要素

aside要素はメインコンテンツに関連するが、サイドバーや広告、または補足や脚注などメインコンテンツからは分離できるセクションを表します。

<article>
    <h3>body要素について</h3>
    <p>body要素はHTML文書には必ず一つ存在する要素で、表示される内容を記述するセクションです....</p>
    <!-- 記事に対する補足など👇 -->
    <aside>
	 <h4>補足</h4>
	 <p>body要素は開始タグも終了タグも省略可能で、その場合は勝手に補われてDOMツリーに追加されます</p>
    </aside>
</article>

nav要素

nav要素はナビゲーションのセクションを表し、サイト内の他ページへのリンクやページ内のリンクが含まれることがあります。(例:メニュー、目次、索引など)
サイト内のフッターに数個のリンクが含まれることがありますが、そのような場合には無理にnav要素を使う必要はありません。

<!-- footer内では無理にnavを使わなくても良し👇 -->
<footer>
   <h2>フッター内見出し</h2>
   <a href="https://exmple.com/hoge">hogeへはこちら</a>
   <a href="https://exmple.com/fuga">fugaへはこちら</a>
   <a href="https://exmple.com/foo">fooへはこちら</a>
</footer>

また、nav要素の直下にul要素などのリストを必ず入れないといけないというわけでもなく、他の要素も入れることができます。

<!-- 見出しをつけることでスクリーンリーダーなどでナビゲーションの区別がつきやすくなる -->
<nav>
    <h4>navに関する見出し</h4>
    <ul>
        <li>
            <a href="https://exmple.com">https://exmple.com</a>
        </li>
        <li>
            <a href="https://exmple.com">https://exmple.com</a>
        </li>
        <li>
            <a href="https://exmple.com">https://exmple.com</a>
        </li>
    </ul>
</nav>