TLDR reference

HTML tags

A searchable reference to the HTML elements, each with a one-line meaning and a flag for whether it is still legit or obsolete. Type to search, or filter by purpose. Everything runs in your browser.

114 shown

<html>
Current

The root element that wraps the whole document.
<head>
Current

Holds metadata about the document, not shown on the page.
<title>
Current

The page title shown in the tab and search results.
<base>
Current

Sets a base URL and default target for all relative links.
<link>
Current

Links external resources such as stylesheets and icons.
<meta>
Current

Carries metadata: charset, viewport, description, and more.
<style>
Current

Embeds CSS directly in the document.
<body>
Current

Contains all the visible content of the page.
<header>
Current

Introductory content or navigation for its nearest section.
<footer>
Current

Footer content for its nearest section: author, links, copyright.
<main>
Current

The dominant, unique content of the document. Only one per page.
<nav>
Current

A block of major navigation links.
<section>
Current

A standalone thematic grouping, usually with a heading.
<article>
Current

A self-contained piece such as a post, card, or comment.
<aside>
Current

Content tangential to the main content, like a sidebar.
<h1-h6>
Current

Section headings from most (h1) to least (h6) important.
<hgroup>
Current

Groups a heading with related taglines or subheadings.
<address>
Current

Contact information for its nearest article or body.
<p>
Current

A paragraph of text.
<div>
Current

A generic block container with no meaning, for styling and layout.
<hr>
Current

A thematic break, rendered as a horizontal rule.
<pre>
Current

Preformatted text that keeps its whitespace and line breaks.
<blockquote>
Current

A block quotation from another source.
<ol>
Current

An ordered (numbered) list.
<ul>
Current

An unordered (bulleted) list.
<li>
Current

An item within an ordered or unordered list.
<dl>
Current

A description list of term/description pairs.
<dt>
Current

A term being defined in a description list.
<dd>
Current

The description of the preceding term.
<figure>
Current

Self-contained content such as an image with a caption.
<figcaption>
Current

A caption for its parent figure.
<center>
Obsolete

Centred a block of content. Use CSS instead.
<dir>
Obsolete

An old directory list. Replaced by ul.
<a>
Current

A hyperlink to another page, file, or location.
<span>
Current

A generic inline container with no meaning, for styling.
<strong>
Current

Text with strong importance, typically bold.
<em>
Current

Stressed emphasis, typically italic.
<b>
Current

Bold text drawn to attention without extra importance.
<i>
Current

Italic text set apart, such as a term or foreign phrase.
<u>
Current

A non-textual underline, such as a spelling-error mark.
<s>
Current

Text that is no longer accurate or relevant (strikethrough).
<small>
Current

Side comments such as fine print.
<mark>
Current

Highlighted text for reference or relevance.
<abbr>
Current

An abbreviation, with the full form in its title.
<cite>
Current

The title of a cited creative work.
<q>
Current

A short inline quotation.
<code>
Current

A fragment of computer code.
<kbd>
Current

User keyboard input.
<samp>
Current

Sample output from a program.
<var>
Current

A variable in maths or programming.
<sub>
Current

Subscript text.
<sup>
Current

Superscript text.
<time>
Current

A machine-readable date or time.
<br>
Current

A line break within text.
<wbr>
Current

An optional line-break opportunity.
<del>
Current

Text removed from the document.
<ins>
Current

Text added to the document.
<bdi>
Current

Isolates text whose direction may differ, for bidirectional text.
<font>
Obsolete

Set text font, size, and colour. Use CSS instead.
<big>
Obsolete

Made text one size larger. Use CSS instead.
<strike>
Obsolete

Struck-through text. Replaced by s or del.
<tt>
Obsolete

Teletype monospace text. Replaced by code or CSS.
<acronym>
Obsolete

An acronym. Replaced by abbr.
<blink>
Obsolete

Made text blink. Never standardised; avoid.
<form>
Current

A section that collects and submits user input.
<input>
Current

A data-entry field; the type attribute sets its kind.
<textarea>
Current

A multi-line text input.
<button>
Current

A clickable button.
<select>
Current

A drop-down list of options.
<option>
Current

An option within a select or datalist.
<optgroup>
Current

A labelled group of options in a select.
<label>
Current

A caption tied to a form control.
<fieldset>
Current

Groups related form controls together.
<legend>
Current

A caption for a fieldset.
<datalist>
Current

A list of suggested values for an input.
<output>
Current

The result of a calculation or user action.
<progress>
Current

A progress bar for a task.
<meter>
Current

A scalar measurement within a known range, like a gauge.
<table>
Current

Tabular data in rows and columns.
<caption>
Current

A title for a table.
<thead>
Current

The header row group of a table.
<tbody>
Current

The body row group of a table.
<tfoot>
Current

The footer row group of a table.
<tr>
Current

A row in a table.
<th>
Current

A header cell in a table.
<td>
Current

A data cell in a table.
<colgroup>
Current

A group of columns for shared styling.
<col>
Current

A single column within a colgroup.
<img>
Current

An image.
<picture>
Current

Multiple image sources for art direction and formats.
<source>
Current

One media source for picture, audio, or video.
<audio>
Current

Embedded sound content.
<video>
Current

Embedded video content.
<track>
Current

Captions or subtitles for audio and video.
<iframe>
Current

An inline frame embedding another document.
<embed>
Current

An external application or interactive content.
<object>
Current

An external resource such as a PDF or plugin.
<canvas>
Current

A drawing surface for graphics via JavaScript.
<svg>
Current

Inline scalable vector graphics.
<map>
Current

An image map of clickable areas.
<area>
Current

A clickable region within an image map.
<frame>
Obsolete

A pane in a frameset. Removed from HTML.
<frameset>
Obsolete

A grid of frames. Removed from HTML; use iframe or CSS.
<applet>
Obsolete

An embedded Java applet. Removed from HTML.
<marquee>
Obsolete

Scrolling text. Never standardised; use CSS animation.
<details>
Current

A disclosure widget that expands to show more.
<summary>
Current

The visible label for a details element.
<dialog>
Current

A modal or non-modal dialog box.
<menu>
Current

A semantic list of commands or a toolbar.
<script>
Current

Embeds or links executable JavaScript.
<noscript>
Current

Fallback content when scripts are disabled.
<template>
Current

Inert markup to be cloned by JavaScript.
<slot>
Current

A placeholder inside a web component for injected content.
<data>
Current

Links content to a machine-readable value.

How it works

A searchable reference to the HTML elements, each with a one-line meaning and a flag for whether it is still legit or obsolete. HTML has well over a hundred tags and they are easy to mix up, so this groups them by what they do - document metadata, page structure, text, forms, tables, media, and interactive widgets - and lets you type to find one by name or by purpose. Searching "quote", "list", or "video" jumps straight to the relevant elements.

Each card names the element, explains what it is for in plain language, and marks it Current or Obsolete so you can tell at a glance whether to reach for it or avoid it. The obsolete entries, such as center, font, and marquee, are kept on purpose: you still meet them in old code and need to know what to replace them with. Everything is static and runs in your browser, so the lookup is instant and works offline once the page has loaded.

Example. Searching "section" surfaces the structural elements - section, article, aside, nav, header, footer - that give a page meaning beyond a sea of divs. Filtering by purpose and spotting the red Obsolete badge on center or font tells you to reach for CSS instead.

FAQ

What does it mean for an HTML tag to be obsolete?

An obsolete (or deprecated) tag is one the HTML standard no longer endorses, usually because it controlled presentation that now belongs in CSS, such as font and center, or because it was superseded by a better element, such as acronym giving way to abbr. Browsers often still render obsolete tags for backwards compatibility, but you should not use them in new pages: they may behave inconsistently, hurt accessibility, and can stop working at any time. This reference flags them so you know what to replace.

What is the difference between a semantic and a non-semantic element?

A semantic element describes the meaning of its content - article, nav, figure, and time all tell the browser, search engines, and assistive technology what the content is. Non-semantic elements like div and span carry no meaning and exist purely as containers for styling and layout. Using semantic tags where they fit improves accessibility and SEO at no cost, so the rule of thumb is to reach for a meaningful element first and fall back to div or span only when nothing more specific applies.

Why are b and i still allowed when they look like styling?

They survived because HTML5 redefined them with subtle meanings rather than pure presentation. b marks text to be stylistically offset without extra importance, such as keywords or a product name, while strong means genuine importance. Likewise i marks text set apart, such as a technical term or a foreign phrase, while em means stressed emphasis. They are not obsolete, but when the text really is important or emphasised, strong and em are the more meaningful choices.

Do I still need to close every tag?

Most elements need both an opening and closing tag, and closing them all is the safe, readable habit. A handful are void elements that have no content and never take a closing tag, such as img, br, input, hr, and meta. HTML also technically allows some closing tags to be omitted in certain places, but relying on that makes markup fragile, so writing explicit, well-nested tags is the convention this reference assumes.

HTML tags

<html>

<head>

<title>

<base>

<link>

<meta>

<style>

<body>

<header>

<footer>

<main>

<nav>

<section>

<article>

<aside>

<h1-h6>

<hgroup>

<address>

<p>

<div>

<hr>

<pre>

<blockquote>

<ol>

<ul>

<li>

<dl>

<dt>

<dd>

<figure>

<figcaption>

<center>

<dir>

<a>

<span>

<strong>

<em>

<b>

<i>

<u>

<s>

<small>

<mark>

<abbr>

<cite>

<q>

<code>

<kbd>

<samp>

<var>

<sub>

<sup>

<time>

<br>

<wbr>

<del>

<ins>

<bdi>

<font>

<big>

<strike>

<tt>

<acronym>

<blink>

<form>

<input>

<textarea>

<button>

<select>

<option>

<optgroup>

<label>

<fieldset>

<legend>

<datalist>

<output>

<progress>

<meter>

<table>