Skip to main content

Article and Section

HTML Semantic Elements are a great way to make your code more understandable and accessible. Within these semantic elements, two of the most commonly used are article and section elements. These elements provide a way to structure your HTML documents more semantically and meaningfully.

Understanding the article Element​

The article HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. This could be in the form of a forum post, a magazine or newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other independent piece of content.

Here is an example of how to use the article element:

<article>
  <h2>My First Blog Post</h2>
  <p>This is the content of my first blog post. It's a self-contained piece of content that I could potentially distribute separately from my website.</p>
</article>

Understanding the section Element​

The section HTML element represents a standalone section of a document, which typically contains a grouping of content with a similar theme. This could be chapters, tabs, numbered sections of a manual, or even just thematic groupings of content.

Here is an example of how to use the section element:

<section>
  <h2>About Me</h2>
  <p>This section contains information about me, including my interests, hobbies, and history.</p>
</section>

Differences Between article and section​

While both article and section elements are used to group related content, they have some differences. The article element should be used when the content within it makes sense on its own and could be viewed independently of the rest of the website. On the other hand, a section is simply used to group related content, even if the content within the section doesn't make sense by itself.

Best Practices​

  • Use article for blog posts, news stories, comments, or other items that can stand alone.
  • Use section to group related content.
  • Always include a heading (h1-h6) within your article or section elements. This helps assistive technology users to navigate the page.
  • Don't use article or section just for styling purposes. These elements are designed to structure content in a meaningful way, not just for controlling layout or look of content.

Through the proper use of the article and section semantic elements, you can make your HTML documents more accessible and easier to navigate, both for human readers and for automated tools like search engines and screen readers.