HTML5 New Elements

New Elements in HTML5

Below is a list of the new HTML5 elements, and a description of what they are used for.

New Semantic/Structural Elements

HTML5 offers new elements for better document structure:

Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem>  Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

Read more about HTML5 Semantics.

New Form Elements

Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Read all about old and new form elements in HTML Form Elements.

New Input Types

New Input Types New Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Learn all about old and new input types in HTML Input Types.

Learn all about input attributes in HTML Input Attributes.

HTML5 - New Attribute Syntax

HTML5 allows four different syntaxes for attributes.

This example demonstrates the different syntaxes used in an <input> tag:

Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.

HTML5 Graphics

Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG

Read more about HTML5 Canvas.

Read more about HTML5 SVG.

New Media Elements

Tag Description
<audio> Defines sound or music content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content

Read more about HTML5 Video.

Read more about HTML5 Audio.