Complete list of HTML tags

  • By Christopher Kielty, last updated September 07, 2016
  • Filed under: HTML

Here it is. The complete list of HTML tags. Up to date for HTML5. Older, less useful tags have been removed from this list. Other tags, like <b> and <i>, have been updated to reflect their new meanings. Each tag is followed by a brief description of what it does. Think of this as an HTML cheat sheet.

My intention when writing this article was to provide a quick and easy to understand description of each HTML tag. I believe some of these could use a little more explaining. Expect regular updates to this article along with separate articles on each tag.

<!– –>: Comment. Anything between <!-- and --> will be commented out.

<!DOCTYPE>: Specifies which version of HTML is being used.

<a>: The “a” is short for “anchor,” which is more commonly known as a “hyperlink,” or just a “link”. To make an actual link using the <a> tag, use the href attribute: <a href=”http://eastmanreference.com”>EASTMAN REFERENCE</a>

<abbr>: “Abbr” is short for “abbreviation”. Use with the title attribute like so: <abbr title=”Cascading Style Sheets”>CSS</abbr>

<address>: Contact information for the author. Alternatively, this could be general contact information for the website.

<area>: Establishes areas in an image map. <area> is always used inside of <map>.

<article>: The <article> tag is new in HTML5. This tag can be used to contain blog entries, forum posts, etc.

<aside>: New to HTML5. The <aside> tag can be used for a sidebar that is placed next to the main content.

<audio>: New in HTML5. The <audio> tag can be used to place an audio stream within an HTML document.

<b>: Makes text bold. Perhaps better alternatives are <em>, <strong>, <h4>, etc.

<base>: Use to set a base URL.

<bdi>: Short for bidirectional isolation. Useful for working with languages that use right to left text.

<bdo>: Short for Bidirectional Override. Use this to override the current direction of text. Useful for languages that use right to left text.

<blockquote>: For quoting from an external source. Typically rendered as indented text.

<body>: Establishes the body of an HTML document.

<br>: Single line break. Think of “br” as short for “break.”

<button>: Specifies button that can be clicked. Commonly used with forms.

<canvas>: Used for rendering graphics on the fly. Typically used in conjunction with a scripting language.

<caption>: Must be inserted just after <table>. Specifies a caption for the table.

<cite>: Used for citations.

<code>: Use for code examples. (HTML, for example)

<col>: Define properties of a specific <col> within a <colgroup>

<colgroup>: Essentially a group of columns.

<data>: Used for specifying script friendly data.

<datalist>: New in HTML5. Specify predefined data for an <input>.

<dd>: Description list. Use with <dt> and <dl>.

<del>: Mark text as deleted without actually deleting it. This will typically be rendered as a strikethrough.

<details>: New in HTML5. Can be used for additional details which can be hidden or revealed.

<dfn>: Use when first defining a term.

<dialog>: Dialog box.

<div>: Division within an HTML document.

<dl>: Description list. Use with <dd> and <dt>.

<dt>: Description list. Use with <dd> and <dl>.

<em>: Emphasis. Typically renders as italics. For something stronger, try <strong>.

<embed>: New in HTML5. A container for external content.

<fieldset>: Group related items in a form.

<figure>: Define self contained content such as photos or diagrams.

<footer>: The footer of a document, below the main content.

<form>: Forms for user input.

<h1>: Level 1 heading.

<h2>: Level 2 heading.

<h3>: Level 3 heading.

<h4>: Level 4 heading.

<h5>: Level 5 heading.

<h6>: Level 6 heading.

<head>: The head section. Used mostly for metadata.

<header>: Not to be confued with <head>, <header> typically contains introductory content and layout that goes above the body.

<hgroup>: Used for grouping <h1>, <h2>, <h3>, etc., tages together. Useful for multilevel headings.

<hr>: This can be used for seperating text within a paragraph. Typically renders as a horizontal line running across the page.

<html>: The root level tag of an HTML document. All other HTML tags go inside the HTML tag.

<i>: In HTML 4, the <i> tag simply rendered text as italics. In HTML5, is intended for sections of text that are different from the normal flow (voice, mood) of the main content. Although browsers typically render this as italicized text, <i> should not be used to for emphasis. Use <em> for that. Or <strong>, if you want strong emphasis.

<iframe>: Makes it possible to embed another page within a page. In HTML5 this is known as nested browsing.

<img>: Use <img> to place images within webpages. Use it with the src attribute like so: <img src=”image.png”>

<input>: Input is used with various attributes to create form input elements.

<ins>: Useful for denoting text that has been added to an HTML file since the original version. Updates to a blog post for example. This is typically rendered as underlined text, although this can really be rendered just about any way you want with a stylesheet.

<kbd>: Used for keyboard input. This is different from form element text input.

<keygen>: Used for authentication with a security certificate.

<label>: For assigning labels to interface elements such as forms.

<legend>: Useful for making forms easier to understand.

<li>: This represents a list item with an <ol> (ordered list) or <ul> (unordered list).

<link>: Used for linking to external resources. Typically seen in <head> referring to an external style sheet. Different from the <a> (anchor) tag.

<main>: New to HTML5. These tags enclose the main content of an HTML document.

<map>: Used when defining an image map.

<mark>: This is essentially used for highlighting. Of course, whether or not highlighting is actually involved depends on the involved stylesheet.

<menu>: Used for creating various kinds of menus. This is new to HTML 5.1.

<menuitem>: Specify actions that can be taken with a menu.

<meta>: Used for specifying various meta information about the document. Meta tags are used within the document <head>.

<meter>: Used to represent a number when the minimum and maximum is known (ie. 10%).

<nav>: Used for specifying a navigational region within a document.

<noscript>: For anyone using scripts within their pages, <noscript> is useful for specifying content that should be rendered when scripting isn’t supported.

<object>: For embedding objects within a document.

<ol>: Ordered list (1. 2. 3.). Use with <li> (list item).

<optgroup>: Useful for helping users understand a various options.

<option>: Used within the <select> tag to specify an option.

<output>: Displays the output of an action, such as from a script or form.

<p>: Paragraph. Enclose paragraphs in an article within <p> tags.

<param>: Used when parameters need to be passed to an object embedded within the document.

<pre>: For preformatted text. This can be useful for displaying code within a web page.

<progress>: Can display the progress of an action, such as with a script.

<q>: Quotation from an external source.

<rb>: Used for Ruby annotation.

<rp>: Specify text to be displayed when ruby annotations are not supported by the browser.

<rt>: Text component of a ruby annotation.

<rtc>: RTS stands for Ruby Text Container.

<ruby>: For roby annotations.

<s>: Marks text that is not longer relevant, applicable, or accurate.

<samp>: Sample output one might get from a particular computer program.

<script>: Scripts inside of an HTML document are enclosed in the script tags.

<section>: A nonspecific means of breaking up content within a webpage into sections.

<select>: Used with <option> for selecting a particular option.

<small>: Typically used for small print. Useful for comments within the main cotent.

<source>: Used with <audio> and <video> for specifying media source.

<span>: Useful for applying styles to or around text, especially inline.

<strong>: The enclosed text is of strong importance.

<style>: For declaring style sheets within a document.

<sub>: For displaying subscript. Useful for math, especially in conjunction with <sup> (superscript).

<summary>: Used in conjunction with the <details> tag for specifying a summary.

<sup>: For displaying superscript. Useful for math, especially in conjunction with <sub> (subscript).

<table>: For making tables in an HTML page.

<tbody>: Groups table rows.

<td>: Stands for table data; this represents a data cell within a table.

<template>: Declares HTML snippets that can be used later.

<textarea>: For multi-line text entry.

<tfoot>: Table footer.

<th>: Table header cell.

<thead>: Table header row.

<time>: Specifies the date/time within a document.

<title>: The title of an HTML document.

<tr>: A row within a table.

<track>: Used to specify text tracks with <audio> and <video>.

<u>: Useful for annotating text for various reasons. No longer specifically for underlining, although you can of course still do that with CSS.

<ul>: Unordered list. Use with <li> (list item) to make unordered lists.

<var>: Defines a variable within the content of an HTML page.

<video>: For embedding video within an HTML page.

<wbr>: Specifies line wrapping preferences for specific areas of text.