html
/

HTML Section & Article: Structuring Content Properly

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Section & Article: Structuring Content Properly

What are Section and Article?

The <section> and <article> elements are semantic HTML tags used to organize content into meaningful blocks.

Section Element

The <section> tag is used to group related content together, typically with a heading.

HTMLRead-only
1
<section>
  <h2>Services</h2>
  <p>We offer web development services.</p>
</section>

Article Element

The <article> tag represents independent, self-contained content such as blog posts, news articles, or comments.

HTMLRead-only
1
<article>
  <h2>Blog Post</h2>
  <p>This is an article content.</p>
</article>

Key Differences

FeatureSectionArticle
PurposeGroups related contentIndependent content
UsagePart of a pageStandalone content
ExampleChapters, sectionsBlog posts, news
ReusabilityNot reusable aloneCan be reused independently

Combined Usage Example

HTMLRead-only
1
<section>
  <h1>Blog</h1>

  <article>
    <h2>Post 1</h2>
    <p>Content of post 1</p>
  </article>

  <article>
    <h2>Post 2</h2>
    <p>Content of post 2</p>
  </article>
</section>

When to Use Section

  • Grouping related content
  • Dividing page into logical parts
  • When content needs a heading

When to Use Article

  • Blog posts or news articles
  • User comments or posts
  • Reusable content blocks

Best Practices

  • Always include headings inside section
  • Use article for independent content
  • Avoid unnecessary nesting
  • Use semantic tags instead of div
  • Keep structure meaningful and clear

Common Mistakes

  • Using section without a heading
  • Using article for grouped content
  • Overusing semantic tags unnecessarily
  • Confusing section with div

Conclusion

Understanding the difference between section and article helps create well-structured, semantic, and SEO-friendly web pages.

Try it yourself

<section>
  <h1>Blog</h1>
  <article>
    <h2>Post</h2>
    <p>Hello World</p>
  </article>
</section>

Test Your Knowledge

Q1
of 3

Which tag is used for independent content?

A
<section>
B
<article>
C
<div>
D
<main>
Q2
of 3

Which tag groups related content?

A
<article>
B
<section>
C
<nav>
D
<aside>
Q3
of 3

Should section have a heading?

A
No
B
Optional
C
Yes
D
Never

Frequently Asked Questions

What is the difference between section and article?

Section groups related content, while article is independent and reusable content.

Can article be inside section?

Yes, articles are often placed inside sections.

Should section always have a heading?

Yes, it is recommended for better structure and accessibility.

Previous

html header footer

Next

html meta tags

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.