<article>
Self-contained content that makes sense read or shared on its own.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content
Example
#<article>
<header>
<h2>My first week learning HTML</h2>
<p>Published <time datetime="2026-09-14">September 14, 2026</time></p>
</header>
<p>I started with document structure and headings. Three days in, I already had my own personal landing page.</p>
<footer>Tags: HTML, getting started</footer>
</article>Definition and usage
#The <article> element marks a piece of a page that makes sense even pulled out of context: a blog post, a news article, a comment, a product card, or a forum post. A good test is this: could this piece show up in an RSS reader or get pasted onto another page and still make sense? If so, it’s an article.
An article usually has its own heading (<h1>-<h6>), and often also a <header> with the date and author, plus a <footer> with tags or licensing information. Articles can be nested: comments under a post are separate <article> elements inside the main article.
Screen readers and search engines treat <article> as a landmark, which makes it easier to jump straight to the right content. The element itself doesn’t change how the page looks; by default it’s simply a block.
Syntax
#<article>
…
</article>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<article>
<h2>How to choose your first programming language</h2>
<p>What matters most is what you want to build.</p>
<section>
<h3>Comments</h3>
<article>
<p><strong>Ola:</strong> I started with Python and don't regret it.</p>
</article>
<article>
<p><strong>Kuba:</strong> For me it was HTML and CSS, because you see results fast.</p>
</article>
</section>
</article>Default CSS
#Most browsers display this element with these default styles:
article {
display: block;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- If a piece only makes sense as part of a larger whole, use
<section>, not<article>. - Write the publish date in
<time datetime="…">, so it’s also readable by machines. - Don’t turn every
<div>into an<article>. Semantics should help, not describe everything at once.
Related entries
#- <section> vs <article> vs <div><article> is self-contained content, <section> is a thematic part of something larger, and <div> is a neutral container with no meaning at all.
- <section>A thematic part of a document, usually with its own heading.
- <aside>Tangential content loosely related to its surroundings: a callout box, a sidebar, a note.
- <header>An introduction to a page or section: logo, title, navigation, author info.
- <footer>A page or section’s footer: author, copyright, links, contact info.
- <main>The page’s main, unique content. Only one should be visible per page.
Spotted a mistake or missing an example? Write to us.