HTML Tag Reference
The complete list of HTML tags, grouped by what they do. Bookmark this page and use it whenever you forget a tag!
Root and document tags
| Tag | What it does |
|---|
<!DOCTYPE html> | Declares this is an HTML5 page. Always first! |
<html> | The root element that wraps everything. |
<head> | Holds metadata (info about the page, not shown). |
<body> | Holds the visible content of the page. |
<title> | The page title (shows in the browser tab). |
<meta> | Metadata: charset, description, viewport, and more. |
<link> | Connects external resources (like a CSS file). |
<style> | Internal CSS rules for this page. |
<base> | Sets a base URL for relative links. |
<script> | Adds JavaScript (inline or from a file). |
<noscript> | Fallback content when JavaScript is off. |
Structure and sectioning tags
| Tag | What it does |
|---|
<header> | The top of a page or a section. |
<footer> | The bottom of a page or a section. |
<nav> | Navigation links. |
<main> | The main content of the page (only one!). |
<section> | A themed chunk of content. |
<article> | A standalone piece (blog post, news story). |
<aside> | Related side content (sidebar). |
<address> | Contact information. |
<div> | A generic block box. |
<h1> to <h6> | Headings, biggest to smallest. |
<hgroup> | Groups a set of headings. |
<search> | Marks a search area (new). |
Text tags
| Tag | What it does |
|---|
<p> | A paragraph. |
<br> | A line break (no closing tag). |
<hr> | A horizontal divider line. |
<pre> | Preformatted text (keeps spaces and breaks). |
<strong> | Important text (bold). |
<em> | Emphasized text (italic). |
<b> | Bold text (just looks, no meaning). |
<i> | Italic text (like a foreign word). |
<u> | Underlined text. |
<small> | Fine print / smaller text. |
<mark> | Highlighted text. |
<sub> | Subscript (below the line). |
<sup> | Superscript (above the line). |
<code> | Computer code text. |
<kbd> | Keyboard keys. |
<samp> | Sample program output. |
<var> | A variable name. |
<abbr> | An abbreviation (show full on hover). |
<dfn> | Marks the first definition of a term. |
<cite> | A citation (like a book title). |
<q> | A short inline quote. |
<blockquote> | A long quote on its own block. |
<span> | A generic inline helper. |
<time> | A date or time (machine-readable). |
<data> | Links text to a machine-readable value. |
<wbr> | Where a word MAY break across lines. |
<bdi> | Bi-directional isolation (RTL text). |
<bdo> | Forces text direction. |
<ruby> / <rt> / <rp> | Ruby annotations (for East Asian text). |
<s> | Struck-through text (no longer correct). |
<ins> | Inserted text. |
<del> | Deleted text. |
List tags
| Tag | What it does |
|---|
<ul> | Bullet list (unordered). |
<ol> | Numbered list (ordered). |
<li> | One item in a list. |
<dl> | Description list (terms + definitions). |
<dt> | A term being described. |
<dd> | The description of a term. |
<menu> | A list of actions/commands. |
Link tags
| Tag | What it does |
|---|
<a> | A hyperlink. |
<area> | A clickable area inside an image map. |
<map> | Wraps clickable areas in an image map. |
Media tags
| Tag | What it does |
|---|
<img> | An image (no closing tag). |
<picture> | Responsive images with <source> variants. |
<source> | A media source (image or video format). |
<figure> | Media with an optional caption. |
<figcaption> | The caption of a figure. |
<audio> | Audio playback. |
<video> | Video playback. |
<track> | Subtitles/captions for video. |
<iframe> | Embeds another page. |
<embed> | Embeds external content (quick). |
<object> | Embeds external content (with fallback). |
<param> | Parameters for an <object>. |
<canvas> | A drawing board (uses JavaScript). |
<svg> | Vector graphics drawn with code. |
<math> | MathML math expressions. |
Table tags
| Tag | What it does |
|---|
<table> | The whole table. |
<caption> | The table title. |
<tr> | One row. |
<th> | A header cell (bold, on top). |
<td> | A normal data cell. |
<thead> | The header part of a table. |
<tbody> | The main body of a table. |
<tfoot> | The footer part of a table. |
<col> | One column (for styling). |
<colgroup> | Groups columns. |
Form tags
| Tag | What it does |
|---|
<form> | The whole form. |
<input> | An input field (many types!). |
<label> | A name/label for an input. |
<button> | A clickable button. |
<select> | A dropdown list. |
<option> | One choice in a dropdown. |
<optgroup> | Groups choices in a dropdown. |
<textarea> | A big multi-line text box. |
<datalist> | Autocomplete suggestions for an input. |
<output> | Shows a result (often from JS). |
<progress> | A loading progress bar. |
<meter> | A gauge (like a fuel meter). |
<fieldset> | Draws a box around a group of inputs. |
<legend> | The title of a fieldset. |
Interactive and web component tags
| Tag | What it does |
|---|
<details> | A built-in expand/collapse box. |
<summary> | The clickable title of a <details> box. |
<dialog> | A pop-up window. |
<template> | Invisible HTML that JS can copy. |
<slot> | A placeholder for custom content. |
Deprecated and obsolete tags (don't use!)
| Tag | Use instead |
|---|
<font> | CSS font-family. |
<center> | CSS text-align. |
<big> | CSS font-size. |
<tt> | CSS font-family: monospace. |
<strike> | <s> or <del>. |
<marquee> | CSS animation (or just don't!). |
<frameset> / <frame> / <noframes> | CSS layout + <iframe>. |
<acronym> | <abbr>. |
<dir> | <ul>. |
<param> | Modern <object> usage. |
<plaintext> | CSS or <pre>. |
<xmp> | <pre> + <code>. |
TL;DR
- There is a tag for everything: structure, text, lists, links, media, tables, forms.
- Use semantic tags (
<nav>, <main>, <article>) to say what things mean. - Old tags like
<font> and <center> are gone: use CSS instead. - Bookmark this page: it is your HTML dictionary!