Skip to main content
D
HTML
HTML Semantics

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

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

Example

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