Semantic HTML Basics In 5 Minutes

thibpat

Thibaut Patel

Posted on January 3, 2020

Semantic HTML Basics In 5 Minutes

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:

  1. Increase maintainability, as other developers (and yourself) will understand your thought process behind the creation of the page.
  2. 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).

💖 💪 🙅 🚩
thibpat
Thibaut Patel

Posted on January 3, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Semantic HTML Basics In 5 Minutes
webdev Semantic HTML Basics In 5 Minutes

January 3, 2020