HTML article Tag
<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?)
<article> Tag - Syntax and Usage
<article> tag requires the start(opening) tag and end(closing) tag.
Below we have a basic syntax for the same:
<article> <!-- Some content --> </article>
<article> Tag Basic Example
Below we have a basic example for a clear understanding of
<article> tag Attributes
HTML tags used with
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.
It is used to provide extra information at the bottom of the
The given code example is to show you how to use
<footer> element inside the
<article> <p> Another blog post. </p> <footer> <p> Extra information is always good.</p> </footer> </article>
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>
<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.
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
Following browsers support this attribute:
Google Chrome 6+
Internet Explorer 9+
Apple Safari 5+