Semantic elements in HTML

What are Semantic Elements ?
Semantic elements are elements that have a meaning, which defines the purpose of the elements.

Semantic elements helps the browser and the developers understand the meaning of content.

It helps the search engine to retrieve information faster.

Non semantic elements : These are elements with no meaning, they can contain any kind of information.
For ex : div tag, it explains nothing what kind of information it can contain.

Semantic elements : Elements with meaning.
Here are some of the Semantic elements of HTML5.
header
footer
nav
article
aside
section
summary

Comments

[lionel-rowe]

article is a standalone article (could be syndicated alone, without the rest of the page). aside is something tangentially related to the main content of the document. section is a generic portion of the page that is to some extent independent (unlike a div, which might just be a container, used for stylistic reasons, etc.)

summary must be a child of a details element and displays the shortened summary of the content when it's collapsed, so it's completely different from the other 3. Browsers even give it default styling and behavior, at least where it's used correctly inside details.

As for whether anyone understands these differences... Sure they do, if they read the spec, MDN articles, or a blog post that explains them. They won't be intuitive to someone who hasn't familiarized themselves with this information, any more than div or span are intuitive to someone who's never done web development before.

[Adam Crockett 🌀]

The most important reason, semantic html helps assistive technologies to read what a user is currently viewing in the case where the user is visually impaired. When used correctly there is no need to apply a role attribute, for this reason not only the html5 semantic have some importance but generally correct html means better user experience for all.

[Daniil Baturin]

We shouldn't forget semantic inline elements too. They also play a role in accessibility.
It helps that most non-semantic inline elements are deprecated and forgotten now, like <b> or <i>. However, there still are abominations like <span class="bold"> in the wild.
Elements like <strong> or <em>, <address>, <abbr> say what their content is and you still can style them however you want.

[Adam Crockett 🌀]

simpleAdam for a screen reader it's simple, context, if you close your eyes and hear silence the a bunch of text it's not going to be as clear as hearing "aside get help"
Which tells me that I am in the aside not the main content. The screen reader should be fed context also via the text on the page, so as long as your content is clear you will have a better experience. And if that's not enough you can use role and aria-* to give information for things such as 3D. My opinion is based on personal experience and training, I myself have learning difficulties and so I'm passionate about this topic, it does make a difference to people's lives.

I have not suggested I am into SEO whatsoever and that might be better placed to ask others about rankings but for screen readers don't just take my word for it, go fire up a screen reader and see how it makes a difference between we sites, some do it really well and others... It's a garbled mess and unusable for most sight impaired.

[Kirsten A. Gosselin]

section is basically a part of the document, that can contain intro, heading and other information. Basically a kind of wrapper

[Alvaro Montoro]

When you read a book, it's not just a long chunk of text, it is divided into chapters that contain related blocks of information. Each chapter will have a different topic (related or unrelated to the other chapters) but always related to the main topic of the book. In the same way, an HTML article/aside can have sections.