# HTML5 New Elements

« Previous
Next Chapter »

## 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 4 different syntaxes for attributes.

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

Type | Example
--- | ---
Empty | <input type="text" value="John Doe" 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 4 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.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples