The W3Schools Semantic Elements page
is a good starting point for for semantic elements, but it doesn't tell the whole story.
Semantic HTML Element - An element that conveys some sort of meaning to a human about the content that it contains.
Elements like <span>, <div>, <b>, and <i>
are NOT considered to have semantic meaning.
Key Point: most semantic block elements are simply div blocks, just with semantic meaning!
The following semantic block elements behave EXACTLY like generic div block elements.
<article> <aside> <footer> <header> <main> <nav> <section>
Some developers rarely use semantic block elements. Other developers use them regularly.
It's generally a matter of personal preference, unless your employer has a coding preference.
I rarely (or never) use semantic block elements.
For example, for a block that's part of a page layout I use semantics in the style class name as follows
<div class="main"></div>
instead of using a semantic element.
<main></main>
Key Point: W3Schools categorization of semantic inline elements is inconsistent.
For whatever reason, W3Schools lists some inline elements as being semantic: <time>, <mark>
But not others which are clearly semantic: <strong>, <em>, and <cite>
All of the above inline elements are used in the following text to show what formatting they induce (NO styles applied).
(no formatting at all)
text in a <mark> element (background color) text in a <strong> element (boldface) text in a <em> element (italic)
text in a <cite> element (italic)
As you can see above, only <mark> does something unique, while the others either do nothing
or simply induce bold or italic.
Key Point: W3Schools categorization of other "structures" is also inconsistent.
HTML elements that work in pairs to create "structures" are also treated inconsistently by W3Schools.
For example, the elements in the first two bullets below ARE listed as semantic elements by W3Schools,
but NOT the elements in the third bullet (or unorderd/ordered lists for that matter).