DEV Community

Thibaut Patel
Thibaut Patel

Posted on

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).

Top comments (0)