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 a document |
| <aside> | Defines content aside from the page content |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <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 |
| <footer> | Defines a footer for a document or section |
| <header> | Defines a header for a document or section |
| <main> | Defines the main content of a document |
| <mark> | Defines marked/highlighted text |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <progress> | Represents 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 a 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> | Specifies a list of pre-defined options for input controls |
| <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> | Draw graphics, on the fly, via scripting (usually JavaScript) |
| <picture> | Defines a container for multiple image resources |
| <svg> | Draw scalable vector graphics |
Read more about HTML5 Canvas.
Read more about HTML5 SVG.
New Media Elements
| Tag | Description |
|---|---|
| <audio> | Defines sound content |
| <embed> | Defines a container for an external (non-HTML) application |
| <picture> | Defines a container for multiple image resources |
| <source> | Defines multiple media resources for media elements (<video> and <audio>) |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <video> | Defines video or movie |
Read more about HTML5 Video.
Read more about HTML5 Audio.
