Article element

Features and usage

The <article> element represents a complete composition in a web page or web 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.

Examples

At its most basic, <article> can be used to encapsulate a body of text and a corresponding title like so:

<span id="mwGw"></span><span class="p" id="mwHA"><</span><span class="nt" id="mwHQ">article</span><span class="p" id="mwHg">></span> <span class="p" id="mwHw"><</span><span class="nt" id="mwIA">h2</span><span class="p" id="mwIQ">></span>Insert Title Here<span class="p" id="mwIg"></</span><span class="nt" id="mwIw">h2</span><span class="p" id="mwJA">></span> <span class="p" id="mwJQ"><</span><span class="nt" id="mwJg">p</span><span class="p" id="mwJw">></span>Insert a paragraph of text here<span class="p" id="mwKA"></</span><span class="nt" id="mwKQ">p</span><span class="p" id="mwKg">></span> <span class="p" id="mwKw"></</span><span class="nt" id="mwLA">article</span><span class="p" id="mwLQ">></span>

Forum entries and comments are typically implemented by nesting <article> tags:

<span id="mwMg"></span><span class="p" id="mwMw"><</span><span class="nt" id="mwNA">article</span><span class="p" id="mwNQ">></span> <span class="p" id="mwNg"><</span><span class="nt" id="mwNw">header</span><span class="p" id="mwOA">></span> <span class="p" id="mwOQ"><</span><span class="nt" id="mwOg">h1</span><span class="p" id="mwOw">></span>Entry Title<span class="p" id="mwPA"></</span><span class="nt" id="mwPQ">h1</span><span class="p" id="mwPg">></span> <span class="p" id="mwPw"><</span><span class="nt" id="mwQA">p</span><span class="p" id="mwQQ">></span>Header Info<span class="p" id="mwQg"></</span><span class="nt" id="mwQw">p</span><span class="p" id="mwRA">></span> <span class="p" id="mwRQ"></</span><span class="nt" id="mwRg">header</span><span class="p" id="mwRw">></span> <span class="p" id="mwSA"><</span><span class="nt" id="mwSQ">p</span><span class="p" id="mwSg">></span>Content of entry...<span class="p" id="mwSw"></</span><span class="nt" id="mwTA">p</span><span class="p" id="mwTQ">></span> <span class="p" id="mwTg"><</span><span class="nt" id="mwTw">article</span><span class="p" id="mwUA">></span> <span class="p" id="mwUQ"><</span><span class="nt" id="mwUg">header</span><span class="p" id="mwUw">></span> <span class="p" id="mwVA"><</span><span class="nt" id="mwVQ">h2</span><span class="p" id="mwVg">></span>Author: John Smith<span class="p" id="mwVw"></</span><span class="nt" id="mwWA">h2</span><span class="p" id="mwWQ">></span> <span class="p" id="mwWg"><</span><span class="nt" id="mwWw">p</span><span class="p" id="mwXA">></span>Comment Info<span class="p" id="mwXQ"></</span><span class="nt" id="mwXg">p</span><span class="p" id="mwXw">></span> <span class="p" id="mwYA"></</span><span class="nt" id="mwYQ">header</span><span class="p" id="mwYg">></span> <span class="p" id="mwYw"><</span><span class="nt" id="mwZA">p</span><span class="p" id="mwZQ">></span>Comment text...<span class="p" id="mwZg"></</span><span class="nt" id="mwZw">p</span><span class="p" id="mwaA">></span> <span class="p" id="mwaQ"></</span><span class="nt" id="mwag">article</span><span class="p" id="mwaw">></span> <span class="p" id="mwbA"><</span><span class="nt" id="mwbQ">article</span><span class="p" id="mwbg">></span> <span class="p" id="mwbw"><</span><span class="nt" id="mwcA">header</span><span class="p" id="mwcQ">></span> <span class="p" id="mwcg"><</span><span class="nt" id="mwcw">h2</span><span class="p" id="mwdA">></span>Author: Jane Johnson<span class="p" id="mwdQ"></</span><span class="nt" id="mwdg">h2</span><span class="p" id="mwdw">></span> <span class="p" id="mweA"><</span><span class="nt" id="mweQ">p</span><span class="p" id="mweg">></span>2nd Comment's Info<span class="p" id="mwew"></</span><span class="nt" id="mwfA">p</span><span class="p" id="mwfQ">></span> <span class="p" id="mwfg"></</span><span class="nt" id="mwfw">header</span><span class="p" id="mwgA">></span> <span class="p" id="mwgQ"><</span><span class="nt" id="mwgg">p</span><span class="p" id="mwgw">></span>Comment text...<span class="p" id="mwhA"></</span><span class="nt" id="mwhQ">p</span><span class="p" id="mwhg">></span> <span class="p" id="mwhw"></</span><span class="nt" id="mwiA">article</span><span class="p" id="mwiQ">></span> <span class="p" id="mwig"></</span><span class="nt" id="mwiw">article</span><span class="p" id="mwjA">></span>

Attributes

The <article> element only includes the global HTML attributes such as contenteditable, id, and title. However, pubdate, an optional boolean 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 that pubdate applies only to the parent <article> element, or to the document as a whole.