Search code examples
html

Technical differences of div vs section vs article

Is there some technical differences between a section, div and an article?

Edit: I am not asking about when you should use it. I am talking about specific technical differences.

Solution

  • Since you are asking for technical, and not semantic differences, here we go:

    app
  .querySelectorAll("*")
  .forEach(el => console.log(el.constructor.name));
    <div id="app">
  <div></div>
  <section></section>
  <article></article>
</div>

    As you can see, div has its own constructor interface, HTMLDivElement, whereas section and article do not have this.

    Instead, their constructor comes directly from HTMLElement (which HTMLDivElement inherits from).

    By what MDN says, the only actual addition HTMLDivElement receives is a property align (which has been marked obsolete).

    Thus, it actually does not have any different or additional properties on top of also being an HTMLElement. Technically, it could now as well be an HTMLElement only, but to keep the web compatible with existing code, the HTMLDivElement interface cannot be removed, as there will be alot of existing code that uses the interface. Removing it would break pages using such code.