Elements of HTML5

HTML5 includes new elements for better structure, drawing, media content, and better form handling.

HTML5 provides for better structure new elements:

Tag	Description
<article> -	Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site.
<aside> -	For content aside from the content it is placed in. The aside content should be related to the surrounding content
<bdi> -	For text that should not be bound to the text-direction of its parent elements
<command> -	A button, or a radiobutton, or a checkbox
<details> -	For describing details about a document, or parts of a document
<summary> -	A caption, or summary, inside the details element
<figure> -	For grouping a section of stand-alone content, could be a video
<figcaption> -	The caption of the figure section
<footer> -	For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header> -	For an introduction of a document or section, could include navigation
<hgroup> -	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark> -	For text that should be highlighted
<meter> -	For a measurement, used only if the maximum and minimum values are known
<nav> -	For a section of navigation
<progress> -	The state of a work in progress
<ruby> -	For ruby annotation (Chinese notes or characters)
<rt> -	For explanation of the ruby annotation
<rp> -	What to show browsers that do not support the ruby element
<section> -	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time> -	For defining a time or a date, or both
<wbr> -	Word break. For defining a line-break opportunity.

 

HTML5 provides a new standard for media content:

Tag	Description
<audio> -	For multimedia content, sounds, music or other audio streams
<video> -	For video content, such as a movie clip or other video streams
<source> -	For media resources for media elements, defined inside video or audio elements
<embed> -	For embedded content, such as a plug-in
<track> -	For text tracks used in mediaplayers

 

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag	Description
<canvas> -	For making graphics with a script

 

HTML5 provides new Input Type Attribute Values

Also, the input element's type attribute has many new values, for better input control before sending it to the server:

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field
url	The input value is a URL
email	The input value is one or more email addresses
datetime	The input value is a date and/or time
date	The input value is a date
month	The input value is a month
week	The input value is a week
time	The input value is of type time
datetime-local	The input value is a local date/time
number	The input value is a number
range	The input value is a number in a given range
color	The input value is a hexadecimal color, like #FF8800
placeholder	Specifies a short hint that describes the expected value of an input field

HTML5 provides more form elements

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script