Semantic HTML tags are tags that have a meaning. If you're using only
<span> tags, then the HTML you write isn't "semantic".
For example, when you want to show a title, you will most likely choose the headings
<h3>... And it is a good thing. You are showing that the text in your heading tag is... a heading!
The non-semantic way to reach the same styling would be to use a
<span> tag with CSS.
Using tags like
<section> allows you to express the intent behind the usage of a tag in a web page. This helps:
- Increase maintainability, as other developers (and yourself) will understand your thought process behind the creation of the page.
- Improve SEO, as search engines will be able to understand your content more easily.
In this video I talk about the difference between the article and section tags, and show two examples showcasing the
<aside> tags (and others).