DEV Community

Thibaut Patel
Thibaut Patel

Posted on

4 1

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more