Home » HTML » HTML Article Tag

HTML Article Tag - When to use?

HTML article tag is a semantic tag that helps in creating well-structured content. Well structured content means, content that is search engine and screen reader friendly. It is a paired tag

The semantic tags are all about specificity of the content. HTML article tag specifically tells the search engine and screen readers that its content is part of an article.

Yes, you can use a simple div tag also for writing an article. However, the article tag is the dedicated tag for writing articles. It is same like, you can also write headings by using paragraph tags but the heading tags(h1-h6) are more specific and SEO optimised.

Syntax of Article tag

Example:

<article> <h1></h1> <p></p> </article>

Example of article tag Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Article Tag </title>
</head>
<body>
<article>
<h2>Linux OS</h2>
<i>(Operating System) </i>
<p>Linux is a free open-source Operating System, built around the Linux Kernel. Linus Torvalds is the Father of Linux.</p>
</article>
</body>
</html>

Output

HTML Article Tag Examples

Linux OS

(Operating System)

Linux is a free open-source Operating System, built around the Linux Kernel. Linus Torvalds is the Father of Linux.


When and how to use HTML article tag

HTML article tag can be used to write blog posts, forum posts, comments, etc. You can even use nested article tags, one inside another.

In a single content page, one article tag can contain the whole article body. But, in multiple content page like search results, news feeds, etc. each individual element can have separate article tag.

Every article tag should have a heading followed by paragraph of information. You can also use <footer> and <address> tags inside the <article> to give extra information.

Example of nested article tags Try this code »

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> HTML Article Tag </title>
</head>
<body>
<article>
<header>
<h1>Apple</h1>
<p>Published: <time pubdate datetime="2019-3-31">9th October, 2009</time></p>
</header>
<p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
...
<section>
<h2>Comments</h2>
<article>
<header>
<h3>Posted by: Apple Lover</h3>
<p><time pubdate datetime="2019-3-31:10-08:00">~1 hour ago</time></p>
</header>
<p>I love apples, my favourite kind are Granny Smiths</p>
</article>
<article>
<header>
<h3>Posted by: Oranges are king</h3>
<p><time pubdate datetime="2019-2-25:15-08:00">~1 hour ago</time></p>
</header>
<p>Urgh, apples!? you should write about ORANGES instead!!1!</p>
</article>
</section>
</article>
</body>
</html>

Output

HTML Article Tag

Apple

Published:

The apple is the pomaceous fruit of the apple tree...

...

Comments

Posted by: Apple Lover

I love apples, my favourite kind are Granny Smiths

Posted by: Oranges are king

Urgh, apples!? you should write about ORANGES instead!!1!


Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<article>
Yes
Yes
Yes
Yes
Yes