← Back tothis vs that

<div> vs <section>

Written byPhuoc Nguyen
04 Sep, 2020
Last updated
17 Mar, 2021


  1. The `div` element has no special meaning. It is often used as a block of children elements.
    The `section` element introduced in HTML5 standard is used to group related elements, such as a subsection of a long article.
    In short, the `section` element provides more semantic syntax than the `div` element.
  2. Other than 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">
    We can retrieve elements and print out the constructor for each of them:
    .forEach((e) => console.log(e.tagName, ':', e.constructor.name));

    // HEADER: HTMLElement
    // SECTION: HTMLElement
    // DIV: HTMLDivElement
    // FOOTER: HTMLElement
  3. If your page has nested `sections`, then the `h1` elements of the inner sections will have smaller font-sizez than the `h1` elements of the outer sections.

    <h1>Heading of inner section</h1>
    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`:
    /* First level */
    :-webkit-any(article, aside, nav, section) h1 {
    font-size: 1.5em;

    /* Second level */
    :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
    font-size: 1.17em;

    /* Third level */
    :-webkit-any(article, aside, nav, section)
    :-webkit-any(article, aside, nav, section)
    :-webkit-any(article, aside, nav, section)
    h1 {
    font-size: 1em;

    /* Fourth level */
    :-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: 0.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.

Good practice

Due to the semantic manner, the `section` elements are often used to build the outlines of the page. We should use the heading elements (`h1 - h6`) inside section to indicate the summary of section.
<h2>This section tells about</h2>

<h2>Title of another section</h2>

Good to know

Nowadays, HTML5 standard are supported in modern browsers. But in the old days when it is required to support non-HTML5 browsers such as IE 8, we have to do some additional tasks.
  • By default, the unknown elements are styled as `display: inline`, hence we need to reset the value for HTML5 elements:
    section {
    display: block;
    The CSS normalizing libraries, such as normalize.css, add similar modifications:
    /* Render the `main` element consistently in IE */
    main {
    display: block;

    /* Add the correct display in Edge, IE 10+, and Firefox */
    details {
    display: block;
  • Plus, the older versions of IE do not support styling of unknown elements unless they are available in the DOM.
    As a result, we have to create them despite the fact that they are not used:
    <!--[if lt IE 9]>

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn