Technical differences of div vs section vs article

Question

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.

Answer 1

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.

Answer 2

They express different semantics.

Articles are articles. Sections are sections. And divs are generic blocks with no semantics.

The semantics are used by tools like screen readers, search engines, and so on to identify what content is what. It can be used to treat some content as more important that others by a search engine or for navigating around a document by a screen reader.