HTML - <article> Tag

Quiz

The HTML <article> tag is a semantic element that is designed to represent an independent, self-contained content in an HTML document. This content could include blog posts, new articles or any other stand alone piece of content. It can also be used in conjunction with other structural tags like <section> and <aside> to create well organized and accessible web pages.

Syntax

Following is the syntax of HTML <article> tag −.

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

Attributes

HTML article tag supports Global and Event attributes of HTML.

Example : Basic Usage

In the following example, we are going to consider the basic usage of the article tag.

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

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

<body>
   <!-- Creating article Element -->
   <h2>HTML 'article' Element</h2>
   <article>
      <h2>HTML Tags</h2>
      <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>
      <h2>HTML Attributes</h2>
      <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>

Example : Appling CSS

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

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML article tag</title>
   <style>
      article {
         width: 300px;
         height: 150px;
         background-color: aquamarine;
         border-radius: 10px;
      }
      article h2,
      p {
         margin: 10px 10px;
      }
   </style>
</head>
<body>
   <!--create a article element-->
   <h2>HTML 'article' Element</h2>
   <article>
      <h2>HTML Tags</h2>
      <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>
      <h2>HTML Attributes</h2>
      <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>

Example : Creating Nested Article

Let's look at the following example, 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>
   <h2>HTML Elements</h2>
   <p>
       HTML Elements are building block of a web page.
       It is used to create component for webpages.
   </p>
   <article>
      <h2>HTML Tags</h2>
      <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>
      <h2>HTML Attributes</h2>
      <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>

Example : Appling with Image

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

Print Page