HTML <article> Tag

Definition and Usage

<article> The tag defines independent, self-contained content.

An article should be able to be understood independently and can be distributed independently of the entire site.

<articel> The potential sources of the element include:

  • Forum Posts
  • Blog Articles
  • News Reports
  • User Comments

Note:In the browser,<article> The element itself does not present any special style. However, you can use CSS to style <article> Element (see the following examples).

See also:

HTML DOM Reference Manual:Article Object

Instance

Example 1

Three independent, self-contained articles:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google and was released in 2008. Chrome is the most popular web browser in the world today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Since January 2018, Firefox has been the second most popular web browser.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

Try It Yourself

Example 2

Use CSS to set the style of the <article> element:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google and was released in 2008. Chrome is the most popular web browser in the world today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Since January 2018, Firefox has been the second most popular web browser.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>
</body>
</html>

Try It Yourself

Global Attributes

<article> The tag also supports Global Attributes in HTML.

Event Attributes

<article> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <article> Element:

article {
  display: block;
}

Browser Support

The numbers in the table indicate the first browser version to fully support the element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1