セマンティック要素の紹介

HTML5 標準では、種類ごとに分けると、ページ構造、テキスト コンテンツ、フォームなど、多くの新しいセマンティック要素が追加されています。

そしてここでは主にページ構造の新しい要素を紹介します。

セマンティック要素とは

簡単に言うと、セマンティック要素とは要素（タグ）に何らかの意味を与えることであり、要素の名前はその要素が表現したい意味です。

たとえば、<header> はヘッダーを意味し、<footer> はフッターを意味します。

特徴:

①保守が簡単: セマンティック要素を使用すると、より明確なページ構造情報が得られ、後でページを保守しやすくなります。コードを再度確認する必要はありません。div を見つけてから、特定の ClassName を見つけます。

②アクセシビリティ: スクリーン リーダーやその他のアクセシビリティ ツールを支援します。

③ 検索エンジンの最適化に適しています: 検索ロボットは、HTML5 のいくつかのセマンティック要素をチェックした後、インデックスを作成したページに関する情報を収集できます。

HTML5 セマンティック要素

<header>: Web ページまたは記事のヘッダー領域を定義します。ロゴ、ナビゲーション、検索バーなどを含めることができます。

<記事>

<ヘッダー>

<h1>Internet Explorer 9</h1>

<p><time pubdate datetime="2011-03-15"></time></p>

</header>

<p>Windows Internet Explorer 9 (略称 IE9) は、2011 年 3 月 14 日 21:00 にリリースされました</p>

</article>

ブラウザの最小バージョン: IE 9、Chrome 5

使用方法:
①Webページのヘッダーをマークするために使用される場合、ロゴ、ナビゲーション、検索バーなどの情報を含めることができます。
②コンテンツのタイトルをマークするために使用する場合、タイトルに他の情報が含まれる場合にのみ、

を使用してタイトルをマークします。

<main>: Web ページのメインコンテンツを定義します。

ブラウザの最小バージョン: IE はサポートされていません、Chrome 35

<footer>: Web ページまたは記事のフッター領域を定義します。著作権、ファイリング、その他のコンテンツを含めることができます。

<フッター>

<p>投稿者: Hege Refsnes</p>

<p><time pubdate datetime="2012-03-01"></time></p>

</footer>

ブラウザの最小バージョン: IE 9、Chrome 5

使用方法:
①Webページのフッターとして使用する場合、通常、Webサイトの著作権、法的制限、リンクなどが含まれます。
②記事のフッターとして使用される場合、通常、著者に関する情報が含まれます。

<nav>: ページナビゲーションリンクをマークします。複数のハイパーリンクを含むゾーン。

<ナビ>

<a href="/html/">HTML</a>

<a href="/js /">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

ブラウザの最小バージョン: IE 9、Chrome 5

使用説明:

①ページには、ページナビゲーションや関連記事のおすすめなど、複数の <nav> 要素を含めることができます。

②<footer>エリアの連絡先情報と認証情報は<nav>要素に含める必要はありません。

<section>

: 通常、Web ページ内の独立した領域としてマークされます。 <section>

<h1>WWF</h1>

<p>世界自然保護基金 (WWF) は....</p>
</section>

ブラウザの最小要件バージョン: IE 9、Chrome 5

使用方法:

記事内のセクションなど、Web ページ内の独立した領域として使用できます。

<article>

: 完全で独立したコンテンツ ブロック。独立した <header>、<footer> およびその他の構造要素を含めることができます。ニュース、ブログ投稿、その他の独立したコンテンツなど (コメントや著者プロフィールを除く)。 <記事>

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9 (略称 IE9) は、2011 年 3 月 14 日 21:00 にリリースされました。 </p>

</article>

ブラウザの最小バージョン: IE 9、Chrome 5

<aside>

: 周囲のメイン コンテンツの外側にコンテンツ ブロックを定義します。例: 注釈。 <p>私はこの夏、家族とエプコット センターを訪れました。</p>

<aside>

<h4>エプコット センター</h4>

<p>エプコット センターは、フロリダ州ディズニー ワールドにあるテーマ パークです。</p>

</aside>

ブラウザの最小バージョン: IE 9、Chrome 5

<figure>: 独立したコンテンツを表し、<figcaption> (タイトルを示す) と組み合わせて使用​​されることが多く、記事内の写真、イラスト、表、コード スニペットなどに使用できます。

ブラウザの最小バージョン: IE 9、Chrome 8

<figcaption>: <figure> 要素のタイトルを定義します。

ブラウザの最小バージョン: IE 9、Chrome 8次のセクション