HTML5 セマンティック要素
HTMLマニュアルHTML5では、ページの構造と意味をより明確に示すために、いくつかのセマンティック要素が導入されました。これらの要素は、ページの構造をわかりやすくし、SEOやアクセシビリティを向上させることができます。
header
ヘッダーセクションを示す要素で、通常はサイトのロゴ、ナビゲーションメニュー、検索ボックスなどを含みます。
<header>
<h1>ウェブサイトのタイトル</h1>
<nav>...</nav>
</header>nav
ナビゲーションリンクを示す要素で、通常はメインのナビゲーションメニューに使用されます。
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">記事</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>main
ウェブページの主要なコンテンツを示す要素で、各ページに一つだけ存在するべきです。
<main>
<article>...</article>
<article>...</article>
</main>article
関連するコンテンツがまとめられた独立したセクションを示す要素で、例えばブログ記事やニュース記事などが該当します。
<article>
<h2>ブログ記事のタイトル</h2>
<p>記事の本文...</p>
</article>section
関連するコンテンツがまとめられた一般的なセクションを示す要素で、<article>要素とは異なり、特定のコンテンツタイプに限定されません。
<section>
<h2>セクションタイトル</h2>
<p>セクションの説明...</p>
</section>aside
ウェブページの主要なコンテンツから独立した追加情報を示す要素で、通常はサイドバーに使用されます。
<aside>
<h2>関連記事</h2>
<ul>...</ul>
</aside>footer
フッターセクションを示す要素で、通常は著作権情報、利用規約へのリンク、サイトマップなどを含みます。
<footer>
<p>© 2023 あなたのウェブサイト. All rights reserved.</p>
<nav>
<ul>
<li><a href="#">利用規約</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</nav>
</footer>time
日付や時間に関連する情報を示す要素で、datetime属性を使用して機械可読な形式で日付や時間を指定できます。
<p>この記事は <time datetime="2023-03-31">2023年3月31日</time> に公開されました。</p>この記事は に公開されました。
見た目は普通のテキストと同じですが、検索エンジンやスクリーンリーダーが日付や時刻の情報を適切に解釈することができます。
mark
強調表示したいテキストを示す要素で、ハイライトされたような表示になります。
<p>この<mark>重要なキーワード</mark>を見逃さないでください。</p>この重要なキーワードを見逃さないでください。
コメント