The <article> element is a new element in HTML5. It is one of the new HTML5 elements including the header, footer, section, nav etc.

As the name suggests, the <article> element is used to to represent an article. It is similar to the <div> element except that the <article> element adds semantics. That is, it adds meaning to the content it marks. The <article> element is used to wrap a content in a document if the content will be outlined in the document.

Besides, content in the <article> element makes sense on their own. Examples of content wrapped by the <article> element include: a forum post, article in a magazine or newspaper, a blog entry, etc

Syntax of <article> element

In a document, typically there are multiple articles. For instance, a blog that shows the text of each article one after another will have each post contained in an <article> element.

When <article> elements are nested, the inner <article> elements represent articles that are in principle related to the contents of the outer <article>.

 For example, a blog post on a site that accepts user-submitted comments could represent the comments as <article> elements nested within the <article> element for the blog post.

Recommended

Example of <article> in code

Output

When not to use the <article> element

Do not use the <article> element to mark up paragraphs or content that does not make sense on its own. The <article> element is preferred when the content it marks makes a complete sense as an article will be. 

Program shows the <article> element wrongly used to mark content.

Output

Global Attributes

The <article> element supports the global attributes in HTML

Event Attributes

The <article> element supports the event attributes in HTML

Default CSS Settings

The default CSS setting in most browsers is as below:

Share this article

You May Also Like…