Other than the the semantic differences, div
has its own constructor interface HTMLDivElement
.
section
and other HTML5 elements such as article
, footer
, header
, main
, navbar
do not have this. In fact,
their constructors are from HTMLElement
.
Assume that our page is organized as following:
<div id="root">
<header></header>
<section></section>
<div></div>
<footer></footer>
</div>
We can retrieve elements and print out the constructor for each of them:
document
.getElementById('root')
.querySelectorAll('*')
.forEach(e => console.log(e.tagName, ':', e.constructor.name))
If your page has nested sections
, then the h1
element of inner section will have the smaller size than the h1
element of parent section.
<section>
<h1>Heading</h1>
<section>
<h1>Heading of inner section</h1>
</section>
</section>
The default CSS of browsers defines the font size for them. For example,
Chrome
defines the different font sizes for
h1
at different levels of
section
:
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
}
:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.17em;
}
:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.00em;
}
:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
font-size: .83em;
}
You can see the similar definitions in the default styles of
Safari.
This does not happen with the div
elements. All the h1
elements will have the same font size no matter how their div
containers are structured.