Section and article in HTML

Introduction

Sections and articles help organize web pages into meaningful parts. They make content easier to read and understand.

When you want to divide a page into different topics or themes.

When you have a blog post or news story that stands alone.

When you want to group related content together with a heading.

When you want to improve accessibility and help screen readers navigate.

When you want to create a clear structure for your page for SEO.

Syntax

HTML

<section>
  <!-- content here -->
</section>

<article>
  <!-- content here -->
</article>

<section> is for grouping related content with a heading.

<article> is for self-contained content that can stand alone.

Examples

This groups content about the company under a heading.

HTML

<section>
  <h2>About Us</h2>
  <p>We make great websites.</p>
</section>

This is a complete blog post that can be shared or read alone.

HTML

<article>
  <h1>My Blog Post</h1>
  <p>This is the content of the blog post.</p>
</article>

A section groups news articles together under one heading.

HTML

<section>
  <h2>News</h2>
  <article>
    <h3>News Item 1</h3>
    <p>Details about news item 1.</p>
  </article>
  <article>
    <h3>News Item 2</h3>
    <p>Details about news item 2.</p>
  </article>
</section>

Sample Program

This page uses <section> to group content about 'About Us' and 'Latest News'. Inside 'Latest News', each news item is an <article> because they are separate stories.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Section and Article Example</title>
</head>
<body>
  <header>
    <h1>Welcome to Our Website</h1>
  </header>
  <main>
    <section>
      <h2>About Us</h2>
      <p>We create simple and clear websites for everyone.</p>
    </section>
    <section>
      <h2>Latest News</h2>
      <article>
        <h3>New Website Launched</h3>
        <p>Our new website design is live now!</p>
      </article>
      <article>
        <h3>Upcoming Workshop</h3>
        <p>Join our free workshop next week.</p>
      </article>
    </section>
  </main>
  <footer>
    <p>Contact us at [e-mail]</p>
  </footer>
</body>
</html>

Important Notes

Use headings inside <section> and <article> to describe the content.

Screen readers use these tags to help users navigate the page.

Don't use <section> or <article> just to style content; they should have meaning.

Summary

<section> groups related content with a heading.

<article> is for independent, self-contained content.

Using these tags improves page structure and accessibility.

Practice

1. Which HTML tag is best used to group related content with a heading on a webpage?

easy

A. <article>

B. <section>

C. <div>

D. <span>

Solution

1. Step 1: Understand the purpose of <section>

   The <section> tag is designed to group related content, often with a heading, to organize the page logically.

2. Step 2: Compare with other tags

   <article> is for independent content, <div> and <span> are generic containers without semantic meaning.

3. Final Answer:

   <section> -> Option B

4. Quick Check:

   Grouping related content = <section> [OK]

Hint: Use <section> for grouped content with headings [OK]

Common Mistakes:

• Confusing <article> with <section>
• Using <div> instead of semantic tags
• Thinking <span> can group block content

2. Which of the following is the correct syntax to start an article section in HTML?

easy

A. <article>

B.

C.

D. <article>

Solution

1. Step 1: Identify correct opening tag syntax

   The correct way to start an article is with an opening tag <article> without a slash.

2. Step 2: Check other options for correctness

   <article/> is self-closing and invalid for this tag; <article></article> is a full element, not just start; <article></section> mismatches tags.

3. Final Answer:

   <article> -> Option D

4. Quick Check:

   Opening tag syntax = <article> [OK]

Hint: Opening tag never has a slash inside brackets [OK]

Common Mistakes:

• Using self-closing syntax for non-void tags
• Mismatching start and end tags
• Confusing full element with just opening tag

3. What will the browser display when this HTML code is rendered?

<section>
  <h2>News</h2>
  <article>
    <h3>Article 1</h3>
    <p>Content of article 1.</p>
  </article>
  <article>
    <h3>Article 2</h3>
    <p>Content of article 2.</p>
  </article>
</section>

medium

A. A heading 'News' with two separate articles each having their own heading and paragraph

B. Only the heading 'News' is shown, articles are hidden

C. Two articles shown without the 'News' heading

D. Syntax error, nothing is displayed

Solution

1. Step 1: Understand the structure of the code

   The <section> contains a heading <h2> 'News' and two <article> elements each with their own <h3> and paragraph.

2. Step 2: Predict browser rendering

   The browser will display the 'News' heading, then each article's heading and paragraph as separate blocks.

3. Final Answer:

   A heading 'News' with two separate articles each having their own heading and paragraph -> Option A

4. Quick Check:

   Section with heading + articles = full content shown [OK]

Hint: Section heading shows above articles content [OK]

Common Mistakes:

• Thinking articles are hidden by default
• Ignoring the section heading
• Assuming syntax error from nested tags

4. Identify the error in this HTML snippet:

<section>
  <article>
    <h2>Title</h3>
    <p>Paragraph content.</p>
  </article>
</section>

medium

A. Paragraph tag is not allowed inside article

B. Missing closing tag for <article>

C. Mismatched heading tags: <h2> opened but </h3> closed

D. Section tag cannot contain article tag

Solution

1. Step 1: Check tag pairs for correctness

   The heading starts with <h2> but incorrectly closes with </h3>, which is a mismatch.

2. Step 2: Verify other tags

   The <article> and <section> tags are properly opened and closed; paragraph tag is valid inside article.

3. Final Answer:

   Mismatched heading tags: <h2> opened but </h3> closed -> Option C

4. Quick Check:

   Matching tags must open and close the same [OK]

Hint: Match opening and closing tags exactly [OK]

Common Mistakes:

• Ignoring tag mismatch errors
• Assuming section cannot contain article
• Thinking paragraph is invalid inside article

5. You want to create a blog page with multiple posts. Each post has a title, author, and content. Which is the best HTML structure to organize this content semantically?

hard

A. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

B. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

C. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

D. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

Solution

1. Step 1: Understand semantic roles of <section> and <article>

   <section> groups related content; <article> is for independent, self-contained content like blog posts.

2. Step 2: Analyze each option's structure

   <section>\n <article>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </article>\n <article>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </article>\n</section> uses one <section> to group all posts, each post is an <article> with title, author, and content. This is semantically correct. <article>\n <section>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </section>\n <section>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </section>\n</article> wrongly nests <section> inside <article>. <div>\n <div>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </div>\n <div>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </div>\n</div> uses generic <div> without semantic meaning. <section>\n <section>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </section>\n <section>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </section>\n</section> nests <section> inside <section> for posts, which is less clear than using <article> for posts.

3. Final Answer:

   Option A: section grouping articles for posts -> Option A

4. Quick Check:

   Posts = articles inside a section [OK]

Hint: Use <article> for posts inside a <section> container [OK]

Common Mistakes:

• Using <section> instead of <article> for posts
• Nesting <section> inside <article> incorrectly
• Using only <div> without semantic tags