1. TOP
  2. html&CSS入門
  3. HTML5のセクションを区切る要素まとめ

HTML5のセクションを区切る要素まとめ

HTML5より前は、divでボックスを作りidやclass名をつけ、それらを組み合わせてレイアウトを作成してきました。

img

HTML5ではdivに変わる要素として、 ヘッダーを表す「header要素」やフッターを表す「footer要素」など、意味をもつ要素が数多く追加されました。

それらを適切に組み合わせることで、より直感的で意味を持ったHTMLを記述できるようになっています。

例えば下記を見てください。

img

HTML5は、それぞれに使うべき要素を適切に使うことで、コードをみる人間に伝わりやすいのはもちろん、クローラーやブラウザなどの機械にも正確に情報を伝えることが出来るように設計されています。

HTML5で追加された、よく使う要素

HTML5で多くのタグが追加されましたが、よく使われるタグには下記のようなものがあります。

  • header要素…ページ全体のヘッダーや、セクション内のヘッダーを表します
  • footer要素…ページ全体のヘッターや、セクション内のヘッターを表します
  • main要素…ページの主要な内容を表します
  • nav要素…グローバルナビゲーションなどの主要なナビゲーションを表します
  • artile要素…独立した1つのコンテンツを表します
  • section要素…区切りを表します
  • aside要素…補足情報や余談的なブロックを表します

セマンティックなHTML

このように各要素には「意味」が定義されています。それぞれの意味のことをセマンティクスと呼び、意味付けがなされていることをセマンティックと呼んでいます。

例えば、よく使うh1もセマンティックな(意味付けがなされている)要素で、ページ内の最も重要な見出しというセマンティクス(意味)を持っています。

このようにセマンティックな要素は、以前のHTMLから使われてきましたが、HTML5ではさらに上述したようなheader、footer、navなどの様々な要素が追加され、より明確で詳細に意味づけを行うことができるようになりました。

なぜセマンティックなHTMLが必要なのか?

なぜセマンティックなHTMLが必要なのでしょうか?

いくつか理由がありますがその一つには、「WEBサイトを見ているのが人間だけではない」ということがあげられます。

人間だけでないというのは、例えば検索エンジンのクローラーや、視力が弱い方がなどが使う読み上げソフトなどの「機械」がサイトを見ているということです。

人間が見れば、ここはサイドバーだな、ここは本文だなというのは見た目でわかります。ですが機械にとってはその識別は非常に難しいものとなります。特に従来のHTMLだと、どこがサイドバーでどこが本文なのかを理解するのは困難です。

セマンティックなHTMLを記述すれば、情報がより正しく伝わり、SEO的にはより正しい評価がされることができますし、読み上げソフトに関しては正しい解釈での音声に変換され、アクセシビリティの向上が見込めます。

つまり、機械に正しく情報を伝えることは、それを介して情報を受け取る人間に対しても、わかりやすく情報を伝えることにつながるんですね。

そういったことも踏まえて、HTML5には数多くのセマンティックな要素が準備されているので、私たちコーディングする側はどこでどの要素を使うかをしっかりと把握して、正確に構築することを心がけましょう。

それぞれの要素の使い方

セクショニング・コンテンツとセクショニングルート要素について

要素の説明をするにあたって、セクションや、セクショニング・コンテンツ、セクショニングルート要素について知っておく必要があります。

セクション

何らかの意味を持った、コンテンツのひとまとまりのことです。

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

セクションの範囲を定義するための要素です。以下の要素が用意されています。

  • <article>
  • <aside>
  • <nav>
  • <section>

セクショニングルート要素

セクションのルート(最上位)として扱われる要素で、セクションの内部に独自のアウトラインを持てます。

祖先のアウトラインはセクショニング・ルート要素内には継承されないですし、セクショニング・ルート要素内のアウトラインも、祖先のアウトラインに影響を与えません。

以下の要素が該当します。

  • <blockquote>
  • <body>
  • <details>
  • <fieldset>
  • <figure>
  • <td>

header要素

header要素は親要素として一番近い、セクショニングコンテンツかセクショニングルート要素のヘッダーを表します。一番近いセクショニングルート要素がbodyの場合は文書全体のヘッダーを表します。

ヘッダーは通常、タイトルや導入部、ナビゲーションなどが含まれます。また、ページ内に複数使うことができます。

文書全体のヘッダー

文書全体のヘッダーとして使いたい場合は下記のように記述します。

<body>
<header>
<h1>ロゴなど</h1>
<nav>ナビゲーションなど<nav>
</header>
</body>

一番近いセクショニングコンテンツかセクショニングルート要素がbodyなので、ページ全体のヘッダーとして認識されます。ページ全体のヘッダーとして使われる場合、ロゴやナビゲーションを含むことが多いです。

セクションのヘッダー

また、header要素は、sectionやarticleなどのセクションのヘッダーとしても使用することができます。

<body>
<article>
<header>
<h1>タイトルタイトルタイトル</h1>
<p><time>公開日:2025年06月30日</time></p>
</header>
<p>本文本文本文本文本文本文本文本文本文本文本文本文</p>
</article>
</body>

上記の例の場合、一番近いセクショニングコンテンツかセクショニングルート要素がarticleになるので、articleのヘッダーとして扱われます。

ここではarticleは記事を表していますので、記事のヘッダーということになります。記事のヘッダーとしてタイトルや公開日などが含まれることが多いです。

footer要素

footer要素は親要素として一番近い、セクショニングコンテンツかセクショニングルート要素のフッターを表します。一番近いセクショニングルート要素がbodyの場合は文書全体のフッターを表します。

フッターは通常、著者、関連文書へのリンクなどの情報が含まれます。また、ページ内に複数使うことができます

文書全体のフッター

文書全体のフッターとして使いたい場合は下記のように記述します。

<body>
<p>本文本文本文本文本文本文本文本文本文本文本文本文</p>
<footer>
<ul>フッターのナビゲーションなど</ul>
<p>Copyright表示など</p>
</footer>
</body>

一番近いセクショニングコンテンツかセクショニングルート要素がbodyなので、ページ全体のフッターとして認識されます。ページ全体のフッターとして使われる場合、ナビゲーションやコピーライトなどが含まれます。

セクションのフッター

footer要素は、セクションのフッターとしても使用することができます。

<body>
<article>
<p>本文本文本文本文本文本文本文本文本文本文本文本文</p>
<footer>
<p>著者:ホゲホゲ</p>
<p>参考:参考文献のリンク</p>
</footer>
</article>
</body>

上記の例の場合、一番近いセクショニングコンテンツかセクショニングルート要素がarticleになるので、articleのフッターとして扱われます。

ここではarticleは記事を表していますので、記事のフッターということになります。記事のフッターとして著者や参考文献へのリンクなどが含まれることが多いです。

main要素

main要素は、そのページの主要なコンテンツを表します。

主要なコンテンツですので基本的にそのページ内で1回だけ使うことになります。そのページ固有のコンテンツのみを含め、ページの共通コンテンツである、ナビゲーションやヘッダー、フッターなどは含まないようにします。

仕様上、article, aside, footer, header, nav要素の中に入れることはできません。

基本的な使い方

main要素は下記のようにして使います。

<body>
<header>ページ全体のヘッダー</header>
<main>
<article>記事の内容</article>
</main>
<footer>ページ全体のフッター</footer>
</body>

上記は、ブログなどのような記事が中心となるサイトを想定しています。主要なコンテンツは記事になるので、articleをmain要素で囲んでいます。

nav

ナビゲーションリンクのセクションを表します。ナビゲーションリンクとは、グローバルナビゲーションなどのリンクの集まりのことです。

全てのリンクをnav要素に入れる必要はなく、グローバルナビゲーションのような主要なナビゲーションのみをnavに入れます。フッターにあるちょっとしたリンクの集まりはnavに入れる必要はありません。

使い方は下記のように、リンクリストをnavタグで囲って使います。

<nav>
 <ul>
  <li><a href="#">メニュー01</a></li>
  <li><a href="#">メニュー02</a></li>
  <li><a href="#">メニュー03</a></li>
  <li><a href="#">メニュー04</a></li>
 </ul>
</nav>

aside

asideは周りにコンテンツとわずかに関連しつつも、メインコンテンツではないブロックや補足情報などに使います。以下のような箇所が当てはまるでしょう。

  • サイドバーのカテゴリ一覧など
  • 関連記事
  • 広告
  • 補足情報
asideというスペルにはsideがつくので、一見サイドバーに使う要素と思われがちですが、余談という意味の「aside」ですので、サイドバー以外の場所でも使われることに注意しましょう。

実際の例を見てみましょう。

<body>
<header>ページ全体のヘッダー</header>
<main>
メインコンテンツ
<!-- 補足情報 -->
<aside>
<p>補足情報</p>
</aside>
</main>
<!-- サイドバー -->
<div id="sidebar">
<aside>
<ul>
<h3>カテゴリー</h3>
<li><a href="#">カテゴリー1</a></li>
<li><a href="#">カテゴリー2</a></li>
<li><a href="#">カテゴリー3</a></li>
</ul>
</aside>
<footer>ページ全体のフッター</footer>
</div>
</body>

上記の例では、記事内の補足情報として使っているのと、サイドバーとしても使っています。このように複数回使っても問題ありませんが、asideを入れ子にすることはできません。

article要素

article要素は、それ自体が独立したコンテンツとして成り立つブロックを表します。独立したコンテンツとは、その部分だけで見ても内容が完結しているブロックです。

例えば下記のような箇所が想定されます。

  • 記事
  • 記事一覧の一つ一つ
  • ブログへのコメント
  • フォーラムへの投稿

実際にブログの記事をarticleでマークアップしてみましょう。

<body>
<header>ページ全体のヘッダー</header>
<main>
<article>
<h2>記事のタイトル</h2>
<p>記事の内容記事の内容記事の内容記事の内容</p>
</article>
</main>
<footer>ページ全体のフッター</footer>
</body>

記事の中に、コメントなどのようなコンテンツがある場合、articleを入れ子にしても構いません。

section

section要素はセクションを表します。セクションというのはコンテンツのひとまとまりのことで、見出しとそれに関する内容が含まれます。絶対ではありませんが、section要素は見出し要素の利用が強く推奨されています。

WEBページはセクションが集まってできていると言えます。様々な場面のセクションをセマンティックにグルーピングするために、article要素、 nav要素などのセクションを表す要素が多数用意されているのはご紹介してきた通りです。

それらの要素のどれにも当てはまらない場合が出てくると思いますが、そういった場合に使用するのがsection要素になります。

例を見てみましょう。

<body>
<header>ページ全体のヘッダー</header>
<main>
<article>
<header>
<h2>記事のタイトル</h2>
<p>記事の内容記事の内容記事の内容記事の内容</p>
</header>
<section>
<h3>小見出し1</h3>
<p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p>
</section>
<section>
<h3>小見出し2</h3>
<p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p>
</section>
</article>
</main>
<footer>ページ全体のフッター</footer>
</body>

小見出しと記事の内容をsectionで囲っています。このようにsectionは文章の中で複数使うここができます。

さらに、sectionを入れ子にすることもできます。

<section>
<h3>小見出し1</h3>
<p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p>
</section>
<section>
<h3>小見出し2</h3>
<p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p>
<section>
<h4>小見出し3</h4>
<p>記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容</p>
</section>
</section>

上記のようにあるコンテンツの中に、さらにコンテンツのまとまりがある場合はsectionを入れ子にします。基本的には見出しと文章のセットをsectionでまとめていくイメージでグルーピングしていけば良いでしょう。

こうすることで、クローラーやその他の機械に対して、どこからどこまでがひとかたまりなのかを正確に伝えられるようになります。

見た目を変えるのを目的でsectionを使ってはいけません。スタイルをつけるために区切りたい場合はdivを使います。

div要素

div要素はCSSで見た目を変えるためだけにグルーピングしたい場合に使います。

意味的に意味のあるまとまりはこれまで紹介してきた要素を使い、意味的に無意味だけどどうしてもCSSで見た目を変えるために必要という場合に使うと良いでしょう。

どの要素を使うか迷ったら

これまでに紹介してきた要素の中で

  • header
  • footer
  • main
  • nav
  • aside
    はあまり使いどころに迷うことはないと思います。

どれを使うか迷ってしまうのが、

  • article
  • section

の2つだと思います。

これらの2つの使い分けは以下のように考えるとわかりやすくなります。

  • そのセクションが、それだけで独立したコンテンツとして成り立つ場合…article
  • そのセクションが、それだけでは完結しない場合…section

このようにして使い分ければ、迷わずに要素を決められるのではないでしょうか。