Open In App

What is the difference between <section> and <div> tags in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

The <div> tag and <section> tag are used in the webpage, the <section> tag means that the content inside relates to a single theme, and the <div> tag is used as a block part of the web page.

HTML div Tag

It is called a division tag. The <div> tag is a block-level element that only represents its child elements and doesn’t have a special meaning. It takes the Whole Width available on the screen. It is generally used with the title and class attributes.

The <div> tag is one of the most used tags in website creation. Use <div> element for style purposes or for wrapping paragraphs within a section that are all to be given similar properties. Requires closing </div> tag too.

Note: It is recommended to use the <div> element as a last option and use other various tags such as <main>, <article>, or <nav> as this practice is more convenient for the readers.

Syntax:

<div>
<h1>Title</h1>
<p>Information goes here....</p>
</div>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Div example</title>
</head>
 
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
    <div style="background-color:#189">
        <h2>
            This is heading inside Div tag
        </h2>
        <p>
            This is paragraph inside Div tag
        </p>
    </div>
 
    <p style="color:red">
        This is outside div tag
    </p>
 
 
</body>
 
</html>


Output:

HTML section Tag

The <section> tag is not a generic container in a web-page. The content inside <section> tag will be grouped i.e. it’ll connect to a single subject and appear as an entry in an outline of the page. A common rule is that the <section> element is valid only if that element’s contents would be listed explicitly in the document’s outline.

Section tag is used to distribute the content with a similar theme. The main advantage of the section tag is, it describes its meaning in a web page. It is mostly used when headers, footers, or any other section of documents are needed in a web page. Requires closing </section> tag too.

Syntax:   

<section>
<h1>Title</h1>
<p>Information goes here....</p>
</section>

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Title of the document</title>
</head>
 
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
    <section>
        <h2>GeeksForGeeks </h2>
        <ul>
            <li>Machine learning</li>
            <li>DSA</li>
            <li>Competitive programming</li>
            <li>Web-Development</li>
            <li>Java</li>
        </ul>
    </section>
    <section>
        <h3>Books</h3>
        <p>Learn Machine learning</p>
        <p>Learn DSA</p>
        <p>Learn Competitive programming</p>
        <p>Learn Web-Development</p>
        <p>Learn Java</p>
 
 
    </section>
</body>
 
</html>


Output:

Differences between <div> and <section> tag

<div> <section> 
It is called as division tag. It is called as section tag.
It represents its child elements and doesn’t have a special meaning. It represents its child elements and has a special meaning.
It doesn’t have any specific meaning. It describes its meaning in the web page.
Use <div> element for style purposes in webpage.

use <section> during requirements of headers or footers.

It is not a generic container and global attributes

It is a generic container

Section tag containing article elements in html

Div tag contains all the elements where the <p> tag should not force to do it.



Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads