HTML article Tag

HTML <article> tag is a semantic element that provides meaning to the content on a webpage.

It usually contains information/content that is generally the main content or a snippet of the main content on a webpage.

We can always use a <div> tag to define sections/divisions on a webpage but using the <article> tag is beneficial because when a browser or a web crawler accesses a webpage and see a section of content inside the <article> tag it will immediately know that this particular section holds the main content.

Also, this is a block-level element.

This element represents an independent self-contained content in any document, webpage, application or website. The <article> tag is a very specific element more specific than <div> element. (What is <div> tag?)

HTML <article> Tag - Syntax and Usage

The <article> tag requires the start(opening) tag and end(closing) tag.

Below we have a basic syntax for the same:

<article>
    <!-- Some content -->
</article>

HTML5 <article> Tag Basic Example

Below we have a basic example for a clear understanding of <article> tag:

HTML5 <article> tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

HTML tags used with <article> tag

Inside the article tag, you can use any other HTML tag like paragraph tag, image tag, anchor tag, etc, but there are a few tags that are used as a semantic tag inside the article tag to define meaningful information inside the article tag.

1. HTML <footer> Tag

It is used to provide extra information at the bottom of the <article> element.

The given code example is to show you how to use <footer> element inside the <article> element.

<article>
    <p> Another blog post. </p>
    <footer>
        <p> Extra information is always good.</p>
    </footer>
</article>

2. HTML <time> Tag

This tag is used to hold the date and time of the publication of the content which is enclosed in the article tag.

<article>
    <p>It's our first blog post</p>
    <footer>
        <p> Posted on <time datetime="2020-02-24 18:00">Aug 31</time> by Studytonight </p>
    </footer>
</article>

Real-world Application

This <article> tag can be used in blogs, articles, comments, news stories, forum posts, etc. The <article> tag is used to represent reusable and self-dependent content. On a webpage, showing an article like this webpage, we can enclose all the main body content within the article tag. Also, on a website homepage where small snippets of article/tutorials(or any other form of content) is shown, article tag can be used, for example on Studytonight's Curious homepage.

Difference between <article> and <section> tag

Although both of these are semantics tag which means they just provide meaning to parts of a webpage, the <article> tag is only used for content representation either for an article, a blog post, etc whereas the <section> tag (What is <section> tag?) can be used to define different sections on a webpage which can be a sidebar section, header section, body section, code section, contact section, etc.

We can have an <article> tag inside a <section> tag, where the <article> tag will hold the main content of the article while other related information can be inside the same <section> tag. For example,

<section>
    <article>
        <h1>It's our first blog post</h1>
        <p> Posted on <time datetime="2020-02-24 18:00">Aug 31</time> by Studytonight </p>
        <p>Studytonight is a website which provides amazing programming tutorials and articles.</p>
    </article>
    <div>Some other related content... </div>
</section>

Browser Support for HTML5 <article> tag

Following browsers support this attribute:

• Firefox 4+

• Google Chrome 6+

• Internet Explorer 9+

• Apple Safari 5+

• Opera 11.1+