Semantic HTML: For beginners Part 1

Published: (February 5, 2026 at 09:22 PM EST)
1 min read
Source: Dev.to

Source: Dev.to

Non‑semantic example

Imagine you’re a beginner at HTML, and because you want a quick non‑functional traveling app you write this in the body:

## Traveling App

## Easier to travel than ever

Book your flight today

©2026-2027 Traveling App All Rights Reserved.

This markup is not semantic and will not boost SEO.

Semantic version (assuming Tailwind is installed)

## Traveling App

## Easier to travel than ever

Book your flight today

©2026-2027 Traveling App All Rights Reserved.

This markup is semantic and will help improve SEO.

Why use semantic HTML?

  • “ – contains the webpage title and subtitle.
  • “ – wraps the primary content of the page.
  • “ – holds copyright or licensing information.
  • “ – a generic container without semantic meaning; use it only when no other element fits.

Using the appropriate semantic elements gives search engines and assistive technologies clearer information about the structure and purpose of your content.

Back to Blog

Related posts

Read more »

Untitled

HTML html Cadastro de Produção PCP - Paris Atacado / CSS is included in the CSS section below / Salvar Lote 📥 Exportar para Excel .csv Limpar Todo o Banco 📋...

How does Tab Order work in the DOM?

Tab order in the DOM follows these rules Default behavior Elements are focused in the order they appear in the HTML source top to bottom, left to right. Only f...