HTML Tags Reference
Every HTML tag you actually type — with the common attributes, real examples, and the accessibility gotchas that trip people up. HTML Living Standard.
Structure & Layout
<div>
Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.
<span>
Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.
<header>
Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.
<nav>
Marks a section of major navigation links, either within the site or the current page. Use for primary menus, breadcrumbs, and pagination — not for every group of links.
<main>
Contains the dominant content of the document's <body> — the content unique to this page, excluding site-wide headers, nav, sidebars, and footers. Use exactly one visible <main> per page.
<footer>
Represents a footer for its nearest sectioning ancestor — typically author info, copyright, or related links. Use it at the bottom of the page, or inside an <article>/<section> for a block-level footer.
<section>
A thematic grouping of content that typically has a heading and belongs in a document outline. Use it when the content is a distinct chunk of a larger whole; use <article> instead if it stands alone.
<article>
Self-contained content that could be distributed independently — a blog post, news story, forum reply, or product card. Use it when the content would make sense syndicated or on its own page.
Text & Semantics
<h1>
The top-level heading, describing the main topic of the page or its sectioning root. Modern practice allows one <h1> per page (the page title) or one per sectioning element — pick a convention and stick to it.
<p>
Represents a paragraph — a block of running text separated from its neighbors. Use it for prose; do not use it as a generic wrapper for other block-level content.
<a>
The anchor element creates a hyperlink to another page, a file, an in-page anchor, an email, or a phone number. It is the fundamental building block of the web's link graph and a key SEO signal.
Forms
<form>
Container for a set of input controls that are submitted together to a server. Use it any time users need to send data — search, sign-up, checkout, comments.
<input>
The single most versatile form control — its behavior is driven by the type attribute (text, email, password, number, checkbox, radio, file, date, range, color, hidden, and more). Use it for every scalar user input; use <textarea> only for multi-line text.
<button>
Interactive control that triggers an action — submitting a form, opening a dialog, or running JavaScript. Use it for anything that does something; use <a href> for anything that navigates.
<label>
Associates a caption with a form control so clicking the label focuses the input and screen readers announce it. Use one for every input, select, and textarea.
<select>
Drop-down (or list-box) that lets the user pick one or more predefined options. Use it when the option set is short and known; for many options, an autocomplete input is friendlier.
<textarea>
Multi-line plain-text input control. Use it for comments, messages, code snippets, or any free-form text that may span more than one line.
Media
<img>
Embeds a raster or vector image into the document. Use it for content images; use CSS background-image for purely decorative visuals.
<video>
Embeds a video player in the page, with native browser controls and multiple source support. Use it for self-hosted or CDN-hosted video instead of Flash or heavy JS players.
<iframe>
Embeds another HTML document inside the current page. Use it for third-party embeds (maps, videos, payments) — but treat every iframe as untrusted and sandbox where possible.
<svg>
Inline vector graphics that scale losslessly and can be styled and animated with CSS or JS. Use it for icons, logos, charts, and any illustration that must stay crisp at any size.
Document Metadata
<title>
The document's title, shown in the browser tab, bookmarks, and search-engine result snippets. It is required in every valid HTML document.
<meta>
Provides metadata about the document that other tags cannot express — charset, viewport, description, robots directives, and Open Graph tags. Placed only inside <head>.
<link>
Defines a relationship between the current document and an external resource — stylesheets, icons, preloads, RSS feeds, canonical URLs, and manifest files. Lives inside <head>.