BEST SITE FOR WEB DEVELOPERS
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript HOW TO More 🔍 ◑ REFERENCES EXERCISES
HTML5 Lessons for beginners

Ua Es De Fr Ru

HTML5 New Elements

❮ Prev Next ❯

New Elements in HTML5

Below is a list of new HTML5 elements and a description of what they are used for.

New Semantic/Structural Elements

HTML5 introduces 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 may be formatted in a different direction from the surrounding 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
<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

Learn more about HTML5 Semantics.

New Form Elements

Tag Description
<datalist> Defines a list of pre‑defined options for input controls
<output> Defines the result of a calculation

Learn more 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 everything about old and new input types in HTML Input Types.

Learn everything about input attributes in HTML Input Attributes.

HTML5 – Syntax of New Attributes

HTML5 allows four different attribute syntaxes.

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

Type Example
Empty <input type="text" value="John" disabled>
No quotes <input type="text" value=John>
Double quotes <input type="text" value="John Doe">
Single quotes <input type="text" value='John Doe'>

In HTML5, all four syntaxes may be used, depending on what the attribute requires.

HTML5 Graphics

Tag Description
<canvas> Draws graphics on the fly using scripts (usually JavaScript)
<svg> Draws scalable vector graphics

Learn more about HTML5 Canvas.

Learn more about HTML5 SVG.

New Media Elements

Tag Description
<audio> Defines sound content
<embed> Defines a container for external (non‑HTML) applications
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie

Learn more about HTML5 Video.

Learn more about HTML5 Audio.

❮ Prev Next ❯