Difference between <article> tag and <section> tag - GeeksforGeeks

28 Jan, 2020
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
HTML-Tags
Difference Between
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference between Process and Thread
Difference Between Method Overloading and Method Overriding in Java
Differences between JDK, JRE and JVM
Difference between Clustered and Non-clustered index
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?