DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›