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.
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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.