HTML Tags Reference
Complete HTML5 tags list with descriptions.
93 tags β click a tag to copy its name.
| Tag | Description | Example |
|---|---|---|
<!DOCTYPE> | Defines the document type | <!DOCTYPE html> |
<html> | Root element of an HTML page | <html lang="en"> |
<head> | Container for metadata | <head>...</head> |
<title> | Defines the document title shown in browser tab | <title>Page Title</title> |
<body> | Contains the visible page content | <body>...</body> |
<meta> | Defines metadata about the document | <meta charset="UTF-8"> |
<link> | Links to external resources (CSS, icons) | <link rel="stylesheet" href="style.css"> |
<script> | Embeds or references JavaScript | <script src="app.js"></script> |
<style> | Embeds CSS styles | <style>body { margin: 0; }</style> |
<base> | Base URL for all relative URLs in the page | <base href="https://example.com/"> |
<h1>β<h6> | Heading levels 1 through 6 | <h1>Page Title</h1> |
<p> | Paragraph | <p>Paragraph text.</p> |
<br> | Line break | Line one<br>Line two |
<hr> | Thematic break (horizontal rule) | <hr> |
<pre> | Preformatted text (preserves whitespace) | <pre> code here </pre> |
<blockquote> | Long block quotation from another source | <blockquote cite="url">Quote</blockquote> |
<q> | Short inline quotation | <q>Short quote</q> |
<abbr> | Abbreviation or acronym | <abbr title="World Health Organization">WHO</abbr> |
<address> | Contact information for the article or page | <address>Email: contact@example.com</address> |
<cite> | Title of a cited creative work | <cite>Hamlet</cite> |
<code> | Inline code fragment | <code>console.log()</code> |
<dfn> | Term being defined | <dfn>HTML</dfn> is a markup language. |
<kbd> | Keyboard input | Press <kbd>Ctrl+C</kbd> |
<samp> | Sample output from a program | <samp>Error 404</samp> |
<var> | Variable in math or programming | <var>x</var> = 5 |
<sub> | Subscript text | H<sub>2</sub>O |
<sup> | Superscript text | E = mc<sup>2</sup> |
<mark> | Highlighted/marked text | <mark>important</mark> |
<del> | Deleted text | <del>old text</del> |
<ins> | Inserted text | <ins>new text</ins> |
<small> | Small print or side comments | <small>Terms apply</small> |
<strong> | Strong importance (bold) | <strong>Important</strong> |
<em> | Emphasized text (italic) | <em>emphasis</em> |
<b> | Bold text (stylistic, no extra importance) | <b>bold</b> |
<i> | Italic text (stylistic, or technical terms) | <i>italic</i> |
<u> | Underlined text | <u>underline</u> |
<s> | Strikethrough text (no longer accurate) | <s>old price</s> |
<span> | Generic inline container for styling | <span class="highlight">text</span> |
<ul> | Unordered list | <ul><li>Item</li></ul> |
<ol> | Ordered (numbered) list | <ol><li>Step 1</li></ol> |
<li> | List item (in ul or ol) | <li>List item</li> |
<dl> | Description list | <dl><dt>Term</dt><dd>Definition</dd></dl> |
<dt> | Term in a description list | <dt>HTML</dt> |
<dd> | Description in a description list | <dd>HyperText Markup Language</dd> |
<a> | Hyperlink | <a href="https://example.com">Link</a> |
<nav> | Navigation links section | <nav>...</nav> |
<header> | Introductory content or navigation | <header><h1>Site Title</h1></header> |
<footer> | Footer for a section or page | <footer>Β© 2025</footer> |
<main> | Main content of the document | <main>...</main> |
<article> | Self-contained composition (blog post, news) | <article>...</article> |
<section> | Thematic grouping of content | <section>...</section> |
<aside> | Content tangentially related to main content | <aside>Sidebar</aside> |
<div> | Generic block-level container | <div class="card">...</div> |
<details> | Disclosure widget (expandable) | <details><summary>More</summary>...</details> |
<summary> | Summary/caption for a details element | <summary>Show more</summary> |
<dialog> | Dialog box or window | <dialog open>Content</dialog> |
<img> | Embeds an image | <img src="photo.jpg" alt="Description"> |
<audio> | Embeds audio content | <audio src="sound.mp3" controls></audio> |
<video> | Embeds video content | <video src="movie.mp4" controls></video> |
<source> | Media source for audio/video/picture | <source src="video.webm" type="video/webm"> |
<track> | Text tracks for video/audio (subtitles) | <track kind="subtitles" src="sub.vtt"> |
<picture> | Container for multiple image sources | <picture><source srcset="img.webp"><img src="img.jpg"></picture> |
<figure> | Self-contained content with optional caption | <figure><img src="img.jpg"><figcaption>Caption</figcaption></figure> |
<figcaption> | Caption for a figure element | <figcaption>Image caption</figcaption> |
<canvas> | Drawing surface for JavaScript graphics | <canvas id="myCanvas" width="200" height="100"></canvas> |
<svg> | Inline SVG vector graphics | <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg> |
<iframe> | Embeds another HTML page | <iframe src="https://example.com"></iframe> |
<embed> | Embeds external content (plugin) | <embed src="file.pdf" type="application/pdf"> |
<object> | Embeds external resource (object) | <object data="file.pdf" type="application/pdf"></object> |
<table> | Table | <table><tr><td>Cell</td></tr></table> |
<thead> | Header rows of a table | <thead><tr><th>Col</th></tr></thead> |
<tbody> | Body rows of a table | <tbody>...</tbody> |
<tfoot> | Footer rows of a table | <tfoot>...</tfoot> |
<tr> | Table row | <tr><td>Cell 1</td><td>Cell 2</td></tr> |
<th> | Header cell | <th scope="col">Name</th> |
<td> | Data cell | <td>Content</td> |
<caption> | Table caption | <caption>Sales Data 2025</caption> |
<colgroup> | Group of table columns | <colgroup><col span="2"></colgroup> |
<col> | Table column properties | <col style="width: 50%"> |
<form> | HTML form for user input | <form action="/submit" method="POST">...</form> |
<input> | Input control (text, checkbox, radio, etc.) | <input type="text" name="username"> |
<textarea> | Multi-line text input | <textarea rows="4" name="message"></textarea> |
<button> | Clickable button | <button type="submit">Submit</button> |
<select> | Drop-down selection list | <select><option>Option 1</option></select> |
<option> | Option in a select element | <option value="1">Option 1</option> |
<optgroup> | Group of related options in select | <optgroup label="Group"><option>...</option></optgroup> |
<label> | Label for a form element | <label for="email">Email:</label> |
<fieldset> | Group of related form elements | <fieldset><legend>Personal</legend>...</fieldset> |
<legend> | Caption for a fieldset | <legend>Personal Info</legend> |
<datalist> | List of predefined options for an input | <datalist id="browsers"><option value="Chrome"></datalist> |
<output> | Result of a calculation | <output name="result">0</output> |
<progress> | Progress indicator | <progress value="70" max="100">70%</progress> |
<meter> | Scalar measurement within a range | <meter value="0.7" min="0" max="1">70%</meter> |
About This Tool
The HTML Tags Reference is a quick-access cheat sheet for all HTML5 elements. Each entry includes the tag name, a plain-English description, and a short usage example. Tags are grouped into categories β Document, Text, Lists, Links, Sections, Media, Tables, and Forms β so you can quickly find what you need.
Click any row to copy the tag name. Use the search box to find tags by name or description keyword. All content is available without an internet connection once the page is loaded.
How to Use
- Browse the table or use the search box to find a specific tag.
- Filter by category using the dropdown.
- Click any row to copy the tag name to clipboard.
- Refer to the example column to see typical usage.
Use Cases
Beginners learning HTML look up unfamiliar tags and see examples in context. Frontend developers use this as a quick reference when they can't remember whether to use <article> vs <section>, or the difference between <strong> and <b>. Code reviewers check semantic correctness of submitted HTML. Technical writers reference the forms section when documenting web forms.
FAQ
- What is the difference between <strong> and <b>? β
<strong>conveys semantic importance (screen readers emphasize it).<b>is purely presentational bold styling. - When should I use <article> vs <section>? β Use
<article>for self-contained content that makes sense on its own (a blog post, a news story). Use<section>for thematic groupings within a page that aren't independently distributable. - Are these all HTML5 tags? β Yes. Deprecated tags from HTML4 are excluded. This list covers all current HTML5 elements.