HTML 5 Reference - HTML 5 Tags Alphabetically

Including old HTML elements and those new to HTML5

HTML5 logo
HTML5 introduces a number of new elements and tags.

While its development had begun many years prior, HTML5 first really started coming into common use with web designers/developers in 2010. Right out of the gate, the language felt familiar to many web professionals because instead of trying to reinvent everything from scratch, HTML5 built on what had come before. Anyone who knew HTML 4.01 quickly found that quite a bit of that version could now be found in HTML5.

While HTML5 includes many elements that have been around in HTML for awhile, it also introduced a handful of elements that were new to HTML5. For many of these new elements, an approach called "paving the cowpaths" was used. This is a term that is commonly used in IT to essentially mean to look at what people are already doing and do that. In the case of web designers, this meant to see how they were already building pages and to base decisions on new elements on those activities. For instance, many web professionals would build websites with divisions that used ID or Class attributes of "header", "nav", and "footer." As such, HTML5 introduced these as new elements, allowing web professionals to add more meaning to their documents by using dedicated sectioning elements instead of just divisions. This combination of familiarity and an approach that recognized current practices helped HTML5 to be quickly embraced by the web design industry.

The HTML5 Doctype

First off, to use any new HTML5 elements, your document must include the HTML5 doctype which is:

<!doctype html>

You may notice that this doctype does not specifically mention "HTML5", but rather simply states the version as "html". This is because this doctype is what is intended to be used going forward for all iterations of the language.

In fact, HTML5 is supposed to be the last numbered version of the language, with new changes being added on a consistent basis in the future. In fact, some of the elements in the list below have been added to the language well after that initial push in 2010!

The HTML5 Tags

TagExplanation
<a> </a>Anchor or link
<abbr> </abbr>Abbreviation
<address> </address>Address or authors of the document
<area >Client-side image map
<article></article>Article
<aside></aside>Tangential content
<audio></audio>Audio stream
<b> </b>Bold
<base>Base URI paths for elements in the document
<bdo> </bdo>Bi-directional algorithm
<blockquote> </blockquote>Long quotation
<body> </body>Body of the page
<br>Line break
<button> </button>HTML form button
<canvas></canvas>Canvas for dynamic graphics
<!-- -->Comment
<caption> </caption>Table caption
<cite> </cite>Citation
<code> </code>Code reference
<col>Table column
<colgroup> </colgroup>Table column grouping
<command>Command or action on the page
<!doctype>Document type definition
<datagrid></datagrid>Data grid
<datalist></datalist>Predefined options for other controls
<dd> </dd>Definition list description or span of discourse
<del> </del>Deleted text
<details></details>Additional on-demand information
<dfn> </dfn>Definition
<dialog></dialog>Conversation
<div> </div>Logical division
<dl> </dl>Description list
<dt> </dt>Definition list term or dialog speaker
<em> </em>Emphasis
<embed>Embedded element for plugins
<fieldset> </fieldset>Form controls group
<figcaption></figcaption>The caption used for a <figure> element
<figure></figure>Figure with optional caption
<footer></footer>Footer of the page
<form> </form>Form
<h1> </h1>First level headline
<h2> </h2>Second level headline
<h3> </h3>Third level headline
<h4> </h4>Fourth level headline
<h5> </h5>Fifth level headline
<h6> </h6>Sixth level headline
<head> </head>Head of the document
<header></header>Header of a page
<hgroup></hgroup>Heading group
<hr>Horizontal rule
<html> </html>Root element of a Web page
<i> </i>Italics text style
<iframe> </iframe>Inline frame
<img>Image
<input>Input form element
<input type="button">Button form element
<input type="checkbox">Checkbox form element
<input type="color">Color input
<input type="date">Date input
<input type="datetime">Global date and time input
<input type="datetime-local">Local date and time input
<input type="email">Email address input
<input type="file">File upload form element
<input type="hidden">Hidden form field element
<input type="image">Image form element
<input type="month">Year and month input
<input type="number">Number input
<input type="password">Password form element
<input type="radio">Radio button form element
<input type="range">Imprecise number input
<input type="reset">Reset button form element
<input type="search">Search field
<input type="submit">Submit button form element
<input type="tel">Telephone number input
<input type="text">Text field form element
<input type="time">Time input
<input type="url">URL input
<input type="week">Year and week input
<ins> </ins>Inserted text
<kbd> </kbd>Text to be entered by the user
<keygen>Generate secure keys for certificate management
<label> </label>Form label
<legend> </legend>Form fieldset caption
<li> </li>List item
<link>Link to related documents
<main> </main>Main area of content on a page
<map> </map>Client-side image map
<mark></mark>Marked or highlighted text
<menu> </menu>List of commands
<meta>Meta information about the document
<meter></meter>Scalar gauge
<nav> </nav>Define's an area with navigation links
<noscript> </noscript>Content when scripts aren't available
<object> </object>Non-standard object
<ol> </ol>Ordered or numbered list
<optgroup> </optgroup>Group of options in a select list
<option> </option>Option in a select list
<output></output>Result of a form calculation
<p> </p>Paragraph
<param>Parameter of an object element
<pre> </pre>Pre-formatted text
<progress></progress>Progress indicator
<q> </q>Short inline quotation
<rp></rp>Ruby parenthesis
<rt></rt>Ruby text
<ruby></ruby>Ruby annotation
<s> </s>Strikeout text
<samp> </samp>Sample output
<script> </script>Scripts
<section></section>Section of a page
<select> </select>Select or drop-down menu lists
<small> </small>Small font size
<source>Media source
<span> </span>Generic inline style container
<strong> </strong>Strong emphasis
<style> </style>Style sheets
<sub> </sub>Subscript
<summary> </summary>Summary of the DETAILS element contents
<sup> </sup>Superscript
<table> </table>Table
<tbody> </tbody>Table body rows
<td> </td>Table cell
<textarea> </textarea>Multi-line form element
<tfoot> </tfoot>Table footer rows
<th> </th>Table header cell
<thead> </thead>Table header rows
<time> </time>Defines time
<title> </title>Title
<tr> </tr>Table row
<ul> </ul>Unordered or buletted list
<var> </var>Variable or user defined text
<video> </video>

Video or movie embedded in page

Originally published by Jennifer Kyrin. Edited by Jeremy Girard on 8/11/16