0
0
HTMLmarkup~5 mins

Section and article in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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 info@example.com</p>
  </footer>
</body>
</html>
OutputSuccess
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.