Linux OS
(Operating System)Linux is a free open-source Operating System, built around the Linux Kernel. Linus Torvalds is the Father of Linux.
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>
<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
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>
<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
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
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<article> |
Recommended :