HTML5 セマンティック要素

❮ 前章へ 次章へ ❯

セマンティックとは、言語における単語や語句のもつ意味の研究です。

セマンティック要素 = 意味を持った要素。

セマンティック要素とは？

セマンティック要素とは、ブラウザと開発者の両者へ、明確にその意味を説明するものです。

非セマンティック要素の例：<div>、<span> - コンテンツに関して何も述べられていない。

セマンティック　要素の例：<form>、<table>、<article> - 明確にコンテンツが定義されています。

ブラウザ・サポート

Yes Yes Yes Yes Yes

HTML5 セマンティック要素は、すべての最新ブラウザでサポートされています。

また、「未知の要素」をどのように処理するかを、古いブラウザを「教える」ことができます。

これに関しては、HTML5 ブラウザ・サポートをご覧ください。

HTML5 の新規セマンティック要素

多くの web サイトには、ナビゲーションやヘッダやフッタを示すために、次のような HTML コードが含まれています：
<div id="nav"> <div class="header"> <div id="footer">

HTML5 は、Web ページの様々な部分を定義するために、新しいセマンティック要素を提供しています： 

HTML5 Semantic Elements

HTML5 <section> 要素

<section> 要素は、文書内のセクションを定義します。

W3C HTML5 ドキュメントによると、「セクションは、通常、見出しを持つコンテンツのテーマ別のグループです。」

Web サイトのホームページは、前書き、コンテンツ、および連絡先情報にセクションを分割することができます。

例

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Try it Yourself ❯

HTML5 <article> 要素

<article> 要素は、独立した自己完結型のコンテンツを指定します。

article は、それ自体で意味をなすべきであり、web サイトの他の部分から独立して配信することが可能であるべきです。

<article> 要素を使用できる場所の例：

例

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Try it Yourself ❯

<section> 内で <article> をネストするのか、その逆か？

<article> 要素は、独立した自己完結型のコンテンツを指定します。

<section> 要素は、文書内のセクションを定義します。

要素をネストする方法を決定するために、この定義を使用できますか？ いいえ、できません！

インターネット上で、<article> 要素を含む <section> 要素や、<sections> 要素含む <article> 要素を持つ HTML ページを見受ける場合があります。

また、<section> 要素を含む <section> 要素や、<article> 要素含む <article> 要素を持つ HTML ページも見掛ける場合もあります。

新聞の例：スポーツセクションのスポーツ記事には、 各記事に技術的なセクションがあります。

HTML5 <header> 要素

<header> 要素は、文書またはセクションの見出しを指定します。

<header> 要素は、内容紹介用のコンテナとして使用する必要があります。

一つの文書内で、複数の <header> 要素を持つことができます。

次の例は、article の見出しを定義します：

例

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
Try it Yourself ❯

HTML5 <footer> 要素

<footer> 要素は、文書またはセクションのフッタを指定します。

<footer> 要素は、これを含む要素に関する情報を記述する必要があります。

フッタには、通常、文書の著者、著作権情報、利用規約へのリンク、連絡先情報などが含まれます。

一つの文書内で、複数の <footer> 要素を持つことができます。

例

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

Try it Yourself ❯

HTML5 <nav> 要素

<nav> 要素は、一組のナビゲーションリンクを定義します。

文書内のすべてのリンクが、<nav>要素内にある必要がないことに注意してください。 要素は、ナビゲーションリンクの大きなブロックだけを意図したものです。

例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Try it Yourself ❯

HTML5 <aside> 要素

<aside> 要素は、（サイドバーのような）場所に配置する、コンテンツとは別ないくつかのコンテンツを定義します。

aside のコンテンツは、周りのコンテンツに関連する必要があります。

例

<p>今年の夏、私の家族と私はエプコットセンタを訪れました。</p>

<aside>
  <h4>エプコットセンタ</h4>
  <p>エプコットセンタは、フロリダ州ディズニーワールドのテーマパークです。</p>
</aside>
Try it Yourself ❯

HTML5 <figure> と <figcaption> 要素

図のキャプションの目的は、画像に視覚的な説明を追加することです。

HTML5 では、画像とキャプションを <figure> 要素でグループ化することができます：

例

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
Try it Yourself ❯

<img> 要素は画像を定義し、<figcaption> 要素はキャプションを定義します。

なぜ、セマンティック要素か？

HTML4 では、開発者は header、top、bottom、footer、menu、navigation、main、container、content、article、sidebar、topnav、など、 要素のスタイルに独自の id/class 名を使用していました。

これにより、検索エンジンが Web ページのコンテンツを正しく識別することを不可能にしていました。

HTML5 の新しい要素（<header> <footer> <nav> <section> <article>）を使用すると、これは簡単になります。

W3C によると、セマンティック Web は：「アプリケーション、企業、地域社会全体でデータが共有され、再利用できるようになります。」

HTML5 のセマンティック要素

下には、HTML5 の新しいセマンティック要素のアルファベット順リストがあります。

リンクは、完全な HTML5 リファレンスへ移動します。

タグ 説明
<article> 記事を定義する
<aside> ページコンテンツとは別なコンテンツを定義する
<details> ユーザーが表示または非表示にすることができる追加の詳細を定義する
<figcaption> <figure> 要素の表題を定義する
<figure> イラスト、図、写真、コードリストなどのような自己完結型のコンテンツを指定する
<footer> 文書またはセクションのフッタを定義する
<header> 文書またはセクションのヘッダを指定する
<main> 文書の主要なコンテンツを指定する
<mark> マーク/ハイライトされたテキストを定義する
<nav> ナビゲーションリンクを定義する
<section> 文書内のセクションを定義する
<summary> <details> 要素に表示用見出しを定義する
<time> 日付/時刻を定義す


❮ 前章へ 次章へ ❯