0%

HTML Tags List: Reference of 115 Elements with Examples

This reference covers 115 HTML elements, grouped by what they do: document and metadata, sections, text, lists, links, media, tables, forms and interactive elements. Every entry says in plain language what the element is for, lists the attributes worth knowing, gives you an example to run and adds a tip on good use and accessibility. Good places to start are a, img, form, table and the global attributes, which work on every element. To learn a tag properly, follow the lesson linked from its entry. The groups follow the official index of elements (opens in a new tab) in the HTML Living Standard.

Illustration of library shelves filled with bracket-shaped books and a reader on a ladder

Document elements

Global attributesAttributes you can put on any element: id, class, lang, title, hidden and others.<html>The root element. Every page's head and body sit inside it.<head>Metadata container for the title, charset, styles and scripts. Never displayed.<body>Everything visible on the page lives inside body.

Metadata elements

<title>Names the page in the browser tab, in bookmarks and in search results.<meta>Page metadata such as the charset, viewport and description.<link>Ties the page to external files such as stylesheets and icons.<style>Puts CSS rules straight into the page.<base>Sets the base URL and default target for all relative links on a page.

Sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.

Text elements

<p>One paragraph of text.<br>Breaks the line inside text, as in a postal address or a poem.<hr>A change of topic between paragraphs, drawn as a horizontal line.<pre>Shows text exactly as typed, spaces and line breaks included.<blockquote>A longer quotation from another source, set apart as its own block.<div>A generic block box with no meaning, for grouping and styling.<span>A generic inline wrapper with no meaning, for styling part of a line of text.<strong>Text that is important, serious or urgent. Shown in bold by default.<em>Stress emphasis that changes what a sentence means. Italic by default.<b>Makes text stand out without adding importance, as with keywords. Bold by default.<i>Text in another voice: foreign words, terms, thoughts, ship names. Italic.<u>Text with an unspoken annotation, such as a flagged spelling error.<s>Content that is no longer accurate or relevant, drawn crossed out.<mark>Highlighted text, like a marker pen, showing relevance in the current context.<small>Side comments and fine print, like copyright lines or legal notes.<sub>Subscript text, set below the line, as in H2O.<sup>Superscript text, set above the line, as in exponents or 1st.<code>A fragment of computer code, set in a monospace font.<kbd>Keys or text the user should press or type.<samp>Sample output from a program or a computer system.<var>A variable in math or in code. Italic by default.<q>A short quotation inside a sentence. The browser adds the quote marks.<cite>The title of a creative work: a book, film, song, game or article.<abbr>An abbreviation or acronym, with an optional expansion in title.<dfn>Marks the term that the surrounding sentence or paragraph defines.<time>Marks a date, time or duration and gives it a machine-readable value.<data>Ties visible content to a machine-readable value.<del>Text that was removed from the document. Struck through by default.<ins>Text that was added to the document. Underlined by default.<wbr>A spot where the browser may break a long word if it has to.<bdi>Isolates text of unknown direction, such as user names.<bdo>Forces a text direction and overrides the normal bidi algorithm.<ruby>Small annotations above or beside text, mostly for East Asian pronunciation.<rt>The small reading or note in a ruby annotation.<rp>Fallback brackets around ruby text, shown only where ruby is unsupported.

Lists elements

<ul>Bulleted list for items in no particular order.<ol>Numbered list for sequences such as steps, directions or rankings.<li>A single item in a ul, ol or menu.<dl>Pairs of terms and descriptions, such as a glossary or a set of key-value data.<dt>A term, name or question in a dl.<dd>The definition, description or value that belongs to a term in a dl.<menu>A list of commands like toolbar buttons; browsers treat it as a ul.

Links elements

<a>Links to another page, a file, an email address or a point on the same page.<area>One clickable region of an image map.

Media elements

<img>Displays an image; src and alt required.<picture>Holds several image sources and lets the browser choose one.<source>One alternative file inside picture, audio or video.<track>Adds WebVTT captions, subtitles or chapters to audio and video.<figure>A self-contained image, chart, code listing or quote, optionally captioned.<figcaption>A figure's caption, placed as its first or last child.<audio>Plays sound, like music or a podcast episode.<video>Adds a video player.<iframe>Shows another web page inside a frame on yours.<embed>Inserts external content, like a PDF, that the browser or a plugin displays.<object>Embeds an external resource and holds fallback content for it.<canvas>A bitmap surface that JavaScript draws graphics on.<svg>Vector graphics drawn right in the HTML, sharp at any size.<math>Math notation written as MathML markup.<map>Holds the clickable areas that turn an image into an image map.

Tables elements

<table>Tabular data laid out in rows and columns.<caption>A table's title, written as the table's first child.<colgroup>Groups table columns so you can style them as one.<col>Stands for one or more columns in a colgroup, for styling.<thead>Wraps the header row or rows of a table.<tbody>Wraps the main rows of data in a table.<tfoot>Holds summary rows such as totals at the foot of a table.<tr>A single table row of cells.<th>Header cell for a column or row, shown bold and centered by default.<td>A normal data cell inside a table row.

Forms elements

<form>Wraps the controls whose values get sent to a server.<label>Names a form control; clicking the label focuses the control.<input>All-purpose form control; type picks text, email, number, checkbox, date and more.<button>A button that submits a form, resets it or runs some command.<select>A drop-down menu of options.<option>A single choice in a select, datalist or optgroup.<optgroup>Puts related options in a select under one label.<textarea>A multi-line field for longer input such as messages.<fieldset>Groups related form controls and names them with a legend.<legend>Names a fieldset and must come first inside it.<datalist>Suggested values for an input; people can still type whatever they like.<output>Displays the result of a calculation or a user action.<progress>Shows how far along a task is, like a file download.<meter>A gauge for a value inside a known range, such as battery level.

Interactive elements

<details>A box that expands and collapses to reveal more content, with no JavaScript.<summary>The clickable label of a details element, always on show.<dialog>A dialog box or a modal window.

Scripting elements

<script>Runs or loads JavaScript.<noscript>Content that appears only when JavaScript is off or unavailable.<template>Inert HTML that the page does not render, kept for scripts to clone.<slot>Marks the spot in a web component where outside content gets inserted.

Frequently asked questions

How many HTML tags are there?

A little over 110 elements in the current HTML standard. This reference has 115 entries, counting the global attributes. A beginner gets through most pages with about 30 of them: the page skeleton, headings, paragraphs, lists, links, images, semantic sections, tables and form controls. For quick lookups and code generators, the interactive HTML cheat sheet at htmlcheatsheet.com (opens in a new tab) puts the everyday tags on one page.

What are void elements in HTML?

Elements that cannot hold content and so never get a closing tag. The void elements (opens in a new tab) you will meet most are <img>, <br>, <hr>, <input>, <meta> and <link>. A slash, as in <br />, is allowed but optional, and it changes nothing in HTML. A closing tag such as </img> is always wrong.

What are global attributes?

Attributes that work on any HTML element. The ones you will use most are id, class, style, title, lang and hidden. An id gives one element a unique name that links and labels can point to. A class puts elements into a group for CSS. The full list with examples is on the global attributes page.