{

What is the 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 between section and div

  • semantic content
  • font-size

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

what is Section?

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

It is an HTML5 element.

Sections can contain 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 the 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 contains multiple same tags, these can be differentiated using font size in this example, Also color styles also can be the same for this.

what is a div tag?

Div is an HTML tag that has no semantic meaning to it. It is used to create logic and layout of other elements and also contains other content elements.

Here is a 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 browsers including Chrome, Internet Explorer, Firefox, and Safari.

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

Conclusion

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

Section tag has semantic meaning inside 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.