ITコース HTML基礎 016_セマンティック要素
セマンティック要素
HTML5 は多くのセマンティック要素を導入しました。これらの要素の目的は、ドキュメント構造のセマンティクスを向上させ、ドキュメントをより読みやすく、保守しやすく、検索エンジンと開発者の両方にとってより使いやすくすることです。
ページ構造には通常、ヘッダー、フッター、タイトル、ナビゲーション、コンテンツ、サイドバーなどが含まれます。
<div> 要素を使用したページレイアウト設計：
[!まとめ]
- 開発者がコードを書くのに不便です。画面いっぱいの
<div>要素に直面すると、それらが表す意味をすばやく区別するのは困難です。- SEO（検索エンジン最適化）に不利です。ブラウザは
<div>要素を使用したことしか知らず、div要素自体には意味がなく、単なるコンテナです。
セマンティック要素を使用したページレイアウト設計：
<header> <nav> <main> <aside> <footer> を使用して、ページの異なる領域を表します。これらのタグはページに良好なセマンティクスと構造を与え、開発者とブラウザの両方が Web コンテンツをすばやく理解できるようにします。
| 要素 | 用途 |
|---|---|
<header> | ページのヘッダー領域を定義するために使用し、通常は Web サイトのロゴ、メインナビゲーション、サイト全体のリンク、検索ボックスを含みます。 |
<nav> | ページのナビゲーションリンクセクションを定義するために使用します。 |
<main> | ページの主要コンテンツまたは主要機能を定義するために使用します。このコンテンツはページ内で一意である必要があります。 |
<aside> | ページのサイドバーコンテンツを定義するために使用します。このコンテンツはメインコンテンツに関連していますが、オプションです。 |
<footer> | ページのフッター領域を定義するために使用し、通常は著作権情報、連絡先情報、その他の関連情報を含みます。 |
<article> | 独立した記事、ドキュメント、ページ、アプリケーション、その他のコンテンツ領域を定義するために使用します。 |
<section> | Web ページ内の汎用的な独立したセクションを定義するために使用し、通常は見出しまたは段落/ブロックを含みます。 |
<figure> | 独立した画像、チャート、写真などのコンテンツを定義するために使用します。 |
<figcaption> | <figure> 要素にタイトルまたは説明を提供するために使用します。 |
例：
<!DOCTYPE html><html lang="en"><head> <title>私のウェブページ</title></head><body> <header> <h1>私のウェブページ</h1> </header>
<nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">私について</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav>
<main> <article> <h2>自己紹介</h2> <p>私の名前は XXX です。これはセマンティック要素の例です。</p> </article> </main>
<aside> <h2>関連リンク</h2> <ul> <li><a href="#">私のブログ</a></li> <li><a href="#">私の GitHub ページ</a></li> </ul> </aside>
<footer> <p>著作権 2023 XXX</p> </footer></body></html>効果：
この例には、HTML5 のセマンティック要素を使用して Web コンテンツの意味を説明する Web ページが含まれています。
<header>要素はページのヘッダー領域を定義し、Web サイトのロゴとメインナビゲーションを含みます。<nav>要素はページのナビゲーションリンクセクションを定義します。<main>要素はページの主要コンテンツを定義し、私の紹介記事を含みます。<aside>要素はページのサイドバーコンテンツを定義し、関連リンクを含みます。<footer>要素はページのフッター領域を定義し、著作権情報を含みます。
[!まとめ]
- 検索エンジンは Web コンテンツをより良く理解でき、検索結果でのページのランキングが向上します。
- 障害のある人が Web コンテンツをより簡単に理解できるようになり、Web のアクセシビリティが向上します。
- 開発者が Web ページ構造をより良く整理できるようになり、Web の保守性が向上します。