This document lists all major HTML semantic tags, explains their purposes, and provides code snippets for each.
Semantic Structure Elements
#
| Tag |
Description |
Example |
<header> |
Represents introductory content or navigational aids. |
html\n<header><h1>Welcome to My Website</h1></header>\n |
<nav> |
Defines a navigation section. |
html\n<nav><a href="#home">Home</a> <a href="#about">About</a></nav>\n |
<main> |
Contains the document’s unique primary content. |
html\n<main><article>This is the main article.</article></main>\n |
<article> |
Represents a self-contained piece of content. |
html\n<article><h2>Blog Post</h2><p>This is a blog article.</p></article>\n |
<section> |
Defines a thematic grouping of content with a heading. |
html\n<section><h2>Our Services</h2></section>\n |
<aside> |
Contains tangential or secondary content. |
html\n<aside><p>Sidebar info or related links</p></aside>\n |
<footer> |
Footer for a document or section. |
html\n<footer><p>© 2025 My Company</p></footer>\n |
Text and Inline Semantic Elements
#
| Tag |
Description |
Example |
<strong> |
Indicates strong importance. |
html\n<strong>Warning:</strong> Backup your data!\n |
<em> |
Indicates emphasized text. |
html\n<em>This word</em> is emphasized.\n |
<mark> |
Highlights text. |
html\n<p>Search results for <mark>semantic</mark></p>\n |
<time> |
Represents a specific date or time. |
html\n<time datetime="2025-10-29">October 29, 2025</time>\n |
<abbr> |
Defines an abbreviation or acronym. |
html\n<abbr title="HyperText Markup Language">HTML</abbr>\n |
<cite> |
Cites a creative work. |
html\n<cite>The Great Gatsby</cite>\n |
<code> |
Displays inline code. |
html\n<code>console.log("Hello World")</code>\n |
<blockquote> |
Represents a long quotation. |
html\n<blockquote>"Simplicity is the soul of efficiency."</blockquote>\n |
<q> |
Represents a short inline quote. |
html\n<q>Stay hungry, stay foolish.</q>\n |
<dfn> |
Indicates the defining instance of a term. |
|