The HTML <article> tag denotes a standalone content piece, such as a blog post, news article, or user comment.
Content defined with <article> tag needs to be independent and shareable, making sense without the rest of the site.
Thus, the material between the starting <article> and ending </article> tags needs to be thematically connected.
Example of an article:
Always include a header
Although the above code structure is valid,
It is considered best practice for an article to include a header.
Having to wade through an entire article to see if it’s worth reading is too much not only for people of visual and cognitive impairments but also for the average user who wants to know what an article is all about before delving into it.
A heading can help a lot in that regard.
Semantically, the place for our main heading is a header.
A header can include info about the article, like the date of publication, the author, the category, or a subtitle that helps elaborate on the main heading.
All this information is vital for evaluating if an article is worth reading. So although not mandatory, including a header is important.
Example:
The ARTICLE tag and nested elements
The <article> tag can enclose nested sections or other articles.
This example shows a blog post with comments.
Comments can be marked up as <article> elements nested within the parent <article>.
When articles are nested, the inner articles must be topically connected to the outer one.
In the example, the nested articles represent comments made on the outer article.
Differences between the ARTICLE and SECTION elements
Both elements were designed to define a section inside a document. We call them sectioning elements.
But the article element is different from the section element in one aspect.
Let’s read the spec .
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
The key difference is that article, as a thematically connected section has been written with the intent to be reusable and/or distributable (probably via RSS feed or other similar mechanisms.)
We usually want that for our blog post, so article is the semantically proper tag to use when we write one.
Although my blog doesn’t support comments, feel free to reply via email or X.