HTML <article> Tag

Last Updated On
Sunday 22nd May 2022

html articles

The article element is the perfect opportunity for the developer to include a piece of content that will be separate from the rest of the content.

Definition and Usage

The <article> tag specifies independent, self-contained content.It can be a social media post, user comment , news story or even a blog post.

Three articles with independent, self-contained content.

	<article>
  <a href="/html-section-tag">
    <h2>HTML <section> Tag</h2>
    <div>
      <time> 13th May 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-lang">
    <h2>HTML lang Attribute</h2>
    <div>
      <time> 12th May 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-audio-tag">
    <h2>HTML Audio Tag</h2>
    <div>
      <time> 11th May 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>
	

article html

Note: The <article> element does not render as anything special in a browser.

It’s important to know that if we have an article with long content then we can use sections inside the article element to logically break the content.

	<!--article start-->

<article>
  <h1>Hello World</h1>
  <section>
    <h2>Hello from California</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Hello from London</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Hello from Austria</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
</article>

<!--article end-->
	

articles html

As you can see from the example above, the article element can have many section elements.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element Chrome Edge Mozilla Safari Opera
<article> 6.0 9.0 4.0 5.0 11.1

Note Keep in mind that if the content is self-contained then prefer using <article> tag. You can use CSS to style the <article> element.

Default CSS Settings

Most browsers will display the <article> element with the following default values.

	article {
  display: block;
}
	
article about html
articles on html
article in html
article on html
articles about html
article tags html
article tags
element article article element
article header
article html tag
article tag html
html article tag html tag article
article elements