HTML5 Tag list

Below is a list of the tags (or elements) supported in HTML5. This list is generally based on the W3C HTML5 specification, but may also include elements that are only in the WHATWG HTML Living Standard. For an explanation of the differences between the WHATWG and the W3C versions of HTML,

Many tag also are in the html4 and earlier specification which is why the new html5 tags have been identified. HTML5 syntax rules are broadly documented at the bottom of the document

TagDescriptionNew in HTML5?
<!–…–>Specifies a comment
<!DOCTYPE>Specifies the document type
<a>Specifies a hyperlink
<abbr>Specifies an abbreviation
<address>Specifies an address element
<area>Specifies an area inside an image map
<article>Specifies an article
New
<aside>Specifies content aside from the page content
New
<audio>Specifies sound content
New
<b>Specifies bold text
<base>Specifies a base URL for all the links in a page
<bdi>For bi-directional text formatting
New
<bdo>Specifies the direction of text display
<blockquote>Specifies a long quotation
<body>Specifies the body element
<br>Inserts a single line break
<button>Specifies a push button
<canvas>Define graphics
New
<caption>Specifies a table caption
<cite>Specifies a citation
<code>Specifies computer code text
<col>Specifies attributes for table columns
<colgroup>Specifies groups of table columns
<data>Allows for machine-readable data to be provided
New
<datalist>Specifies an “autocomplete” dropdown list
New
<dd>Specifies a definition description
<del>Specifies deleted text
<details>Specifies details of an element
New
<dfn>Defines a definition term
<dialog>Specifies that part of an application is interactive.
<div>Specifies a section in a document
<dl>Specifies a definition list
<dt>Specifies a definition term
<em>Specifies emphasized text
<embed>Specifies external application or interactive content
New
<fieldset>Specifies a fieldset
<figcaption>Specifies caption for the figure element.
New
<figure>Specifies a group of media content, and their caption
New
<footer>Specifies a footer for a section or page
New
<form>Specifies a form
<h1>Specifies a heading level 1
<h2>Specifies a heading level 2
<h3>Specifies a heading level 3
<h4>Specifies a heading level 4
<h5>Specifies a heading level 5
<h6>Specifies a heading level 6
<head>Specifies information about the document
<header>Specifies a group of introductory or navigational aids, including hgroup elements
New
<hgroup>Specifies a header for a section or page.NOTE: This element has been dropped from W3C HTML5 spec but it is still included in WHATWG Living Standard.
New
<hr>Specifies a horizontal rule
<html>Specifies an html document
<i>Specifies italic text
<iframe>Specifies an inline sub window (frame)
<img>Specifies an image
<input>Specifies an input field
<ins>Specifies inserted text
<kbd>Specifies keyboard text
<keygen>Generates a key pair
New
<label>Specifies a label for a form control
<legend>Specifies a title in a fieldset
<li>Specifies a list item
<link>Specifies a resource reference
<main>Specifies the main content area of an HTML document.
New
<map>Specifies an image map
<mark>Specifies marked text
New
<menu>Specifies a menu list
HTML 5.1
<menuitem>Specifies a command that a user can invoke from a popup menu.
HTML 5.1
<meta>Specifies meta information
<meter>Specifies measurement within a predefined range
New
<nav>Specifies navigation links
New
<noscript>Specifies a noscript section
<object>Specifies an embedded object
<ol>Specifies an ordered list
<optgroup>Specifies an option group
<option>Specifies an option in a drop-down list
<output>Specifies some types of output
New
<p>Specifies a paragraph
<param>Specifies a parameter for an object
<pre>Specifies preformatted text
<progress>Specifies progress of a task of any kind
New
<q>Specifies a short quotation
<rb>Marks the base text component of a ruby annotation.
New
<rp>Used for the benefit of browsers that don’t support ruby annotations
New
<rt>Specifies the ruby text component of a ruby annotation.
New
<rtc>Marks a ruby text container for ruby text components in a ruby annotation.
New
<ruby>Specifies a ruby annotation (used in East Asian typography)
New
<s>Indicates text that’s no longer accurate or relevant.
<samp>Specifies sample computer code
<script>Specifies a script
<section>Specifies a section
New
<select>Specifies a selectable list
<small>Specifies small text
<source>Specifies media resources
New
<span>Specifies a section in a document
<strong>Specifies strong text
<style>Specifies a style definition
<sub>Specifies subscripted text
<summary>Specifies a summary / caption for the <details> element
New
<sup>Specifies superscripted text
<table>Specifies a table
<tbody>Specifies a table body
<td>Specifies a table cell
<template>Declares HTML fragments that can be cloned and inserted in the document by script.
New
<textarea>Specifies a text area
<tfoot>Specifies a table footer
<th>Specifies a table header
<thead>Specifies a table header
<time>Specifies a date/time
New
<title>Specifies the document title
<tr>Specifies a table row
<track>Specifies a text track for media such as video and audio
New
<u>Specifies text with a non-textual annotation.
<ul>Specifies an unordered list
<var>Specifies a variable
<video>Specifies a video
New
<wbr>Specifies a line break opportunity for very long words and strings of text with no spaces.
New

SRC: http://www.quackit.com/html_5/tags/

HTML5 Syntax or coding rule

Closing your tags

Generally all of these HTML elements have opening and closing tags, and that the content of the element is placed in between them. The closing tag is slightly different to the opening tag – the closing tag contains a forward slash (/) after the <. This tells the browser that this tag closes the previous one.

There are a few exceptions to this rule such as the <br> tag which for best practise should be self closing and should be written as <br/>.

Tag Order

When you nest tags/html elements you must nest them completely in that the first one opened should be the last one closed. as per the example below:

<header>
<h1>
<span> my header
</span>
</h1>
</header>

NOT

<header>
<h1>
<span> my header
  </h1>
   </span>
</header>

Indenting your hand written code

Indentation has no bearing on how the page is rendered, but it has a huge effect on the readability of the code. Standard procedure is to indent one tab (or a few spaces) when you are starting a new element that is a child element of the tag above it. Then move back in a tab when you are closing that element.

UPPERCASE or lowercase?

You can use uppercase or lowercase when coding HTML5, however, most developers use lowercase. This helps the readability of your code, and it also saves you from constantly switching between upper and lower case.

Click here to download a printable version of this html5 table

update:Self-Closing Elements

Common selfclosing elements include

  • <br />
  • <embed.../>
  • <hr />
  • <img />
  • <input../>
  • <link../>
  • <meta../>
  • <param../>
  • <source../>