HTML5 new elements

New elements in HTML5

The following lists the new elements of HTML5 and their descriptions.

New semantic/structural elements

The new elements provided by HTML5 can build a better document structure:

Tag Description
<article> Define articles within the document.
<aside> Define content outside the page content.
<bdi> Define the text direction that is different from other text.
<details> Define additional details that users can view or hide.
<dialog> Define dialog or window.
<figcaption> Define the title of the <figure> element.
<figure> Define self-contained content, such as illustrations, charts, photos, code lists, etc.
<footer> Define the footer of the document or section.
<header> Define the header of the document or section.
<main> Define the main content of the document.
<mark> Define important or emphasized content.
<menuitem> Define commands/menus items that can be called from a popup menu.
<meter> Define scalar measurements within a known range (scale).
<nav> Define navigation links within the document.
<progress> Define task progress.
<rp> Define what to display in browsers that do not support ruby annotations.
<rt> Define the explanation/sound of characters (for East Asian fonts).
<ruby> Define ruby annotations (for East Asian fonts).
<section> Define sections in the document.
<summary> Define the visible title of the <details> element.
<time> Define date/time.
<wbr> Define possible line breaks (line-break).

Read more about HTML5 semanticContent.

New form elements

Tag Description
<datalist> Define the predefined options for input controls.
<keygen> Define the key pair generator field (for forms).
<output> Define the calculation result.

Read more about HTML Form ElementsNew, old and old elements in Chinese.

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 HTML Input Typesof all new and old input types.

Learn HTML Input Attributesof all input attributes.

HTML5 - New Attribute Syntax

HTML5 allows four different attribute syntaxes.

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

Tag Description
Empty <input type="text" value="Bill Gates" disabled>
Unquoted <input type="text" value=Bill>
Double-quoted <input type="text" value="Bill Gates">
Single-quoted <input type="text" value='Bill Gates'>

In HTML5, all four syntaxes may be used according to the requirements of the attributes.

HTML5 Images

Tag Description
<canvas> Define image drawing using JavaScript.
<svg> Define image drawing using SVG.

Read more about HTML5 Canvas Content.

Read more about HTML5 SVG Content.

New Media Elements

Tag Description
<audio> Define sound or music content.
<embed> Define containers for external applications (such as plugins).
<source> Define sources for <video> and <audio>.
<track> Define tracks for <video> and <audio>.
<video> Define video or movie content.

Read more about HTML5 VideoContent.

Read more about HTML5 AudioContent.