| HTML |
|---|
 |
| HTML and variants |
| HTML elements and attributes |
| Editing |
| Character encodings and language |
| Document and browser models |
| Client-side scripting and APIs |
| Graphics and Web3D technology |
| Comparisons |
TheHTMLarticle element issemantic element, similar to<section> and<header>. Introduced inHTML5, it is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.
The<article> element represents a complete composition in aweb page orweb application that is independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.[1]
At its most basic,<article> can be used to encapsulate a body of text and a corresponding title like so:
<article><h2>Insert Title Here</h2><p>Insert a paragraph of text here</p></article>
Forum entries and comments are typically implemented by nesting<article> tags:
<article><header><h1>Entry Title</h1><p>Header Info</p></header><p>Content of entry...</p><article><header><h2>Author: John Smith</h2><p>Comment Info</p></header><p>Comment text...</p></article><article><header><h2>Author: Jane Johnson</h2><p>2nd Comment's Info</p></header><p>Comment text...</p></article></article>
The<article> element only includes the globalHTML attributes such ascontenteditable,id, andtitle.[2] However,pubdate, an optionalboolean attribute of the<time> element, is often used in conjunction with<article>. If present, it indicates that the<time> element is the date the<article> was published. Note thatpubdate applies only to the parent<article> element, or to the document as a whole.[3]
HTML5 introduced both<article> and<section>; both are semantic tags, defining sections in a document, such as chapters, headers, footers.[4][unreliable source?] The<article> element is effectively a specialized kind of<section> and it has a more specific meaning, referring to an independent, self-contained block of related content.[3][5]
To better organize independent content<section> tags can be nested inside<article> tags:
<article><h2>Names of Shapes</h2><p>There are several different types of shapes...</p><section><h4>Triangles</h4><p>Here is some info about triangles</p></section><section><h4>Circles</h4><p>These Pi-shaped wonders are mesmerizing and...</p></section></article>
Conversely, it may sometimes be appropriate to nest an<article> element inside a<section> element. For example, in a web page containing several articles on varying subjects:
<section><h1>Articles about Paris Tourism</h1><article><h3>The Eiffel Tower</h3><p>Standing at over 12 inches high...</p></article><article><h3>The Louvre</h3><p>A must-see in Paris tourism...</p></article></section>
The following browsers have support for this element:[6]