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 »

Build an Accessible Audio Controller

Overview After two days of ARIA theory lessons on freeCodeCamp, the next workshop focused on building an accessible audio controller. The session began with a...