HTML Semantic Elements Reference #
This document lists all major HTML semantic tags, explains their purposes, and provides code snippets for each. (AI-generated)
🧑🏽⚖️ HTML Semantic Elements Reference
Table of Contents
Semantic Structure Elements #
Tag Description Example
<header> Represents the introductory content, typically a group of introductory or navigational aids. <header> <h1>Welcome to My Website</h1> </header>
<nav> Defines a section that contains navigation links. <nav> <a href="#home">Home</a> <a href="#about">About</a> </nav>
<main> Specifies the main content unique to the document. <main> <article>This is the main article.</article> </main>
<article> Represents a self-contained composition that can be independently distributed or reused. <article> <h2>Blog Post</h2> <p>This is a blog article.</p> </article>
<section> Defines a thematic grouping of content, typically with a heading. <section> <h2>Our Services</h2> </section>
<aside> Contains content indirectly related to the main content, such as sidebars or pull quotes. <aside> <p>Sidebar info or related links</p> </aside>
<footer> Represents the footer of a section or document, often with metadata or navigation links. <footer> <p>© 2025 My Company</p> </footer>
Text and Inline Semantic Elements #
Tag Description Example
<strong> Indicates strong importance; typically rendered in bold. <strong>Warning:</strong> Backup your data!
<em> Marks text with stress emphasis; usually rendered in italics. <em>This word</em> is emphasized.
<mark> Highlights text for reference purposes. <p>Search results for <mark>semantic</mark></p>
<time> Represents a specific time or date. <time datetime="2025-10-29">October 29, 2025</time>
<abbr> Defines an abbreviation or acronym with an optional title attribute. <abbr title="HyperText Markup Language">HTML</abbr>
<cite> Used to reference the title of a creative work. <cite>The Great Gatsby</cite> by F. Scott Fitzgerald
<code> Represents a fragment of computer code. <code>console.log("Hello World")</code>
<blockquote> Indicates a section quoted from another source. <blockquote> "Simplicity is the soul of efficiency." </blockquote>
<q> Used for short inline quotations. <q>Stay hungry, stay foolish.</q>
<dfn> Marks the defining instance of a term. <dfn>HTML</dfn> is the standard markup language for web documents.
Created by GPT‑5 — 2025 HTML Semantic Reference Guide.