HTML入門 | HTML5の開始 | HTML5のセマンティック要素

HTML5のセマンティック要素

セマンティック要素とは、それ自体に意味を持つ要素のことである。つまり、その要素が使われた意味をブラウザーと開発者の両方に明確に伝える要素を指す。

divやspanのような非セマンティック要素は、内部のコードを見なければ何の内容なのか分かりにくい。一方、form、table、imgのようなセマンティック要素は、名前を見るだけで役割を理解できる。

HTML5で追加されたセマンティック要素

セマンティック要素	説明
`<header>`	HTML文書またはセクションのヘッダーを表す。
`<nav>`	HTML文書間を移動するためのリンクの集合を表す。
`<main>`	HTML文書の主要コンテンツを定義する。
`<section>`	HTML文書内のセクションとして内容のまとまりを表す。
`<article>`	HTML文書内で独立した記事やコンテンツを表す。
`<aside>`	ページの主要部分以外のコンテンツを表す。
`<figure>`	グラフィックや動画などの独立したコンテンツを表す。
`<figcaption>`	`figure`要素のキャプションを表す。
`<footer>`	HTML文書またはセクションのフッターを表す。
`<bdi>`	周囲とは異なる方向で表示されるテキストを表す。
`<mark>`	ハイライトされたテキストを定義する。
`<details>`	ユーザーが表示または非表示にできる追加説明を表す。
`<summary>`	`details`要素に表示される見出しを定義する。
`<dialog>`	ダイアログボックスやダイアログウィンドウを定義する。
`<menuitem>`	ポップアップメニューから選択できるメニュー項目を表す。
`<meter>`	定められた範囲内のスカラー値を表す。
`<progress>`	作業の進行状況を表す。
`<ruby>`	ルビ文字を表す。通常は漢字などの読みを示す文字である。
`<rt>`	本文の上に表示される文字を表す。
`<rp>`	ルビをサポートしないブラウザーでのみ表示される内容を表す。
`<time>`	日付と時刻を表す。
`<wbr>`	長い単語が行末に来たとき、必要に応じて改行できる位置を示す。

HTML5で追加された主なセマンティック要素

HTML5で新しく追加された代表的なセマンティック要素は次のとおりである。

header要素
nav要素
main要素
section要素
article要素
figure要素とfigcaption要素
footer要素

header要素は、HTMLページまたはセクションのヘッダーを定義する。ヘッダーとは一般的に、ページの上部に表示されるテキストや画像などの組み合わせである。 1つのページ内に複数のheader要素を置くことができる。

<header>
    <h1>文書全体のヘッダーです。</h1>
</header>
...
<section>
    <header>
        <h2>セクションのヘッダーです。</h2>
        <p>ヘッダー部分に含まれる段落です。</p>
    </header>
</section>

nav要素

nav要素は、HTML文書間を移動するためのリンクの集合を定義する。 nav要素は大きなリンクのまとまりを意味するが、文書内のすべてのリンクをnav要素に含める必要はない。

<nav>
    <a href="/html/html5_element_semantic">セマンティック要素</a> |
    <a href="/htmlhtml5_element_form/">Forms要素</a> |
    <a href="/html/html5_element_inputtype">Input要素</a>
</nav>
...
<p>このリンクはnav要素に含まれない<a href="/html/html5_element_inputattr">Input属性</a>に関するリンクです。</p>

section要素

section要素は、HTML文書内のセクションを定義する。セクションとは見出しを持ち、HTML文書全体の内容と関連するコンテンツのまとまりを意味する。

<section>
    <h2>セクション領域です。</h2>
    <p>Lorem ipsum</p>
</section>

article要素

article要素は、HTML文書内で独立した1つの記事を定義する。 article要素の内容は、それだけで理解でき、Webサイトのほかの部分とは別に読める必要がある。

<article>
    <h2>記事領域です。</h2>
    <p>Lorem ipsum</p>
</article>

上の2つの例を見ると、section要素とarticle要素の大きな違いは分かりにくい。実際にも、この2つの要素の使い分けに大きな差が出ない場合は多い。一般的には、section要素は文書全体の内容に含まれるまとまりに使い、article要素は文書全体とは別に独立した内容を入れるときに使うとよい。

figure要素とfigcaption要素

本や新聞などでは、画像のすぐ下にその画像を説明するキャプションが置かれることがある。 HTML5では、この目的のためにfigure要素とfigcaption要素が用意されている。

figure要素は、HTML文書内でグラフィックや動画などの独立したコンテンツを定義するときに使う。 figcaption要素は、そのfigure要素のキャプションを定義するときに使う。

<figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
    <figcaption>[ 図1. 上の画像はきれいな花です。 ]</figcaption>
</figure>

footer要素は、HTML文書またはセクションのフッターを定義する。 HTML文書のフッターには、一般的にサイトの作成者、著作権情報、連絡先などを記載する。また、1つの文書内に複数のfooter要素を置くことができる。

例

<footer>
    <p>文書全体のフッターです。</p>
    <p>Copyright 2016. 著者 all rights reserved.</p>
    <p>連絡先: 02-1234-5678</p>
</footer>

なぜセマンティック要素を使うのか

HTML4では、開発者は要素のスタイル指定に固有のIDやクラス名をよく使っていた。例として、header、top、bottom、footer、menu、navigation、main、container、content、article、sidebar、topnavなどがある。

セマンティック要素が追加される前のHTML4までは、div要素でレイアウトを作ることが多かった。

<div id="header"><h2>Header領域</h2></div>
<div id="nav"><h2>Nav領域</h2></div>
<div id="section"><p>Section領域</p></div>
<div id="footer"><h2>Footer領域</h2></div>

そのため、検索エンジンがWebページの正しいコンテンツを識別しにくかった。新しいHTML5要素である<header>、<footer>、<nav>、<section>、<article>を使うと、この識別がより容易になる。 W3Cによると、セマンティックWebはアプリケーション、企業、コミュニティ間でデータを共有し再利用できるようにする。