【HTML Living Standard】section要素の使い方
section要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
sectionオブジェクトは、HTML文書内でテーマ別に独立した汎用的なセクションを表現するためのオブジェクトです。これは関連性の高いコンテンツを意味的にグループ化し、文書の構造を明確にするために利用されます。通常、section要素は必ず見出し要素（h1からh6）を伴い、その見出しがセクションの主題を示します。
例えば、ウェブサイトの主要な章や節、記事内の異なるテーマのセクション、あるいはタブ付きインターフェースにおける各タブの内容など、論理的にまとまったコンテンツのブロックに使用されます。section要素は単なるスタイル適用のためではなく、コンテンツにセマンティックな意味（意味論的な意味）を与えることが目的です。このため、スタイル目的で要素をグループ化するだけであれば、セマンティックな意味を持たないdiv要素を使用することが推奨されます。
また、article要素との違いも重要です。article要素が自己完結型で、単独で再利用可能なコンテンツ（例: ニュース記事、ブログ投稿）を表すのに対し、section要素は文書全体の一部として関連コンテンツを組織化するために用いられます。section要素を適切に利用することで、ウェブページの構造がより理解しやすくなり、検索エンジンや支援技術によるコンテンツの解析が容易になり、結果としてアクセシビリティとSEOの向上が期待できます。
構文(syntax)
1<section> 2 <h2>Section Title</h2> 3 <p>This is content within a section.</p> 4</section>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML sectionタグでコンテンツをグループ化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML sectionタグのサンプル</title> 7</head> 8<body> 9 <!-- sectionタグは、文書やアプリケーションの独立した汎用的なセクションを表します。 10 通常、見出し要素（h1〜h6）を内部に持ち、関連するコンテンツをグループ化するために使用されます。 --> 11 12 <section> 13 <h2>会社概要</h2> 14 <p> 15 当社は、革新的なテクノロジーを駆使して社会に貢献することを目指しています。 16 お客様の課題解決とビジネス成長をサポートするITソリューションを提供します。 17 </p> 18 </section> 19 20 <section> 21 <h2>事業内容</h2> 22 <p> 23 ウェブサイト開発、モバイルアプリケーション開発、クラウドインフラ構築など、 24 多岐にわたるサービスを提供しています。 25 </p> 26 <ul> 27 <li>Webサイト開発</li> 28 <li>モバイルアプリ開発</li> 29 <li>クラウドサービス</li> 30 </ul> 31 </section> 32 33 <section> 34 <h2>お問い合わせ</h2> 35 <p> 36 ご質問やご相談がございましたら、お気軽にお問い合わせください。 37 メールアドレス：info@example.com 38 </p> 39 </section> 40</body> 41</html>
HTMLのsectionタグは、文書やアプリケーション内で独立した汎用的なセクションを表すために使用されます。このタグは、関連するコンテンツを意味的にグループ化し、文書の構造を明確にする役割を持っています。例えば、ウェブサイトで「会社概要」「事業内容」「お問い合わせ」といった異なる内容の塊がある場合、それぞれの塊をsectionタグで囲むことで、その部分が独立した一つのトピックであることをブラウザや検索エンジンに伝えることができます。
sectionタグは通常、内部に見出し要素（h1からh6）を伴って使用され、その見出しがセクションの内容を要約する形となります。これにより、文書全体の構成がより論理的になり、アクセシビリティや検索エンジンの理解にも貢献します。このタグは、特定の機能を持つ要素ではなく、コンテンツを構造化するためのコンテナ要素であるため、引数や戻り値といった特別な機能はありません。単に開始タグ<section>と終了タグ</section>で囲むだけで使用できます。
提示されたサンプルコードでは、「会社概要」「事業内容」「お問い合わせ」という三つの異なるテーマのコンテンツをそれぞれ<section>タグで囲み、各セクション内にh2タグで見出しを設けています。このようにすることで、文書の各部分が明確に区切られ、内容が理解しやすくなっています。
sectionタグは、文書内で関連するコンテンツを意味的にグループ化する際に使用します。単なる見た目を整えるためのグループ化であればdivタグを用いるなど、用途に応じた使い分けが重要です。一般的に、sectionタグの内部にはh1からh6のいずれかの見出し要素を含め、そのセクションの主題を明確に示すことが推奨されます。これにより、文書構造が正しく構築され、可読性やアクセシビリティが向上します。また、articleやnav、asideなど、より具体的な意味を持つセクショニング要素が適している場合は、sectionよりもそちらを優先して使用してください。sectionタグは、それらのいずれにも当てはまらない汎用的な独立したセクションに適用すると良いでしょう。
section要素でコンテンツをまとめる
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>section要素の基本的な使い方</title> 7</head> 8<body> 9 <h1>Webサイトのメインコンテンツ</h1> 10 11 <!-- section要素は、文書の独立した汎用的なセクションを表します。 --> 12 <!-- 通常、見出し要素（h1〜h6）を伴い、そのセクションの内容を説明するタイトルを提供します。 --> 13 <!-- 論理的に関連するコンテンツをグループ化する際に使用します。 --> 14 15 <section> 16 <!-- このセクションは「会社概要」に関するコンテンツをまとめる役割を持ちます。 --> 17 <h2>会社概要</h2> 18 <p>株式会社サンプルは、20XX年に設立されたIT企業です。最新のテクノロジーを活用し、お客様のビジネス成長をサポートします。</p> 19 <p>私たちは、革新的なソリューションを通じて社会に貢献することを目指しています。</p> 20 </section> 21 22 <section> 23 <!-- このセクションは「提供サービス」に関するコンテンツをまとめる役割を持ちます。 --> 24 <h2>提供サービス</h2> 25 <ul> 26 <li>Webサイト制作・開発</li> 27 <li>モバイルアプリケーション開発</li> 28 <li>クラウドインフラ構築支援</li> 29 <li>システムコンサルティング</li> 30 </ul> 31 <p>お客様の多様なニーズに応えるため、幅広いサービスを提供しています。</p> 32 </section> 33 34 <section> 35 <!-- このセクションは「お問い合わせ先」に関するコンテンツをまとめる役割を持ちます。 --> 36 <h2>お問い合わせ</h2> 37 <p>ご質問やご相談がございましたら、お気軽にお問い合わせください。</p> 38 <address> 39 電話番号: 03-XXXX-XXXX<br> 40 メールアドレス: info@example.com 41 </address> 42 </section> 43</body> 44</html>
HTMLのsection要素は、ウェブページ内の独立した汎用的なセクションを表すために使用されます。これは、関連するコンテンツを論理的なまとまりとしてグループ化する際に非常に役立つ要素です。例えば、ウェブサイトの「会社概要」「サービス内容」「お問い合わせ先」といった、それぞれ独立したテーマを持つ内容を区切る場合に利用します。
この要素は通常、h1からh6までの見出し要素と組み合わせて使用されます。見出しがそのsectionの内容のタイトルとなり、利用者がウェブページの構造を理解しやすくなります。サンプルコードでは、「会社概要」「提供サービス」「お問い合わせ」という見出しを持つ複数のsectionが示されており、それぞれ異なるテーマの情報をまとめています。これにより、各セクションが何を扱っているのかが明確になり、ウェブページの可読性が向上します。
section要素には、プログラミング言語の関数やメソッドのような「引数」や「戻り値」という概念はありません。これは、特定のデータを渡して処理を実行したり、その結果を受け取ったりする機能を持つものではなく、あくまでウェブページのコンテンツを意味的に構造化するためのマークアップ要素だからです。適切にsection要素を用いることで、ウェブページのアクセシビリティ（情報の利用しやすさ）も向上します。
section要素は、文書内で意味的に独立した汎用的なセクションを構成する際に使用します。この要素を使う上での最も重要な点は、そのセクションの内容を明確にするため、通常、見出し要素（h1からh6のいずれか）を内部に含めることが強く推奨されるという点です。見出しがないsectionは、その意味や役割が不明確になりがちです。単にスタイル目的で要素をグループ化したい場合は、意味を持たないdiv要素を使用するようにしてください。articleやnavなど、より具体的な意味を持つ要素で表現できる場合は、そちらを優先することが推奨されます。適切に利用することで、ウェブページの構造が明確になり、アクセシビリティや検索エンジン最適化に役立ちます。