Semantic HTML tags are tags that have a meaning. If you're using only <div> and <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 <h1>, <h2>, <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 <header>, <footer> and <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 <header>, <footer>, <time>, <address>, <main>, <aside> tags (and others).
Top comments (0)