Article element (HTML5)

HTML5 Article is a HTML5 semantic element, similar to `<section>` and `<header>`. It is most commonly used to contain information that may be distributed independently from the rest of the site or application it appears in.

## Contents

* 1 Features and usage
* 1.1 Examples
* 1.2 Attributes
* 2 Comparison with <section>
* 2.1 Nesting examples
* 3 Browser support
* 4 References
* 5 External links

## Features and usage

The HTML5 `<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.[1]

### Examples

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>

### Attributes

The `<article>` element only includes the global HTML attributes such as contenteditable, id, and title.[2] 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.[3]

## Comparison with <section>

HTML5 introduced both `<article>` and `<section>`. Both are semantic tags, defining sections in a document, such as chapters, headers, footers[4] but the `<article>` element is effectively a specialized kind of `<section>` has a more specific meaning, referring to an independent, self-contained block of related content.[3][5]

### Nesting examples

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 sometime 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>

## Browser support

The following browsers have support for this element:[6]

* Desktop
* Google Chrome 5.0 and higher
* Firefox 4.0 and higher
* Internet Explorer 9.0 and higher
* Safari 4.1 and higher
* Opera 11.1 and higher
* Mobile
* Android 2.2 and higher
* Firefox Mobile (Gecko) 4.0 and higher
* IE Mobile 9.0 and higher
* Safari Mobile 5.0 and higher
* Opera Mobile 11.0 and higher

## References

1. ↑ "HTML5 article element - W3C". W3.org. http://www.w3.org/TR/html5/sections.html#the-article-element. Retrieved 2014-05-08.
2. ↑ "The Article Contents element" (in en-US). https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article.
3. ↑ 3.0 3.1 "The article element" (in en). http://html5doctor.com/the-article-element/.
4. ↑ "The section tag". 2014-04-30. https://www.w3schools.com/tags/tag_section.asp. Retrieved 2014-05-08.
5. ↑ "HTML5: Section or Article?". 2013-08-19. http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article. Retrieved 2014-05-08.
6. ↑ "Can I use... Support tables for HTML5, CSS3, etc" (in en-US). http://caniuse.com/#search=article.

## External links

* Rich Snippet Wordpress Plugins

0.00

(0 votes)

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Article_element_(HTML5)&oldid=309710"