Summary  
This chapter explains how to use semantic HTML elements (header, nav, section, article, footer) to structure and add meaning to different parts of a webpage.

General domain of usage  
Web development

以下は、最も一般的なセマンティック要素とその用途です。

## `header` タグ
ウェブページやセクションの上部を表現。通常、ロゴ、タイトル、ナビゲーションリンクなどを含む。

`header` と `head` を混同しないように注意。これらは異なる目的で使用される。

注意

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPHVsPgogICAgICAgIDxsaT48YSBocmVmPSIjIj5Ib21lPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgPC91bD4KICAgIDwvaGVhZGVyPgogIDwvYm9keT4KPC9odG1sPg==

## `nav` タグ
ナビゲーションリンクのブロックを定義。多くの場合、ヘッダー内に配置。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPG5hdj4KICAgICAgICA8dWw+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+SG9tZTwvYT48L2xpPgogICAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdDwvYT48L2xpPgogICAgICAgIDwvdWw+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

## `section` タグ
関連するコンテンツを論理的なセクションにまとめる要素。各セクションは通常、見出しから始まることが推奨される。


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDE+Q29tcGFueSB0aXRsZSBvciBicmFuZCBwaHJhc2U8L2gxPgogICAgICA8cD5XZWxjb21lIHRvIG91ciBjb21wYW55LiBXZSBzcGVjaWFsaXplIGluLi4uPC9wPgogICAgPC9zZWN0aW9uPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDI+U2VydmljZXM8L2gyPgogICAgICA8dWw+CiAgICAgICAgPGxpPlNlcnZpY2UgMTwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMjwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMzwvbGk+CiAgICAgIDwvdWw+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

## article タグ
ブログ記事やニュース記事など、独立したコンテンツを表す要素。検索エンジンが主要なコンテンツを特定する際に有用。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPGgyPkJsb2cgUG9zdCBUaXRsZTwvaDI+CiAgICAgIDxwPkJsb2cgcG9zdCBjb250ZW50IGdvZXMgaGVyZS4uLjwvcD4KICAgIDwvYXJ0aWNsZT4KICA8L2JvZHk+CjwvaHRtbD4=

## `footer` タグ
ウェブページまたはセクションの下部を定義。通常、著作権表記、連絡先情報、関連リンクなどを含む。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPCEtLSBhcnRpY2xlIGNvbnRlbnQgLS0+CiAgICA8L2FydGljbGU+CgogICAgPGZvb3Rlcj4KICAgICAgPHA+JmNvcHk7IE15IFdlYnNpdGUuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlByaXZhY3kgUG9saWN5PC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlRlcm1zIG9mIFNlcnZpY2U8L2E+PC9saT4KICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdCBVczwvYT48L2xpPgogICAgICA8L3VsPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

`<header>`タグの主な目的は何ですか？

メニューやナビゲーションバーなど、ナビゲーションリンクのセクションを定義するために一般的に使用されるHTMLタグはどれですか？

`<section>`タグの主な機能は何ですか？

`<footer>`タグはいつ使用すべきですか？

HTMLの基本を習得し、構造化され、アクセシブルなウェブコンテンツを作成します。タグ、要素、属性を使用してドキュメントを構造化する方法を学びます。テキスト、リスト、画像、音声、動画を自在に扱い、ウェブページを充実させます。整理されたデータのためのテーブルや、ユーザー入力・インタラクションのためのフォームを作成します。アクセシビリティを高めるセマンティックHTMLを理解し、基礎から完全で機能的なウェブサイト構造を構築します。

ウェブとHTMLの概要、タグ、要素、属性の重要性について紹介します。HTMLドキュメントの基本構造やウェブの簡単な歴史について学びます。

HTMLマークアップの基本を習得し、特別なテキストのフォーマットやリストに焦点を当て、HTMLドキュメント内でのコンテンツ構造化における重要性を理解します。HTMLドキュメント構造の詳細に踏み込み、テキストマークアップ技術を洗練させます。

ウェブ開発における視覚および聴覚コンテンツの力を引き出し、画像、動画、音声要素をHTMLドキュメントにシームレスに統合する方法を学びます。さまざまなメディア形式を取り入れる際の細かな違いについて探求します。

HTMLにおけるテーブルとフォームの包括的な解説を通じて、データの提示方法やユーザーインタラクションの複雑さを理解します。テーブル構造、フォーム作成、入力要素を網羅しています。フォーム入力要素の実装や、機能性を高める属性の活用に習熟します。

セマンティックHTML要素を深く学ぶことで、HTMLスキルを次のレベルへ引き上げ、構造化されアクセシブルなウェブコンテンツの作成が可能になります。新たに得た知識を活用し、初めてのウェブサイト構築に挑戦し、アイデアを形にしましょう。

HTMLにおけるセマンティック要素の探究

`header` タグ

`nav` タグ

`section` タグ

article タグ

`footer` タグ

1. `<header>`タグの主な目的は何ですか？

2. メニューやナビゲーションバーなど、ナビゲーションリンクのセクションを定義するために一般的に使用されるHTMLタグはどれですか？

3. `<section>`タグの主な機能は何ですか？

4. `<footer>`タグはいつ使用すべきですか？

HTMLにおけるセマンティック要素の探究

header タグ

nav タグ

section タグ

article タグ

footer タグ

1. <header>タグの主な目的は何ですか？