I need to know the difference between an article tag and a section tag in html5 and when to use it to make my page semantically correct.
I need to know the difference between an article tag and a section tag in html5 and when to use it to make my page semantically correct.
The <section> tag:
The section label defines the sections of a document, such as chapters, headers, footers or any other section of the document.
According to the W3C HTML5 documentation:
"A section is a thematic grouping of content, usually with a header".
Example:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
The <article> tag:
The article's label specifies independent and autonomous content.
An article must make sense by itself and should be possible Distribute it independently of the rest of the site.
Potential sources for the item item:
- Forum posts
- Blog post
- News
- Comments
Example:
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
<article> in <section> or vice versa? The <article> element specifies an independent and autonomous content.
The <section> element defines the section in a document.
Thus, on the Internet, you will find HTML pages with <section> elements that contain <article> and <article> elements that contain <section> .
You will also find pages with elements that contain <section> elements and <article> that contain <article> elements.
Example for a newspaper: Sports articles in the sports section, can have a technical section in each article.
Basically these tags are semantic elements and the only real difference between them is readability and design preference.
More information:
This is a translation .
Section: Element that represents a generic section (part or piece) of a document. Example: Chapters, Tabs, Sections and more ... Article: Element that represents a complete object in its composition and is in principle independent and re usable. Example: Blog, Post of magazines, Newspaper pages and different gadgets.
As a suggestion, a section is used to separate areas that make up a single major object or a single subject, and an article is used when the object is an independent and complete entity (or we intend to reuse it).
Functionally, both tags do the same, but semantically it is better to use the right one for SEO, Optimization, and Code Maintenance