（最終更新日：2023年6月）
✔以下の疑問をお持ちの方へ向けた記事です
「HTMLのsectionタグは何ができるのだろうか？」
「sectionタグの書き方を学びたい」
「sectionタグの具体的な使用例を見て理解したい」
✔この記事を読むことで得られる知識
- sectionタグの基本的な使い方
- sectionタグを活用するためのテクニック
- sectionタグを用いた具体的な使用例
この記事では、HTMLのsectionタグの基本的な使い方だけでなく、ウェブページのセクション分けや、より読みやすいコンテンツ構成の作り方など、より実践的な内容も含めて紹介します。
ぜひ最後までお読みください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
HTMLとsectionタグの概要
こちらでは、ウェブ開発におけるHTMLとsectionタグの基本についてお伝えします。
- ウェブ開発とHTMLの基本
- HTMLタグの一部としてのsectionタグ
- sectionタグの基本的な機能と用途
ウェブ開発とHTMLの基本
ウェブ開発では、HTML（Hyper Text Markup Language）が基本的な言語として使用されます。
HTMLはウェブページの骨格を形成し、その構造と内容を定義するものです。
HTMLは一連のタグから成り立ち、各タグは特定の機能を持ちます。
例えば、<h1>タグは主要な見出しを、<p>タグは段落を表現します。
HTMLタグの一部としてのsectionタグ
sectionタグは、HTMLタグのひとつです。
sectionタグはHTML5から導入され、ウェブページの特定のセクションを定義します。
これはウェブページを論理的なセクションに分割し、その構造をより明確に表現するのに役立ちます。
sectionタグの基本的な機能と用途
sectionタグは主にウェブページのコンテンツの区切りを明示的に示すために使用されます。
このタグの役割は、ウェブページの特定部分が、別のトピックや視点に移る場所を示すことです。
例を挙げるとこちらになります。
- ニュース記事で異なるトピックを扱う各部分
- ウェブサイトのホームページにある複数のコンテンツセクション
sectionタグの詳細と使用上の注意
次に、sectionタグの詳細な使用方法と、使用上の注意点について探ります。
- sectionタグの基本的な使用方法
- sectionタグと他のHTMLタグとの関係
- sectionタグを使用したページの構造化
- sectionタグ使用時のポイントと注意点
sectionタグの基本的な使用方法
sectionタグの基本的な使用方法は簡単です。
sectionタグを使用すると、ウェブページ特定のセクションを明示的に示せます。
タグは< section >と< /section >の間に配置して、その間にセクションのコンテンツを記述するのです。
たとえば、ウェブページ上の特定の記事や製品説明などのコンテンツセクションを作成する際に使用します。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<nav>
<!-- ナビゲーションメニュー -->
</nav>
<section>
<h2>About Me</h2>
<p>I am a web developer passionate about creating beautiful and functional websites.</p>
</section>
<section>
<h2>My Projects</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</section>
<section>
<h2>Contact</h2>
<p>You can reach me at email@example.com or by phone at 123-456-7890.</p>
</section>
<footer>
<p>© 2023 ITC. All rights reserved.</p>
</footer>
</body>
</html>sectionタグと他のHTMLタグとの関係
sectionタグは、ほかのHTMLタグと組み合わせて使用されることが多いです。
たとえば、sectionタグ内には通常、見出し（< h1 >〜< h6 >）が含まれ、その見出しはそのセクションの内容を説明します。
また、他のタグとしては、段落（< p >）、リンク（< a >）、画像（< img >）などもよく用いられます。
sectionタグを使用したページの構造化
sectionタグを使用すると、ウェブページの構造をより明確に示せます。
なぜならウェブブラウザやスクリーンリーダーなどのユーザーエージェントが、ページの内容を正確に解釈できるからです。
また構造化されたコンテンツは、SEO（検索エンジン最適化）にも寄与します。
適切に構造化されたウェブページは、構造化されていないウェブページと比べたときに、検索結果において高い位置にランク付けされる傾向があります。
sectionタグ使用時のポイントと注意点
sectionタグの使用において、独立したコンテンツを含むことが重要です。
なぜならdivタグなどと同様に扱うと、混乱を招く可能性があるから。
sectionタグを取り除いた場合にも意味をなすように構成しましょう。
スタイリングの目的で使用すべきではありません。
ウェブページがさまざまなデバイスやブラウザで適切に表示・解釈されることを確保できます。
実践：sectionタグを使用したウェブページの作成
こちらでは、具体的なsectionタグの使用例について説明します。
例を通じて、sectionタグの使用法をより深く理解することができるでしょう。
- sectionタグを使用した基本的なウェブページの例
- sectionタグと他のHTMLタグを組み合わせた実例
- 見出しのないセクションの使用例
sectionタグを使用した基本的なウェブページの例
sectionタグを使用したウェブページの一例として、ウェブページ上の複数の記事をそれぞれsectionタグで区切ることがあります。
この場合、各sectionタグ内には、記事のタイトルを示すhタグ（例えばh2）や、記事の本文を示すpタグが含まれます。
これにより、各記事が独立したセクションとして明確に表現されます。
sectionタグと他のHTMLタグを組み合わせた実例
sectionタグは他のHTMLタグと組み合わせて使うことが一般的です。
たとえばsectionタグ内に、同タグをネスト（入れ子に）して使用できます。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<nav>
<!-- ナビゲーションメニュー -->
</nav>
<section>
<h2>About Me</h2>
<p>I am a web developer passionate about creating beautiful and functional websites.</p>
<section>
<h3>Education</h3>
<p>I have a degree in Computer Science from XYZ University.</p>
</section>
<section>
<h3>Experience</h3>
<section>
<h4>Company A</h4>
<p>Position: Front-end Developer</p>
</section>
<section>
<h4>Company B</h4>
<p>Position: Web Designer</p>
</section>
</section>
</section>
<section>
<h2>Projects</h2>
<section>
<h3>Project A</h3>
<p>Description of Project A</p>
</section>
<section>
<h3>Project B</h3>
<p>Description of Project B</p>
</section>
</section>
<footer>
<p>© 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>ウェブページの構造をより細かく表現することが可能になるのです。
見出しのないセクションの使用例
sectionタグは見出しを必ずしも必要としません。
適切な見出しを付けるのが難しい場合には、見出しのないsectionタグを使用しましょう。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<nav>
<!-- ナビゲーションメニュー -->
</nav>
<section>
<p>This section contains some information without a specific heading.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac ultrices lectus. Nulla facilisi. Morbi semper leo nec urna ultrices, sed congue tortor fermentum.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
<section>
<p>Another section without a specific heading.</p>
<p>Sed at eros dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque viverra elit a massa bibendum, ut condimentum sem aliquam.</p>
<p>Etiam eget lorem et quam volutpat pharetra in non libero. Nunc sollicitudin cursus est, non semper purus tristique a. Curabitur cursus sem sed nunc dignissim, sed cursus nisi lobortis.</p>
</section>
<footer>
<p>© 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>ただし、これは例外的なケースであり、通常はsectionタグ内に見出しを含めることが推奨されます。
HTML4.01からHTML5への変更とsectionタグ
この部分では、HTML4.01からHTML5へのバージョンアップがもたらした変更点、特にsectionタグの導入による影響について説明します。
- HTML4.01とHTML5の主要な違い
- sectionタグの導入前と導入後の違い
- HTML5で追加になったタグ一覧
HTML4.01とHTML5の主要な違い
HTML4.01からHTML5への変更は、ウェブ開発に大きな影響を及ぼしました。
なぜならHTML5では新たに多くのタグが追加され、それによりより意味的なマークアップが可能になったからです。
その中でもsectionタグは、ウェブページを複数のセクションに分ける際に役立つ重要な要素です。
sectionタグの導入前と導入後の違い
HTML5が導入される前のHTML4.01では、セクショニング要素としてdivタグが広く使われていました。
しかしdivタグはセマンティックな要素ではなく、その名前からそのセクションの目的や内容を推測することは難しいです。
sectionタグを使うことで、ページの各セクションがどのような目的でどのような内容を持つかを、コードを見ただけで理解しやすくなりました。
HTML5で追加になったタグ一覧
以下に、HTML4.01からHTML5への変更で追加されたいくつかのタグを挙げます。
一度目を通しておきましょう。
| タグ名 | 説明 | 例 |
|---|---|---|
<article> | 独立したコンテンツ領域を定義します。新聞の記事やブログの投稿など。 | <article><h2>Blog Post Title</h2><p>Blog post content...</p></article> |
<section> | HTMLドキュメントの中で一連のコンテンツをグループ化し、通常、見出し要素 (<h1>–<h6>) と一緒に使用します。 | <section><h2>Section Heading</h2><p>Section content...</p></section> |
<nav> | ページ内のナビゲーションリンクをグループ化します。 | <nav><ul><li><a href="#section1">Section 1</a></li><li><a href="#section2">Section 2</a></li></ul></nav> |
<header> | 一つの「コンテナ」内部で導入コンテンツをグループ化します。通常、サイトのタイトル、ロゴ、ナビゲーションなどを含みます。 | <header><h1>Website Title</h1><nav>...</nav></header> |
<footer> | 一つの「コンテナ」内部でフッターをグループ化します。通常、著作権情報、法的情報、連絡先情報などを含みます。 | <footer><p>Copyright © 2023</p></footer> |
<aside> | メインコンテンツから少し離れたコンテンツを表現します。サイドバーやコールアウトなどに使われます。 | <aside><h2>Related</h2><p>...</p></aside> |
<figure> | 画像、イラスト、図表、コードスニペットなどの自己完結型のコンテンツを表現します。 | <figure><img src="image.jpg" alt="An image"><figcaption>A caption for the image</figcaption></figure> |
<figcaption> | <figure>要素のキャプションを表現します。 | <figure><img src="image.jpg" alt="An image"><figcaption>A caption for the image</figcaption></figure> |
<main> | ドキュメントの主要なコンテンツを表現します。各HTMLドキュメントには一つの<main>要素が含まれるべきです。 | <main> <h1>title</h1> <p>これは段落</p> </main> |
CSSとsectionタグの組み合わせ
こちらでは、CSSと組み合わせたスタイリングについて解説します。
CSSを活用し、より見やすいウェブサイトを目指しましょう。
- CSSを使用したsectionタグのスタイリング
- レスポンシブデザインとsectionタグ
CSSを使用したsectionタグのスタイリング
sectionタグとCSSを組み合わせることで、ウェブページの見た目を細かく制御できます。
たとえば、特定のsectionタグに対して背景色や境界線を指定したり、内部の文字サイズや行間を調整したりすることができます。
これにより、ウェブページ全体のデザインを一貫したものに保つことが可能になるのです。
HTML
<section class="custom-section">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>CSS
.custom-section {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 20px;
font-size: 16px;
line-height: 1.5;
}この例では、custom-sectionというクラスを持つsectionタグに対して、背景色、境界線、パディング、文字サイズ、行間の設定を行っています。
レスポンシブデザインとsectionタグ
レスポンシブデザインは、ウェブページがさまざまなデバイスや画面サイズに適応できるようにするための設計手法です。
sectionタグはこのレスポンシブデザインをサポートするためにも使えるのです。
たとえば、画面の幅によって、特定のsectionのレイアウトを変更したり、表示または非表示にしたりが可能。
HTML
<section class="custom-section2">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>CSS
.custom-section2 {
padding: 20px;
font-size: 16px;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
.custom-section2 {
background-color: #f2f2f2;
border: 1px solid #ccc;
}
}
@media screen and (max-width: 480px) {
.custom-section2 {
display: none;
}
}
これはメディアクエリというCSSの機能と組み合わせて使用されます。
- 画面幅が768px以下の場合：背景色と境界線を追加
- 画面幅が480px以下の場合：sectionを非表示
アクセシビリティとsectionタグ
ウェブアクセシビリティという観点で、sectionタグを見ていきましょう。
さまざまな人がアクセスするHPだからこそ、より使いやすいページ作りが必要となるのです。
- sectionタグとウェブアクセシビリティ
- アクセシビリティを考慮したsectionタグの使用方法
sectionタグとウェブアクセシビリティ
ウェブアクセシビリティとは、ウェブページがすべてのユーザーにとって使いやすく、アクセスしやすい状態であることを指します。
なぜアクセスしやすくするかというと、障害をお持ちの方を含め、さまざまな方がホームページ上の情報を必要としているからです。
sectionタグは、スクリーンリーダーなどの補助技術に対してページの内容を正確に伝える役割を果たします。
ウェブアクセシビリティにおいて重要な要素といえるでしょう。
アクセシビリティを考慮したsectionタグの使用方法
アクセシビリティの観点において、sectionの内容を正しく反映する、見出しの設定が不可欠です。
見出しにより、そのパートの内容を理解しやすくなります。
sectionタグ自体に、ARIA(role=”region”など)を適切に設定することで、アクセシビリティをより高めることも可能です。
<section role="region" aria-label="About Us">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>まとめ
当記事で学んだ内容は以下のとおり。
- HTMLのsectionタグは、ウェブページ上の一部を区別するためのセマンティックな要素です。
- sectionタグは、ウェブページの構造を明確にし、SEOやアクセシビリティに役立つことが期待できます。
- sectionタグは他のHTML要素と組み合わせて使用することで、さまざまなレイアウトと情報の表現が可能となります。
- HTML4.01からHTML5への変更により、sectionタグが導入され、ウェブページの構造化が一層容易になりました。
これらの知識を活用して、より良いウェブページを作成するためのスキルを磨き続けてください。
この知識は基本的なものであるため、更に深く学び、練習することでより実用的なスキルへと発展させられるでしょう。