Demon Tech Roadmap

HTML

HTML Semantics

HTML semantic elements describe their meaning clearly.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

Semantic HTML elements explain their purpose to the browser and developer. A `

` element clearly holds input fields, while a `

` means nothing on its own. Using semantic tags improves accessibility and search engine ranking.

Syntax

1<!-- semantic tags -->
2<article>
3  <h2>Post Title</h2>
4</article>

Example

1<!-- this uses semantic tags -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Semantics</title>
8  </head>
9  <body>
10    <header><h1>Blog</h1></header>
11    <article><p>First post!</p></article>
12  </body>
13</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

Semantic tags describe content clearly.
Non-semantic tags tell nothing about content.
Screen readers rely on semantic structure.
Search engines rank semantic pages higher.

Up Next

Continue your journey with the next topic.

Go to HTML Style Guide ❯