Article element explained

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

Features and usage

The HTML5 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, can be used to encapsulate a body of text and a corresponding title like so:

Insert Title Here

Insert a paragraph of text here

Forum entries and comments are typically implemented by nesting tags:

Entry Title

Header Info

Content of entry...

Author: John Smith

Comment Info

Comment text...

Author: Jane Johnson

2nd Comment's Info

Comment text...

Attributes

The element only includes the global HTML attributes such as contenteditable, id, and title.[2] However, pubdate, an optional boolean attribute of the element, is often used in conjunction with . If present, it indicates that the element is the date the was published. Note that pubdate applies only to the parent element, or to the document as a whole.[3]

Comparison with <section>

HTML5 introduced both and ; both are semantic tags, defining sections in a document, such as chapters, headers, footers.[4] The element is effectively a specialized kind of and it has a more specific meaning, referring to an independent, self-contained block of related content.[5]

Nesting examples

To better organize independent content tags can be nested inside tags:

Names of Shapes

There are several different types of shapes...

Triangles

Here is some info about triangles

Circles

These Pi-shaped wonders are mesmerizing and...

Conversely, it may sometime be appropriate to nest an element inside a element. For example, in a web page containing several articles on varying subjects:

Articles about Paris Tourism

The Eiffel Tower

Standing at over 12 inches high...

The Louvre

A must-see in Paris tourism...

Browser support

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

External links

Notes and References

  1. Web site: HTML5 article element - W3C . W3.org . 2014-05-08.
  2. Web site: The Article Contents element. MDN Web Docs. en-US. 2018-07-09.
  3. Web site: The article element. html5doctor.com. en. 2018-07-09.
  4. Web site: The section tag . W3Schools . 2014-04-30 . 2014-05-08.
  5. Web site: HTML5: Section or Article? . Iandevlin.com . 2013-08-19 . 2014-05-08.
  6. Web site: Can I use... Support tables for HTML5, CSS3, etc. caniuse.com. en-US. 2018-07-09.