HTMLセマンティック要素
セマンティック要素=意味を持つ要素。
セマンティック要素とは何ですか？
セマンティック要素は、ブラウザと開発者の両方にとってその意味を明確に説明します。
非セマンティック要素の例：<div>および<span>-その内容については何も伝えません。
セマンティック要素の例： <form>、、<table>および<article>-その内容を明確に定義します。
HTMLのセマンティック要素
多くのWebサイトには、ナビゲーション、ヘッダー、およびフッターを示す<div id = "nav"> <div class = "header"> <div id = "footer">のようなHTMLコードが含まれています。
HTMLには、Webページのさまざまな部分を定義するために使用できるいくつかのセマンティック要素があります。
- <記事>
- <脇>
- <詳細>
- <figcaption>
- <図>
- <フッター>
- <ヘッダー>
- <メイン>
- <マーク>
- <nav>
- <セクション>
- <概要>
- <時間>
HTML <section>要素
この<section>要素は、ドキュメント内のセクションを定義します。
W3CのHTMLドキュメントによると、「セクションはコンテンツのテーマ別グループであり、通常は見出しが付いています。」
<section>要素を使用できる場所の例：
- チャプター
- 序章
- ニュースアイテム
- 連絡先
Webページは通常、紹介、コンテンツ、連絡先情報のセクションに分割できます。
例
ドキュメントの2つのセクション：
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
HTML <article>要素
この<article>要素は、独立した自己完結型のコンテンツを指定します。
記事はそれ自体で意味があり、他のWebサイトから独立して配布できる必要があります。
<article>要素を使用できる場所の例：
- フォーラムの投稿
- ブログ投稿
- ユーザーコメント
- 製品カード
- 新聞記事
例
独立した自己完結型のコンテンツを含む3つの記事：
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
例2
CSSを使用して<article>要素のスタイルを設定します。
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
<section>またはその逆に<article>をネストしますか？
この<article>
要素は、独立した自己完結型のコンテンツを指定します。
この<section>要素は、ドキュメントのセクションを定義します。
定義を使用して、これらの要素をネストする方法を決定できますか？いいえ、できません！
<section>したがって、要素を含む<article>要素と<article>要素を含む要素を含むHTMLページが見つかります<section>。
HTML <header>要素
この<header>要素は、紹介コンテンツまたは一連のナビゲーションリンクのコンテナを表します。
<header>通常、要素には次のものが含まれます。
- 1つ以上の見出し要素（<h1>-<h6>）
- ロゴまたはアイコン
- 作者情報
注：<header> 1つのHTMLドキュメントに複数の要素を含めることができます。ただし、、または別の要素<header>内に配置することはできません。<footer><address><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>
HTML <フッター>要素
この<footer>要素は、ドキュメントまたはセクションのフッターを定義します。
<footer>通常、要素には次のものが含まれます。
- 作者情報
- 著作権情報
- 連絡先
- サイトマップ
- トップに戻るリンク
- 関連資料
1つのドキュメントに複数の<footer>要素を含めることができます。
例
ドキュメントのフッターセクション：
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML <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>
HTML <aside>要素
要素は、配置されるコンテンツ（サイドバーなど）以外の<aside>コンテンツを定義します。
<aside>コンテンツは、周囲のコンテンツに間接的に関連している必要があります。
例
配置されているコンテンツ以外のコンテンツを表示します。
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
例2
CSSを使用して<aside>要素のスタイルを設定します。
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
HTMLの<figure>および<figcaption>要素
<figure>タグは、イラスト、図、写真、コードリストなどの自己完結型のコンテンツを指定します。
タグは、要素の<figcaption>キャプションを定義し<figure>ます。要素は、<figcaption>要素の最初の子または最後の子として配置できます<figure>。
この<img>要素は、実際の画像/イラストを定義します。
例
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
なぜセマンティック要素なのか？
W3Cによると、「セマンティックWebを使用すると、アプリケーション、企業、およびコミュニティ間でデータを共有および再利用できます。」
HTMLのセマンティック要素
以下は、HTMLのセマンティック要素の一部のリストです。
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。