A reference of 126 HTML tags
What each tag does, whether it needs a closing tag, and the attributes you actually use — one line each.
Document skeleton5
The skeleton every document has, with a fixed order and place.
<html>The root element wrapping the whole document; its lang attribute declares the language.<head>Holds information about the document that is not rendered — title, meta, styles.<body>Everything the reader actually sees goes inside this element.<title>The document title shown in the browser tab and in search results.<base>Sets the base URL that all relative links in the document resolve against.
Sections17
Divides a page into meaningful blocks; search engines and screen readers follow this structure.
<header>The introductory part of a section — a heading, a logo, navigation.<nav>A block of major navigation links — not every set of links, just the wayfinding ones.<main>The main content of the document — one per page, excluding header and footer.<section>A thematic grouping that has a heading — not a generic box.<article>A piece that still makes sense on its own — an article, a post, a comment.<aside>Content beside the main flow — remove it and the main text still reads fine.<footer>The closing part of a section — copyright, contact details, related links.<div>A box with no meaning of its own — reach for it only when no other element fits.<h1>The top-level heading of the page — one per document as a rule.<h2>A heading one level below h1, used to divide the page into major parts.<h3>A heading that subdivides what sits under an h2.<h4>A fourth-level heading — needing this deep a nest often means the structure wants rethinking.<h5>A fifth-level heading — rarely needed in practice.<h6>The sixth and smallest heading level.<hgroup>Groups a heading together with the subheading that belongs to it.<address>Marks contact details for the article or document — not for any postal address.<search>Marks a group of controls used for searching — a relatively recent addition to the standard.
Text blocks7
Text that flows as a block — paragraphs, quotations, code listings.
<p>A paragraph. Browsers close it for you if you leave the closing tag out.<br>A single line break — not a tool for adding space between paragraphs.<hr>Marks a shift in topic — it is not merely a decorative horizontal line.<pre>Shows text exactly as written — spaces and line breaks are preserved.<blockquote>A long quotation from elsewhere; put the source URL in the cite attribute.<figure>A self-contained figure or code block referenced from the text; it can be moved without loss.<figcaption>The caption for a figure, placed as the first or last child inside it.
Inline markup30
Marks up part of a line without starting a new one.
<a>A link to somewhere else; without href it is a placeholder rather than a link.<span>An inline box with no meaning, used to style part of a line differently.<strong>Marks text as important; looking bold is a side effect, not the point.<em>The part you would stress when reading aloud; italics are just how that is shown.<b>Draws attention without implying importance — use strong when it matters.<i>Text in a different voice — foreign words, scientific names, inner thoughts.<u>Underlines text that needs a non-textual annotation, such as a spelling error.<s>Strikes through content that is no longer accurate; for edit history use del.<mark>Highlights the part that matters to the reader, like a marker pen.<small>Side comments in small print — disclaimers, copyright lines.<sub>Subscript text, as in the 2 of H₂O.<sup>Superscript text, used for powers and footnote markers.<code>A fragment of code, usually shown in a monospace font.<kbd>Represents a key the user presses, such as Ctrl or Enter.<samp>Output produced by a program.<var>The name of a variable in a formula or in code.<q>A short inline quotation; the browser adds the quotation marks.<cite>Names the title of a work — not the name of a person.<abbr>An abbreviation; put the expansion in the title attribute.<time>A date or time; the datetime attribute carries the machine-readable form.<data>Attaches a machine-readable value alongside the human-readable one.<dfn>Marks the term being defined at that point in the text.<bdi>Isolates text whose direction might otherwise disturb the surrounding line.<bdo>Forces the text direction; the dir attribute is required.<ruby>Ruby annotation — pronunciation shown above characters, used with rt.<rt>Inside ruby, this holds the pronunciation itself.<rp>Fallback brackets shown by browsers that cannot render ruby.<wbr>Suggests a place where a line may break — handy inside long URLs.<ins>Content added later — used when a document keeps its edit history visible.<del>Content that was removed; pairs with ins to show an edit history.
Lists7
Ordered and unordered lists, plus term-and-definition lists.
<ul>An unordered list — reordering the items changes nothing.<ol>An ordered list; start sets the first number and reversed counts backwards.<li>One item in a list; it belongs inside a ul or an ol.<dl>A list that pairs terms with their descriptions.<dt>Inside a dl, this is the term being described.<dd>The description that follows a dt; one term may have several.<menu>A list of commands or tools; today it behaves the same as ul.
Tables10
Data arranged in rows and columns — not a layout device.
<table>Holds data arranged in rows and columns — not a layout tool.<thead>The header rows of a table; they repeat on each printed page.<tbody>The body rows of a table; browsers insert one even if you do not write it.<tfoot>The summary rows at the bottom of a table, such as totals.<tr>One row of a table, containing th or td cells.<th>A header cell; scope tells whether it labels a row or a column.<td>A data cell; colspan and rowspan merge it across columns or rows.<caption>The title of the whole table, placed as its first child.<colgroup>Treats several columns as a group, handy for column-wide styling.<col>Inside colgroup, points at one column — or as many as span says.
Forms14
Controls that take a value and send it somewhere.
<form>Groups inputs for submission; action is where it goes, method how it is sent.<input>A single input control; the type attribute turns it into text, number, date, colour or file.<textarea>A multi-line text box; its default text goes between the tags.<button>A clickable button; inside a form, omitting type makes it a submit button.<select>A drop-down for choosing one value — add multiple to allow several.<option>One choice inside a select.<optgroup>Groups options under a labelled heading.<label>A label for an input; linked with for, clicking the text focuses the field.<fieldset>Boxes related controls together; disabled switches them all off at once.<legend>The caption for a fieldset, placed as its first child.<datalist>Suggestions offered to an input; the user may still type anything else.<output>Holds the result of a calculation; for names the inputs it came from.<progress>A bar showing how far a task has got.<meter>Shows a value within a known range — not for progress.
Media10
Images, audio, video, and surfaces you draw on.
<img>A single image; alt must carry what the image conveys.<picture>Lets the browser pick a different image by screen size or format.<source>One candidate file inside picture, video or audio.<video>Plays video; autoplay generally only works together with muted.<audio>Plays sound; without controls nothing appears on screen.<track>Adds captions or descriptions to media, pointing at a WebVTT file.<canvas>A blank surface drawn on by script; what you draw is not text.<svg>Draws vector graphics inline; they stay sharp at any size.<map>Overlays clickable regions on an image, used together with area.<area>One clickable region inside a map, defined by shape and coordinates.
Embedding4
Puts another document or resource inside this one.
Script and style5
Attaches behaviour and appearance to the document.
<script>Loads or contains JavaScript; defer runs it after the document is parsed.<noscript>Content shown only when scripting is unavailable.<style>CSS written directly in the document, usually inside head.<template>A fragment that is not rendered now but cloned later by script.<slot>Reserves a place inside a web component for content from outside.
Document info2
Information read by browsers and search engines rather than people.
Disclosure3
Things that open and close on a click, with no JavaScript.
Obsolete12
Tags the standard has retired; you meet them only in old documents.
<center>The old way to centre content; CSS does this now.<font>The old tag for setting typeface, size and colour directly.<marquee>The old scrolling-text tag; CSS animation replaces it.<blink>Made text blink; no browser supports it any more.<big>The old tag for one step larger text.<strike>The old strike-through tag; use s or del instead.<tt>The old monospace tag; code replaces it.<frame>One pane of the old way of splitting the window between documents.<frameset>The old container that laid out frames in place of body.<acronym>The old tag for acronyms; abbr covers this now.<applet>The old tag for Java applets; the runtime itself is gone.<dir>The old directory-listing tag; ul took its place.
How to read this
- Most tags come in pairs, opening and closing. Only tags with no content — img, br — are left unclosed.
- Writing </br> for a void element does nothing useful; the browser ignores it or adds an empty line.
- Appearance is CSS’s job. A tag says what something is; bold or italic is only the consequence.
- Choosing the tag that matches the meaning helps search engines and screen readers alike. Wrapping everything in div throws that information away.
Frequently asked questions
Q. How many HTML tags are there?
Around 110 remain in the living standard, and roughly 130 counting the obsolete ones. This reference lists 126 — the ones in use today plus those you still meet in old documents.
Q. Which tags have no closing tag?
Those with no content: img, br, hr, input, meta, link and a few more. Writing </img> does nothing. The XHTML-style slash in <br /> is allowed but changes nothing in HTML.
Q. What is the difference between div and section?
A div is a box with no meaning; a section is a thematic group that has a heading. If a heading would fit there, use section; if you only need something to hang styles on, div is the honest choice.
Q. Can tag names be uppercase?
HTML is case-insensitive, so <DIV> works. Lowercase is the convention, and in XML-based contexts such as XHTML or SVG only lowercase is valid.
Q. What happens if I use an obsolete tag?
Most browsers still render it. But the standard has dropped it, so it may disappear at any time — and the replacements already exist: CSS for center and font, CSS animation for marquee.