Learn how to use the HTML <article> element.
The HTML <article> tag is used to define article elements for self-contained content. Self-contained means that the content you put inside an article element should work independently from the rest of your website.
How to use the HTML <article> tag
Use cases for the <article> tag:
- Blogs
- Magazines
- News sites
Unlike the <main> element, which also a content container, the <article> tag can be used once or several times within the same HTML document.
For example, you can use a single <article> element as the main page container element, for articles/posts:
<article>
<h1>Title of your post</h1>
<p>Paragraph</p>
<p>Paragraph</p>
<img href="your-image.jpg" alt="description of image" />
<p>Paragraph</p>
<p>Paragraph</p>
</article>The website you’re reading on right follows a similar HTML markup structure. You can see it for yourself if you right-click on this website and click Inspect.
The <article> element can also be used to display a list of different content, each inside their own article element. For example, an article feed with links to individual posts:
<div>
<article>
<a href="/path-to-blog-post-1">
<h3>Blog post 1</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-2">
<h3>Blog post 2</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-3">
<h3>Blog post 3</h3>
</a>
</article>
</div>Each of the three articles above are read as independent, self-contained content by the web browser.
The <article> tag is one of many HTML tags used to define container elements. Some of the most commonly used HTML container elements are:
<section>, <main> , <header>, <footer>,<form>, and <div> (which is a generic tag that we use if none of the other tags apply).
