What is the Difference Between Article, Section and Aside in HTML5?

#html #webdev #beginners

What is the Difference Between Article, Section and Aside in HTML5?

You would use <article> for the main content on your page. For example, if you were making a blog page, the actual content of the blog post would go in <article>.

You would use a <section> tag to enclose any sub-content, or a sub-section of a website. For example: A web site’s home page could be split into sections for an introduction, news items and contact information.

You would use <aside> for additional content, which may not be required to depict the meaning of the main content. So on a blog page, you would put related articles in <aside>.

The Article Element

Article is a standalone piece of content that can be used and distributed independently of the rest of the page or site. This could be a forum post, a magazine or newspaper article, a blog post, a comment, an interactive widget or gadget, or any other piece of content that stands alone.

The element, along with an id or class, replaces the <div> element that was widely used in HTML4.

<article>
  <h2>A blog post</h2>
  <a ...>Read more</a>
</article>
<article>
  <h2>Another blog post</h2>
  <a ...>Read more</a>
</article>

When an <article> element is nested, the inner element represents an article related to the outer element. For example, blog post comments can be <article> elements nested in the <article> representing the blog post.

The Section Element

Section is a page or article’s logical container. Sections are useful for breaking up content within an article.
A homepage, for example, could include sections for introducing the company, news items, and contact information.

Each <section> should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.

<article>
  <h1>Welcome</h1>
  <section>
    <h2>A section of the page</h2>
    <p>...</p>
    <img ... />
  </section>
</article>

The Aside Element

Aside refers to secondary content that is separate from but indirectly related to the main content. This type of content is frequently displayed in sidebars.
When using an <aside> tag within an <article> tag, the <aside> content should be specifically related to that article.

<article>
  <h1>Gifts for everyone</h1>
  <p>This website will be the best place for choosing gifts</p>
  <aside>
    <p>Gifts will be delivered to you within 24 hours</p>
  </aside>
</article>