sectionタグとはなに？
他のタグとの違いを知りたい
HTMLの基本が知りたい
HTMLの<section>タグは、ウェブページの異なるセクションを効果的に構造化し、コンテンツを整理するための強力なツールです。
しかし、実際にどのような意味があるのか、他のタグとの違いはあるのか気になっている方もいらっしゃるでしょう。
本記事では、<section>タグの基本から応用まで、詳しく解説していきます。
- sectionタグの基礎知識
- sectionタグのメリットとデメリット
- sectionタグの具体的な使用例
<section>タグの基礎知識
はじめに、<section>タグの基礎知識について以下のとおりに解説していきます。
- sectionタグとは
- sectionタグは文書内で1つのまとまりを表す要素
sectionタグとは
<section> タグは、Webページ内の関連するコンテンツをグループ化し、それに意味を与えるためのセマンティックなHTML要素です。
W3CのHTML5仕様書では、<section> を「テーマの変化を伴うコンテンツのセクション」と定義しています。
これは、文書の構造を明確にし、検索エンジンや支援技術にコンテンツの関係性を伝える役割を果たします。
<section> タグを使用することで、文書の構造がより明確になり、ユーザーと検索エンジンに対してコンテンツの関係性と重要性を示すことができるでしょう。
sectionタグは文書内で1つのまとまりを表す要素
<section> タグは文書内で独立したセクションを作るための要素で、それ自体が一つのまとまりを形成します。
HTML5のセマンティック要素として設計されており、文書の異なる部分を区切ることで、より構造的なマークアップが可能になります。
教育機関のウェブサイトの場合、の<section> タグで区切られているケースは以下のとおりです。
- コースの説明セクション
- 教員の紹介セクション
- 連絡先セクションなど
<section> タグを適切に使用することで、文書内で明確な構造と意味を持つセクションを作成でき、ユーザビリティとアクセシビリティが向上します。
sectionタグの使用条件
ここからは、sectionタグを使用する際の条件について解説していきます。
- sectionタグは汎用的なセクショニングタグ
- 見出しタグをつける
- divタグとの違い
sectionタグは汎用的なセクショニングタグ
<section> タグは多目的に使用できるセクショニング要素であり、特定の内容をグループ化するために利用します。
HTML仕様では、<section> を「テーマの変化を伴うコンテンツのセクション」であると定義しており、特定の種類のコンテンツに限定されていないことを示しています。
ウェブページ内で、プロダクトの説明、ユーザーレビュー、購入情報といった異なるセクションが<section> タグで分けられている場合。
<section> タグは多用途に利用できるセマンティック要素であり、文書の異なる部分を構造的にマークアップする際に有効です。
見出しタグをつける
各<section> 要素は、そのセクションの内容を表す見出しタグを持つべきです。
HTMLのアクセシビリティガイドラインでは、コンテンツの構造を明確にするために見出しを使用することを推奨しています。
これは、画面リーダーを使用する人々がコンテンツを理解しやすくするためです。
たとえば、ブログ記事で、各セクションに対応する見出しが<h1>, <h2>, <h3> タグなどで提供されている場合などです。
見出しタグを適切に使用することで、コンテンツの構造が強化され、ユーザーが情報を理解しやすくなります。
divタグとの違い
<section> タグはセマンティックな意味を持つセクショニング要素であり、<div> タグは汎用的なコンテナ要素で意味を持ちません。
HTMLの仕様書では、<section> と <div> は異なる目的で使用されることが明記されています。
<section> は文書の構造を形成し、<div> はスタイリングやレイアウトのためにコンテンツをグループ化します。
たとえば、商品ページで、製品の説明、仕様、レビューがそれぞれ<section> タグでマークアップされている一方で、スタイリングのために複数の要素が<div> タグで囲まれている場合などです。
<section> は文書のセマンティックな構造を形成するために、<div> はスタイリングやレイアウトのために使用します。
sectionタグの利点と注意点
ここからは、sectionタグのメリットと注意点について解説していきます。
具体的には以下のとおりです。
- sectionタグにSEO効果はあるのか？
- デザイン・レイアウト目的で使用しない
- 対応ブラウザ
それぞれのポイントについて解説していきますので、参考にしてください。
sectionタグにSEO効果はあるのか？
<section> タグは、コンテンツの構造を明確にすることでSEO（検索エンジン最適化）にポジティブな影響を与える可能性があります。
Googleを含む主要な検索エンジンは、ページのコンテンツ構造を理解しやすい形でマークアップされていると、関連性のある検索結果をユーザーに提供しやすくなります。
<section> タグは、関連するコンテンツをまとめ、その構造を明確にする役割を果たします。
ニュースポータルサイトで、各ニュース記事が<section> タグで区切られ、関連するコンテンツが一緒にグループ化されている場合、検索エンジンはその記事の主要なテーマや内容をより正確に理解できます。
<section> タグを使用して文書の構造を明確にすることは、SEOの観点から見ても利益をもたらす可能性があります。
デザイン・レイアウト目的で使用しない
<section> タグはデザインやレイアウトの目的ではなく、コンテンツのセマンティックな構造を定義するために使用すべきです。
<section> タグはHTML5で導入されたセマンティックな要素の一つであり、目的は文書の意味を明確にすることにあります。
デザインやレイアウトの目的で使用すべきではなく、そのような目的では<div> タグを使用すべきです。
Webページのレイアウトを調整するために<section> タグを使う代わりに、<div> タグやCSSフレームワークを使用する。
<section> タグはセマンティックな構造を明確にするために使用し、デザインやレイアウトの調整は他の方法で行うべきです。
対応ブラウザ
<section> タグは現代のほとんどのウェブブラウザでサポートされています。
HTML5の仕様の一部として導入されて以来、主要なウェブブラウザは<section> タグをサポートしています。
Google Chrome、Mozilla Firefox、Safari、Microsoft Edgeなど、最新のウェブブラウザはすべて<section> タグをサポートしています。
<section> タグは広範囲にわたるブラウザ互換性を持っており、安心して使用できます。
sectionタグのサンプルコード
ここからは、sectionタグのサンプルコードを紹介していきます。
使用例
<section> タグを使用することで、ウェブページ内の関連するコンテンツをグループ化し、文書の構造を明確にすることができます。
<section> タグはセマンティックなHTMLの一部であり、文書内の異なるセクションをマークアップするために使用されます。
これにより、検索エンジンやスクリーンリーダーなどのユーザーエージェントがコンテンツをより正確に解釈し、適切なコンテキストで表示することが可能になります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample Page</title> </head> <body> <header> <h1>My Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#articles">Articles</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <section id="home"> <h2>Welcome to My Website</h2> <p>This is a sample website to demonstrate the use of the <section> tag.</p> </section> <section id="articles"> <h2>Articles</h2> <article> <h3>Article 1</h3> <p>This is the content of the first article.</p> </article> <article> <h3>Article 2</h3> <p>This is the content of the second article.</p> </article> </section> <section id="contact"> <h2>Contact</h2> <p>If you have any questions, please <a href="mailto:example@example.com">email us</a>.</p> </section> <footer> <p>© 2023 My Website</p> </footer> </body> </html>
このサンプルコードでは、<section> タグを使用してホーム、記事、お問い合わせの3つの主要なセクションを作成しています。
各セクションは独立しており、セクション内には関連するコンテンツが含まれています。
<section> タグを使用することで、ウェブページの構造が明確になり、ユーザーと検索エンジンがコンテンツをより正確に解釈できるようになります。
これは、ウェブページのアクセシビリティとSEOにとって非常に重要です。
sectionタグの適切な使用法
ここからは、sectionタグの適切な使用法について解説していきます。
sectionタグの使い方
<section> タグは、関連するコンテンツをグループ化し、それぞれのグループに見出しを提供することで、文書のセマンティックな構造を強化するために使用します。
- sectionタグを使用する際のポイント
- sectionタグとarticleタグとの違い
sectionタグを使用する際のポイント
関連するコンテンツをグループ化する: <section> タグ内には関連するコンテンツを配置し、それぞれのセクションが一つのテーマやトピックに焦点を当てていることを確認してください。
見出しを提供する: 各セクションには適切なレベルの見出しタグ（<h1>, <h2>, <h3> など）を提供して、コンテンツの階層を明確にします。
単独で意味を成立させる: <section> タグで囲まれたコンテンツは、単独で意味を成立させることができるようにし、他のセクションとの依存を避けてください。
sectionタグとarticleタグとの違い
<section> タグは文書内の関連するコンテンツをセクション化するために使用され、<article> タグは自己完結型のコンテンツをマークアップするために使用されます。
<section> タグは文書全体のセマンティックな構造を強化するために使用されますが、<article> タグはブログの投稿、ニュースの記事、フォーラムの投稿など、単独で配布または再利用可能なコンテンツをマークアップするために使用されます。
ニュースポータルサイトでは、各ニュース記事を<article> タグでマークアップし、記事内の関連するセクション（例: 背景、詳細、コメント）を<section> タグでマークアップします。
<section> と <article> は異なる目的で使用されるセマンティックなHTMLタグであり、それぞれの使用法を理解して適切に使用することが重要です。
sectionタグの注意点
ここからは、sectionタグの注意点について解説していきます。
具体的には以下のとおりです。
- 適切なタグを使用する
- まとまりを作るタグの使い分け
それぞれのポイントについて解説していきますので、参考にしてください。
適切なタグを使用する
<section> タグを使用する際は、その他のセマンティックなHTMLタグとの使い分けを意識して適切なタグを使用することが重要です。
セマンティックなHTMLを正しく使用することで、ウェブページのアクセシビリティが向上し、検索エンジンによるより良い解釈が可能となります。
例えば、単独で意味を成立させるコンテンツには<article>を、ナビゲーションリンクには<nav>を使用するなど、目的に応じたタグを選択する必要があります。
ブログ投稿をマークアップする際には、投稿全体を<article>で囲み、投稿内のセクション（例：イントロ、本文、結論）を<section>で囲います。
ただし、著者情報や関連記事のリンクなど、投稿と直接関連しないコンテンツには<aside>を使用します。
適切なセマンティックなHTMLタグを使用することで、ウェブページのアクセシビリティとSEOが向上し、ユーザーにとっても理解しやすい構造となります。
まとまりを作るタグの使い分け
コンテンツのまとまりを作る際には、<section>の他にも<article>, <aside>, <nav>など、目的に応じて適切なセマンティックな要素を使用することが重要です。
セマンティックなHTML要素を適切に使用することで、ウェブページの構造が明確になり、ユーザーエージェントや検索エンジンがコンテンツを正確に解釈する助けとなります。
ウェブページにニュース記事を掲載する場合、記事本体は<article>でマークアップし、記事内の異なるセクション（例：イントロ、本文、関連情報）を<section>で囲みます。また、ナビゲーションメニューには<nav>, サイドバーには<aside>を使用します。
ウェブページのコンテンツを適切にセマンティックな要素でマークアップすることで、ウェブページの構造が明確になり、ユーザーにとって理解しやすいページとなります。
まとめ
<section> タグはウェブページのコンテンツをセクション化し、セマンティックな構造を強化するのに役立つHTML要素です。
適切に使用することで、ページのアクセシビリティとSEOが向上し、ユーザーにとって価値のあるコンテンツを提供することができます。
しかし、デザインやレイアウトの目的で使用するべきではなく、文書のセマンティックな構造を明確に表現するために使用することが重要です。
また、<section>タグだけでなく、<article>, <aside>, <nav>などの他のセマンティックな要素も適切に使い分けることで、より良いウェブページを作成できます。
