HTML - <article> Tag

HTML <article> tag is used to represent an indepenedent, self-contained composition content in an HTML document. This tag is included in HTML5

A single HTML document can have multiple article elements. When an HTML <article> element is nested, the inner element represents the article related to the outer element. For example, comments on social media posts can be an article element nested in the article representing the social media post. It is mostly used for forum posts, magazine or newspaper articles, blog entries, product cards, etc.

Syntax

<article>
   .....
</article>

Attribute

HTML article tag supports Global and Event attributes of HTML.

Examples of HTML article Tag

Bellow examples will illustrate the usage of article tag. Where, when and how to use article tag to create article elements.

Creating self-contained Content usin article Tag

In the following example we have created 2 self-contained content using <article> tag, both of them are indepenedent from each other as well as from parrent.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML article tag</title>
</head>

<body>
   <!-- Creating article Element -->
   <h2>HTML 'article' Element</h2>
   <article>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </article>
   <article>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </article>
</body>

</html>

Styling article Element

Consider the following example, where we are going to use the <article> tag and applying the CSS properties.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML article tag</title>
   <style>
      article {
         width: 300px;
         height: 150px;
         background-color: aquamarine;
         border-radius: 10px;
      }
      article h3,
      p {
         margin: 10px 10px;
      }
   </style>
</head>
<body>
   <!--create a article element-->
   <h2>HTML 'article' Element</h2>
   <article>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </article>
   <article>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </article>
</body>
</html>

Nested Article Elements

Let's look into the another scenario, where we are going to create a nested article element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML article Tag</title>
   <style>
      article {
         margin: 5px;
         border-radius: 10px;
         padding: 10px;
         border: 2px solid black;
      }
      p {
         margin: 10px;
      }
   </style>
</head>
<body>
   <!--create a article element-->
   <h2>HTML 'article' Element</h2>
   <article>
   <h3>HTML Elements</h3>
   <p>
       HTML Elements are building block of a web page.
       It is used to create component for webpages.
   </p>
   <article>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </article>
   <article>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </article>
   </article>
</body>
</html>

Image implementing on Article Element

In the following example, we are creating nested ‘article’ elements to represent the self-contained content of the blog post and its comments using <article> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML article tag</title>
   <style>
      article img {
         width: 200px;
      }
   </style>
</head>
<body>
   <!--create a article element-->
   <article>
      <h2>Blog post</h2>
      <img src="/images/logo.png?v3" alt="Tutorialspoint logo">
      <article>
      <h2>Comments</h2>
      <p>Dman good...</p>
      <p>fabulous...!</p>
      </article>
   </article>
</body>
</html>

Supported Browsers

Tag
aside	Yes 6.0	Yes 9.0	Yes 4.0	Yes 5.0	Yes 11.1

html_tags_reference.htm