When should I use <article>
and <section>
tags in HTML5?
A section is basically a wrapper for h1 (or other h tags) and the content that corresponds to this. An article is essentially a document within your document that is repeated or paginated... like each blog post on your document can be an article, or each comment on your document can be an article.
A section is the distinct and numbered subdivisions in legal codes, statutes, and textbooks. An article is a separate and distinct part of a written instrument, such as a contract, statute, or constitution, that is often divided into sections.
Both the tags (<div> and <section>) are used in the webpage, <section> tag means that the content inside relates to a single theme, and <div> tag is used as a block part of the webpage and don't convey any particular meaning. HTML <div> Tag: It is called a division tag.
Article tag is a semantic tag. Paragraph is presentational and semantic tag.
The <section>
tag:
The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
The <article>
tag:
The article tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the article element:
- Forum post
- Blog post
- News story
- Comment
Basically these tags are semantic elements and the only real difference between them are readability and design preference.
You can read more about them here if you wish:
Article tag
The article tag is used for wrapping an autonomous content on a page. A content is autonomous if it can be removed from the page and put on some another page.
Section tag
The section tag is similar to the div tag, but it is more meaningful since it wraps logical groups of related content (e.g. a chapter of an article).
More about semantic tags - https://www.pluralsight.com/guides/semantic-html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With