HTML5 语义要素

セマンティックス（古代ギリシャ語に由来）は、言語の意味を研究することと定義されます。

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

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

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

非セマンティック要素の例：<div>、<span> - 内容に関する情報を提供することができません。

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

ブラウザのサポート

はい はい はい はい はい

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

さらに、古いブラウザを「未知の要素」を処理する「ヘルプ」機能を使用できます。

この章についての学習をさらに深めるには、HTML5ブラウザのサポートを参照してください。

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

多くのウェブサイトには、ナビゲーション、ヘッダー、フッターを示す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 语义要素

HTML5の<section>要素

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

W3CのHTML文書によると、「セクション（section）は、通常タイトルを持つテーマのある内容グループです」。

ウェブサイトのホームページは、紹介、コンテンツ、連絡情報などのセクションに分けることができます。

例

<section>
   <h1>WWF</h1>
   <p>世界自然基金（WWF）は...</p>
</section>

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

HTML5 <article> 要素

<article> 要素は独立した自包含コンテンツを定義します。

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

<article> 要素の適用シーン:

  • フォーラム
  • ブログ
  • ニュース

例

<article>
   <h1>WWFは何を行っていますか？</h1>
   <p>WWFの使命は、我々の地球の自然環境の悪化を停止することです、
  そして、人々が自然と調和して生活する未来を築くこと。</p>
</article>

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

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

HTML5 标準では、<article> 要素が完全な関連する要素自包含ブロックとして定義されています。

<section> 要素は、関連する要素ブロックとして定義されています。

この定義を使って要素のネスト方法を決定できますか？いいえ、できません！

インターネット上では、<section> 要素が <article> 要素を含む HTML ページ、または <article> 要素が <sections> 要素を含むページを見つけることができます。

また、<section> 要素が <section> 要素を含み、<article> 要素が <article> 要素を含むことがあります。

HTML5 <header> 要素

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

<header> 要素は、紹介的な内容をコンテナとして使用されるべきです。

一つのドキュメントには複数の <header> 要素が含まれることができます。

以下は、一つの記事にヘッダーを定義する例です：

例

<article>
   <header>
     <h1>WWFは何を行っていますか？</h1>
     <p>WWFの使命:</p>
   </header>
   <p>WWFの使命は、我々の地球の自然環境の悪化を停止することです、
  そして、人々が自然と調和して生活する未来を築くこと。</p>
</article>

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

HTML5 <footer> 要素

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

<footer> 要素は、含まれる要素に関する情報を提供する必要があります。

フッターは通常、ドキュメントの著者、著作権情報、利用規約のリンク、連絡情報などが含まれています。

一つのドキュメントに複数の <footer> 要素を使用できます。

例

<footer>
   <p>投稿者: Hege Refsnes</p>
   <p>連絡情報: <a href="mailto:someone@example.com">
  <a href="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>要素はページの主内容以外の特定の内容（例えば、サイドバー）です。

asideの内容は周囲の内容に関連するべきです。

例

<p>私たち家族はこの夏、エプコット・センターを訪れました。</p>
<aside>
   <h4>エプコット・センター</h4>
   <p>エプコット・センターはフロリダのディズニーワールドにあるテーマパークです。</p>
</aside>

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

HTML5 <figure> と <figcaption> 要素

本や新聞では、画像と一緒にキャプションがよく見られます。

キャプション（caption）の役割は、画像に見える説明を追加することです。

HTML5により、画像とタイトルが組み合わせられます。 <figure> 要素では：

例

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - ノルウェーの pulpit pock.</figcaption>
</figure>

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

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

なぜHTML5要素を使用するのか？

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

ヘッダー、トップ、ボトム、フッター、メニュー、ナビゲーション、メイン、コンテナ、コンテンツ、記事、サイドバー、トップナビ、...

その結果、ブラウザは正しいウェブコンテンツを認識できなくなります。

そして、HTML5 要素（例：<header> <footer> <nav> <section> <article>）を通じて、この問題が解決されます。

W3Cによると、セマンティックウェブ：

「アプリケーション、企業、組織間でデータの共有と再利用を許可します。」

HTML5 のセマンティック要素

以下に、アルファベット順に並べられた HTML5 の新しいセマンティック要素が示されています。

これらのリンクは完全な HTML 参考マニュアルにリンクしています。

タグ 説明
<article> 記事を定義。
<aside> ページ内容以外の内容を定義。
<details> ユーザーが表示または非表示できる追加の詳細を定義。
<figcaption> <figure> 要素のタイトルを定義。
<figure> 図、グラフ、写真、コードリストなどの自包含コンテンツを規定。
<footer> ドキュメントまたはセクションのフッターを定義。
<header> ドキュメントまたはセクションのヘッダーを規定。
<main> ドキュメントの主内容を規定。
<mark> 重要または強調されたテキストを定義。
<nav> ナビゲーションリンクを定義。
<section> ドキュメント内のセクションを定義。
<summary> <details> 要素の表示されるタイトルを定義。
<time> 日付/時間を定義。