HTML5 セマンティクス

意味論 (古代ギリシャ起源) は、言語の意味の研究として定義できます。

セマンティック要素は、セマンティックな意味を持つ要素です。

セマンティック要素とは何ですか?

セマンティック要素は、ブラウザーと開発者に対してその意味を明確に説明します。

非セマンティック要素の例: <div> および <span> - コンテンツに関する情報は提供されません。

セマンティック要素の例: <form>、<table>、<img> - コンテンツを明確に定義します。

ブラウザのサポート

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

さらに、古いブラウザが「未知の要素」に対処できるように「支援」することもできます。

詳細については、「HTML5 ブラウザのサポート」の章をご覧ください。

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

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

HTML5 は、ページのさまざまな部分を定義する新しいセマンティック要素を提供します：

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

HTML5 セマンティック要素

HTML5 <section>

<section> 要素は、ドキュメント内のセクションを定義します。

W3C の HTML ドキュメントによると、「セクションはテーマに沿ったコンテンツのグループであり、通常は見出しが付いています。」

Web サイトのホームページを、紹介、コンテンツ、連絡先情報などのセクションに分割できます。

例

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

自分で試してみてください

HTML5 <article>

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

ドキュメントには独自の意味があり、サイトの他の部分とは独立して読むことができます。

<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> 

自分で試してみてください

ネストされたセマンティック要素

HTML5 標準では、<article> 要素は、関連要素の完全な自己完結型ブロックを定義します。

HTML5 <header> 要素

<header> 要素は、ドキュメントまたはセクションのヘッダーを指定します。

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

ドキュメント内には複数の <header> 要素が存在する場合があります。

次の例では、記事のヘッダーを定義します。

例

<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> 

自分で試してみてください

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> 

自分で試してみてください

HTML5 <nav> 要素

<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> 

自分で試してみてください

HTML5 <aside> 要素

<aside> 要素 ページのメイン コンテンツの外側にある一部のコンテンツ (サイドバーなど)。

脇のコンテンツは周囲のコンテンツと相対的なものである必要があります。

例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> 

自分で試してみてください

HTML5 の <figure> 要素と <figcaption> 要素

本や新聞では、写真と組み合わせた見出しが一般的です。

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

HTML5 では、図とタイトルを <figure> 要素で組み合わせることができます。

例

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

自分で試してみてください

<img> 要素定義画像、<figcaption> 要素はタイトルを定義します。

なぜ HTML5 要素なのか?

HTML4 では、開発者は好みの属性名を使用してページ要素のスタイルを設定します。

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

これにより、ブラウザは正しいページ コンテンツを識別できなくなります。

<header> <footer> <nav> <section> <article> などの HTML5 要素を使用すると、この問題は解決されます。

W3C によると、セマンティック Web は次のようになります。

「アプリケーション、企業、コミュニティ間でデータを共有および再利用できるようにします。」

HTML5 のセマンティック要素

新しい HTML5 セマンティック要素をアルファベット順に以下に示します。

これらのリンクから、完全な HTML リファレンス マニュアルにアクセスできます。