【Web制作の必須知識】HTML「section」と「article」要素：使い分けで情報発信をレベルアップ
HTMLにおける「section」と「article」要素の違い：徹底解説
HTML5で導入された「section」と「article」要素は、どちらもコンテンツを区切るために使用されますが、それぞれ異なる意味と役割を持っています。適切な使い分けは、Webページの構造を明確にし、検索エンジンやユーザーにとって理解しやすいコンテンツを作るために重要です。
それぞれの役割
- section要素:
- 章、節、項など、論理的なまとまりのあるコンテンツを定義します。
- ヘッダー（h1～h6）を使って、そのセクションの内容を明確にすることが推奨されます。
- 複数のsection要素を階層的に入れ子にすることができます。
- 例：ブログ記事の「はじめに」、「本論」、「まとめ」など
- article要素:
- 独立して意味を持つ、完結したコンテンツを定義します。
- ブログ記事、ニュース記事、商品ページなど、1つのテーマにまとまった内容を囲みます。
- 他のコンテンツと区別し、独立して読んでも理解できることが重要です。
- article要素内には、authorやtimeなどのメタデータを含めることができます。
- 例：ブログ記事全体、ニュース記事1件、商品ページ1件など
使い分けるポイント
- コンテンツの独立性:
- 独立して意味を持つコンテンツ：article要素
- 他のコンテンツと関連する、論理的なまとまり：section要素
- ヘッダーの使用:
- article要素にはh1（推奨）を使用し、その記事のタイトルを明確にする。
- section要素内では、h1～h6を使って、そのセクションの内容を明確にする。
- 再利用可能性:
- article要素は、他のページやコンテキストでも再利用しやすい。
- section要素は、特定のページやコンテキストに固有の内容に使用されることが多い。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログ記事</title>
</head>
<body>
<header>
<h1>ブログ</h1>
</header>
<main>
<article>
<h2>新しいスマートフォン発売！</h2>
<p>2024年5月1日、待望の新型スマートフォンが発売されました。</p>
<p>新機能やスペック、価格などを詳しくご紹介します。</p>
<footer>
<p>著者： 山田 太郎</p>
<time datetime="2024-05-01">2024年5月1日</time>
</footer>
</article>
<section id="comments">
<h2>コメント</h2>
</section>
</main>
</body>
</html>
まとめ
「section」と「article」要素は、それぞれ異なる役割を持つため、適切な使い分けが重要です。コンテンツの独立性、ヘッダーの使用、メタデータなどを考慮し、それぞれの要素を使い分けることで、Webページの構造を明確にし、ユーザーや検索エンジンにとって理解しやすいコンテンツを作ることができます。
HTMLにおける「section」と「article」要素の使い分けを理解するためのサンプルコード
以下のサンプルコードは、「section」と「article」要素を正しく使い分けたWebページの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログ</title>
</head>
<body>
<header>
<h1>TechAcademyブログ</h1>
</header>
<main>
<article>
<h2>HTMLで始めるWebサイト作成入門</h2>
<p>HTMLはWebサイトの土台となる言語です。このチュートリアルでは、HTMLの基本的な書き方から、簡単なWebページの作成までを段階的に学んでいきます。</p>
<p>必要なものは、テキストエディタとWebブラウザだけです。さあ、一緒にWebサイト作りを始めましょう！</p>
<footer>
<p>著者： 山田 太郎</p>
<time datetime="2024-04-25">2024年4月25日</time>
</footer>
</article>
<section id="categories">
<h2>カテゴリ</h2>
<ul>
<li><a href="#">Web制作</a></li>
<li><a href="#">プログラミング</a></li>
<li><a href="#">デザイン</a></li>
</ul>
</section>
<section id="related-articles">
<h2>関連記事</h2>
<ul>
<li><a href="#">CSSでWebサイトを装飾しよう</a></li>
<li><a href="#">JavaScriptでWebサイトをインタラクティブにしよう</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2024 TechAcademy</p>
</footer>
</body>
</html>
解説
このコード例では、以下の点に注目して「section」と「article」要素を使い分けています。
- article要素:
- ブログ記事全体をarticle要素で囲み、独立したコンテンツであることを示しています。
- 記事のタイトル（h2）と本文、著者情報、投稿日時のメタデータをarticle要素内に含めています。
- section要素:
- カテゴリや関連記事などの、記事全体に関わるコンテンツをsection要素で囲んでいます。
- カテゴリや関連記事は、ブログ記事単体で完結する内容ではなく、記事全体と関連する情報であるため、section要素を使用しています。
上記のように、「section」と「article」要素を適切に使い分けることで、Webページの構造を明確にし、ユーザーや検索エンジンにとって理解しやすいコンテンツを作ることができます。
このサンプルコードを参考に、ぜひ「section」と「article」要素を使い分けて、情報伝達の効果的なWebページを作成してみてください。
Sure, here are some additional ways to explain the difference between the section and article elements in HTML:
Using metaphors:
-
Imagine a book:
sectionelements are like chapters in a book, each with a specific topic or theme.articleelements are like individual articles or essays within a book, each providing a complete piece of writing on a particular subject.
-
Think of a website:
sectionelements can be used to define different sections of a website, such as the header, navigation, main content area, and footer.articleelements can be used to contain individual pieces of content within a website, such as blog posts, news articles, or product descriptions.
Highlighting the benefits of using each element:
- section elements:
- Improve website organization: By dividing a page into logical sections, you make it easier for both users and search engines to understand the content.
- Enhance accessibility: Screen readers can use
sectionelements to navigate a page and identify different content areas.
- article elements:
- Promote content syndication:
articleelements are designed for syndicating content across different platforms, making it easier to share your articles on social media or other websites. - Encourage content reuse: Since
articleelements represent self-contained pieces of content, they can be easily reused in other parts of your website or even on other websites.
- Promote content syndication:
Emphasizing the key differences:
- Focus:
sectionelements: Structure and organization of a page's content.articleelements: Individual pieces of content with a clear beginning and end.
- Semantics:
sectionelements: Conveys the logical grouping of content.articleelements: Indicates independent, reusable content.
- Common examples:
sectionelements: Header, navigation, sidebar, footer.articleelements: Blog posts, news articles, product descriptions, forum posts.
Providing real-world examples:
-
News website:
- Use
sectionelements to define the main sections of the website, such as "World," "Sports," and "Business." - Use
articleelements to contain individual news articles within each section.
- Use
-
E-commerce website:
- Use
sectionelements to define different product categories, such as "Clothing," "Electronics," and "Home Goods." - Use
articleelements to display individual product pages, including product descriptions, images, and prices.
- Use
-
Blog:
- Use
sectionelements to categorize blog posts by topic, such as "Web Development," "Design," and "Marketing." - Use
articleelements to contain individual blog posts, including titles, content, author information, and publication dates.
- Use
By understanding the distinct purposes and benefits of section and article elements, you can make informed decisions about how to use them in your HTML markup, ensuring a well-structured, accessible, and search engine-friendly website.
html
