Both the tags are semantics tag in HTML 5. In this article, we will discuss the behavior of the <article> and <section> tag. Both the <article> and <section> tags are represented in a similar way but used for some meaning, that meaning is for the browsers and the developers. Both tags can replace each other as there will be no changes to the outputs, but it will be difficult to understand by the developers and the browsers to act on those content.
<article> Tag: This tag contains independent content that doesn’t require any other context. So the <article> tag can be placed inside the main content. But each of the articles will contain independent content within it. Like YouTube use to contain different kinds of videos on a single page, each video is independent or you can see the course page of GeeksforGeeks each course is independent, each course can have its own page.
Feature:
- An article can have nested articles and that should refer to parent article.
- Article tags are perfect for Microdata information.
<section> Tag: This tag is used to split a page into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different <section> tag. The <section> tag is introduced to wrap-up the things in a particular section. The <section> tag divides the content into sections and subsections. The section tag is used when requirements of two headers or footers or any other section of documents needed. Section tag grouped the generic block of related content.
Feature:
- A section can have nested sections
Note: Placing <article> tag inside of <section> tag is good practice, like section basically defines the types and the articles will contain the specific contents in that type of section.
Example: In this example we will use both the tags depending on its behavior like articles that contain a list of independent content and the section tag will contain specific sections on a webpage.
<!DOCTYPE html><!DOCTYPE html><html>
<head>
<title>
article tag over section tag
</title>
<style>
.container {
width: 650px;
height: auto;
}
.section {
float: right;
}
.article {
float: left;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
<div class="container">
<div class="article">
<article>
<h2>This is article tag</h2>
<p>
Above header(h2) placed
in article tag
</p>
</article>
<h2>This is non-article tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
<div class="section">
<section>
<h2>This is section tag</h2>
<p>
Above header(h2) placed
in section tag
</p>
</section>
<h2>This is non-section tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
</div>
</center>
</body>
</html>
|
Output:
Choose one over another:
- <section> tag: When you just want to decorate any content in your page i.e. you want to add some functions then you can use <section> tag, also that can be replaced by the <div> tag. The section tag will be good when the content of any web page is appropriate for the contents outline and browsers does not give any attention to the outlines.
- <article> tag: The <article> tag is a self-completed tag, this can be used for any of those reasons, where <section> tag is required plus the <article> tag place the content independently. Article tag can be used to place any social post, magazine article, blogs, list of related contents, any independent content.
Tags for:
- If your content material contains the date, price, author, description, etc then go for the article tag. Basically use an article tag to contain content that could be shared and obviously for actual articles. Wrap your blog posts in them.
- If your content contains any kind of procedure to make or create something that will depend on something then go for the section tag like a div, when it describes what your document outline would include.
Let us see the differences in a tabular form -:
| <section> | <article> | |
| 1. | The <section> tag defines a section in a document. | The <article> tag specifies independent, self-contained content. |
| 2. | The <section> tag supports Global attributes | It supports Event attributes |
| 3. | The <section> tag supports Event attributes. | It supports Global attributes |
| 4. | The <section> tag represents the generic section of the document or application. | The article Tag represents a complete, composition in the document, page, application, or site. |
| 5. | The <section> tag is the only block of related content. | The <article> tag is a special type of <section> |
| 6. |
<section> tag is supported by following browsers -: Chrome(5.0) , Microsoft Edge(9.0), Firefox(4.0) , Safari (5.0) , Opera Mini (11.5) |
It is supported by following browsers -: Chrome(6.0) , Microsoft Edge(9.0), Firefox(4.0) , Safari (5.0) , Opera Mini (11.1) |