HTML <article> Tag

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;
}