The article element is one of the content sectioning components introduced in HTML5. It is used to denote a complete or self-contained composition in a document, page, application, or site, independently distributable or reusable.
Characteristics of the article element
- Self-Contained: The content within an <article> should make sense on its own if removed from its surrounding context and placed elsewhere. If the content is taken as a whole and pasted onto a different site, it will still make complete sense.
- Independent Distributable/Reusable: The content is suited for syndication, such as through an RSS feed. If the content establishes a separate article in an RSS feed, it’s good for the <article> element.
- Semantic Meaning: The <article> element provides semantic meaning to the content it encloses, indicating its worth as an independent piece of information. This helps assistive technologies, search engines, and developers understand the structure of the document.
- Can Contain Headers and Footers: Each <article> can have its own <header> and <footer> elements. The <header> contain the title of the article, and the <footer> could include information about the author or publication date.
- Nesting: <article> elements can be nested within each other, suggesting the inner articles are related to the outer one. For example, a blog post could be one <article>, and the comments on that post could be nested <article> elements.
- Relation to <section>: While both <article> and <section> are sectioning elements, an <article> is considered a more specialized form of <section>. A <section> is a thematic grouping of content, while an <article> is a self-contained composition. You can have multiple <article> elements within a <section> if they share a common theme. Equally, a long <article> can be divided into <section> elements. A general rule is that a <section> is suitable only if its contents would be listed clearly in the document’s outline, typically having a heading.
Article element Examples in HTML5
A simple blog post
In below example, the entire blog post, including its title, publication information, content, categories, and links to comments, is enclosed within the <article> element, indicating that it’s a self-contained piece of content.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<article>
<header>
<h2>My First Blog Post</h2>
<p>Published on <time datetime="2023-10-27">October 27, 2023</time> by John Doe</p>
</header>
<p>This is the main content of my blog post. I'm excited to share my thoughts and experiences with you all.</p>
<p>Here's another paragraph with more details...</p>
<footer>
<p>Categories: <a href="/blog/categories/technology">Technology</a>, <a href="/blog/categories/personal">Personal</a></p>
<p><a href="/blog/posts/first-post/comments">View Comments (3)</a></p>
</footer>
</article>
</body>
</html>My First Blog Post
Published on by John Doe
This is the main content of my blog post. I’m excited to share my thoughts and experiences with you all.
Here’s another paragraph with more details…
Multiple blog posts within a <section>
The <section> element thematically groups the recent blog posts, and each individual blog post is marked up as a separate <article> because each one is a self-contained piece of content.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<section>
<h1>Recent Blog Posts</h1>
<article>
<header>
<h2>Another Day, Another Adventure</h2>
<p>Published on <time datetime="2023-10-26">October 26, 2023</time></p>
</header>
<p>Today's adventure was quite thrilling...</p>
<footer>
<p><a href="/blog/posts/second-post">Read more</a></p>
</footer>
</article>
<article>
<header>
<h2>The Joys of Coding</h2>
<p>Published on <time datetime="2023-10-25">October 25, 2023</time></p>
</header>
<p>Exploring the world of programming brings endless possibilities...</p>
<footer>
<p><a href="/blog/posts/third-post">Read more</a></p>
</footer>
</article>
</section>
</body>
</html>Recent Blog Posts
Another Day, Another Adventure
Published on
Today’s adventure was quite thrilling…
The Joys of Coding
Published on
Exploring the world of programming brings endless possibilities…
Nested articles for blog post and comments
The main blog post is an <article>, and each individual comment is also marked up as an <article> nested within a <section> that groups the comments together.
<article>
<header>
<h2>Discussion on Semantic HTML</h2>
<p>Posted on <time datetime="2023-10-20">October 20, 2023</time></p>
</header>
<p>Let's talk about the importance of semantic HTML5 elements...</p>
<section>
<h3>Comments</h3>
<article>
<header>
<h4>User 1</h4>
<p>Posted on <time datetime="2023-10-21">October 21, 2023</time></p>
</header>
<p>I completely agree! Semantic HTML makes websites more accessible.</p>
</article>
<article>
<header>
<h4>User 2</h4>
<p>Posted on <time datetime="2023-10-22">October 22, 2023</time></p>
</header>
<p>It also helps with SEO. Great post!</p>
</article>
</section>
<footer>
<p><a href="#comments">View all comments</a></p>
</footer>
</article>Discussion on Semantic HTML
Posted on
Let’s talk about the importance of semantic HTML5 elements…
Comments
User 1
Posted on
I completely agree! Semantic HTML makes websites more accessible.
User 2
Posted on
It also helps with SEO. Great post!
By using the <article> element properly, you can create more meaningful and well-structured HTML documents. Remember to choose the specific element to denote your content and use elements consistently. Avoid using <article> when another more specific semantic element like <section>, <aside>, <nav>, <header>, or <footer> is more suitable.
HTML5 Topics