40.HTML5 セマンティック要素について

セマンティックは、言語における単語やフレーズの意味的要素、構造を表現するものです。

意味的要素=意味を持つ要素。

セマンティックエレメントとは

セマンティックとは、一般的には「意味」や「意味論」に関することを指す語です。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。

HTMLでのセマンティック要素は、ブラウザと開発者の両方にその意味や構造を明確にします。

この説明だけでは少し分かりづらいので、各要素（セマンティックエレメント）の説明とセマンティック要素の一覧をページ最後でまとめていますのでご確認ください。

非意味的要素の例 : <div> と <span> 内容について何も定義しません。

意味要素の例 : <form>, <table>, と <article> 内容を明確に定義します。

ブラウザのサポート

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

さらに、古いブラウザに「不明な要素」の処理方法を「教える」ことができます。（下位互換性があります。）

詳しくはHTML5 ブラウザ　サポートを読んでください。

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

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

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

HTML5 <section> 要素

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

W3CのHTML 5ドキュメントによると、「セクションは、内容をテーマ別にまとめたもので、通常は見出しが付いています。」

ホームページは通常、紹介、コンテンツ、そして連絡先情報のセクションに分けられます。

HTML5 <article> 要素

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

記事はそれ自身で意味を成すべきであり、それはウェブサイトの他の部分から独立してそれを読むことが可能であるべきです。

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

• フォーラム投稿
• ブログ記事
• 新聞記事

<article> に <section> を入れ子にするか、その逆にすることができるか？?

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

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

この要素でどうやってネスト（構造化）するかを決めるために定義を使うことができますか？⇨できません。（親子関係を伝える為には使えないということ）

つまり、インターネット上では、 <section> 要素の中に<article>要素と、<article> 要素をの中に<section> 要素が指定されることがあります。

また、別のページでは<section> 要素の中に別の <section>の要素とか、<article> 要素の中に <article> 要素がある場合があります。

HTML5 <header> 要素

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

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

<header> 1つの文書に複数の要素を含めることができます。

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

HTML5 <footer> 要素

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

<footer> 要素はその含む要素に関する情報が含まれている必要があります。フッターには通常、ドキュメントの作成者、著作権情報、利用規約へのリンク、連絡先情報などが含まれています。

<footer> 1つの文書に複数の要素があります。

HTML5 <nav> 要素

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

HTML5 <aside> 要素

<aside> 要素は、配置されているコンテンツとは別に、サイドバーなどのコンテンツを定義します。

<aside> コンテンツは、周囲のコンテンツに関連しなければなりません。

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

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

HTML 5では、画像とキャプションを <figure>要素にまとめることができます。

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

なぜ意味論的な要素なのか?

HTML 4では、開発者は独自のID /クラス名を使用して要素を表現していました。ヘッダー、上部、下部、フッター、メニュー、ナビゲーション、メイン、コンテナー、コンテンツ、記事、サイドバー、topnavなど

なので、HTML4では検索エンジンが正しいウェブページコンテンツを識別することを不可能にしました。

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

W3Cによると、セマンティックWebにすれば: “データをアプリケーション、企業、およびコミュニティ間で共有して再利用することを可能にする”とされているので

意味的要素（セマンティック要素）で明確にWebサイトの構造や意味をブラウザに伝えてより良いコンテンツにしましょう。

HTML5のセマンティック要素の一覧

以下はHTML 5の新しいセマンティック要素のアルファベット順リストです。