What is the Difference Between Article, Section and Aside in HTML5?
Tags: html, webdev, beginners
Published: 2023-02-21 13:07:00

**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 <article> element, along with an id or class, replaces the `<div>` element that was widely used in HTML4.

```html
<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.

```html
<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.

```html
<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>
```

When an `<aside>` tag is used outside of an `<article>` tag, its content should be related to the surrounding content.

### Further reading

Want to learn some more about the <aside> element? Then check out – [The Aside element – HTML: HyperText Markup Language | MDN
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)

### See also

[Introduction to HTML5 – for Beginners](https://maxlockwood.dev/introduction-to-html5/)
[How to Begin with Semantic HTML](https://maxlockwood.dev/how-to-begin-with-semantic-html/)
[What is an HTML Element? How do you create one?](https://maxlockwood.dev/what-are-html-elements/)

If you liked this article, then please share. You can also find me on [Twitter](https://twitter.com/maxlockwood88) for more updates.