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
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
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.
<article> 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>
<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.
<section> should be identified, typically by including a heading (h1-h6 element) as a child of the
<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>
<aside> tag is used outside of an
<article> tag, its content should be related to the surrounding content.
Want to learn some more about the
<aside> element? Then check out – The Aside element – HTML: HyperText Markup Language | MDN
If you liked this article, then please share. You can also find me on Twitter for more updates.