New Elements in HTML5

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:

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

TagDescription
<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 TypesNew 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 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:

TypeExample
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

TagDescription
<canvas>Draw graphics, on the fly, via scripting (usually JavaScript)
<svg>Draw scalable vector graphics

Read more about HTML5 Canvas.

Read more about HTML5 SVG.


New Media Elements

TagDescription
<audio>Defines sound content
<embed>Defines a container for an external (non-HTML) application
<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

Leave a Reply

Your email address will not be published. Required fields are marked *