Semantic HTML Basics In 5 Minutes
Thibaut Patel
Posted on January 3, 2020
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).
Posted on January 3, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.