Learn how to use 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.
Use cases for the
- News sites
<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.
<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.
<article> tag is one of many HTML tags used to define container elements. Some of the most commonly used HTML container elements are: