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 |
---|---|
|
|
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.