Difference between <article> tag and <section> tag
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.
- 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.
- 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.
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.
- 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 -:
|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|
<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)