What is difference between section and div tag in html


section and div are tags used to display the content in html pages. There are two differences with section and div

  • semantic content
  • font-size

The only difference between section and div is a semantic meaning applied to content inside it.

what is Section?

Section is an element and has semantic meaning to content inside it. These can be used to group the content or elements in html

It is an HTML5 element.

Sections can contains different blocks to differentiate between content.

This can be used in

  • paragraphs
  • headings
  • header
  • footer
  • article

And also font size is different for each same tag applied in heading

Thus, improves content readability and SEO ranking improved Here is an example section tag with multiple same headings

<html>
<body>

<section>
<h1>heading 1</h1> 
 <p>Heading 1 paragraph.</p> 
 </section> 
 <section> 
 <h1>Heading 2</h1> 
 <p>Heading 2 paragraph.</p> 
 </section> 
 <div> 
 <h1>Heading 3</h1> 
 <p>Heading 3 paragraph.</p> 
 </div> 
</section>
</body>
</html>

Output:

Comparision of Div and section tag in html if a section contain multiple same tags, these can be differentiated using font-size in this example, Also color styles also can be same for this.

what is div tag?

Div is an html tag which has no semantic meaning to it. It is used to create logical and layout of other elements and also contains other content elements.

Here is an div example

<html>
<body>

<div>
<h1> Countries</h1>
<ul>
  <li>India</li>
  <li>USA</li>
  <li>Germany</li>
</ul>  

<h1>Employee List</h1>

<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Sal</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Franc</td>
    <td>5000</td>
  </tr>
  <tr>
    <td>11</td>
    <td>Eric</td>
    <td>4000</td>
  </tr>
    <tr>
    <td>5</td>
    <td>Andrew</td>
    <td>1000</td>
  </tr>
  </table>
  </div>
</body>
</html>

Output

Div and section tag differences in html

Browser support

Div tag has support in older and all latest browser include chrome, Internet Explorer,Firefox, Safari

Section tag has a support in latest browsers which has support html5

Conclusion

Div is used to create a layout and group inside content elements and no semantic meaning.

Section tag has semantic meaning inside a content and improves readability and SEO

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.