Page 2: Core Content <main>, <article>, <section>

2. Content Type Differentiation: <main>, <article>, <section>

These three tags constitute the core content of the document and must be clearly distinguished based on the nature of the content they contain.

2.1. <main> Tag

The <main> tag is used to wrap the primary content of the document. It signals to screen readers and search engines that this area contains the essential information of the page.

• It can be used only once per document.
• It should not contain supplementary content like headers, navigation, or footers.

<main>
    <article>...</article> <!-- Primary article -->
    <section>...</section> <!-- Related section -->
</main>

2.2. <article> vs. <section>

<article> is used for complete, self-contained content that could be independently distributed or reused (e.g., news articles, blog posts, comments). <section> is used to group related content by theme.

<main>
    <!-- A blog post that can be read independently -->
    <article>
        <h2>Benefits of Semantic Markup</h2>
        <p>...Body content...</p>
    </article>

    <!-- Content grouped by a related theme -->
    <section>
        <h2>Related Resources</h2>
        <ul>...</ul>
    </section>
</main>