div are tags used to display the content in html pages. There are two differences with section and div
- semantic content
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
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>
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>
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
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