HTML5 in 24 Hours

Learn the New HTML5 Elements

· 3 min read

One of the first things you want to learn when you start learning HTML5 are the new elements. There are several new HTML5 elements to add new features and functionality to HTML5.

New HTML5 Elements

Document Metadata

  • meta charset
    This is a new, shortened form of the character set meta data. It was added to the specification because web designers were writing the original character set meta tag incorrectly and browsers were supporting it.

Sections

  • section
    A discrete section of the document.
  • nav
    Navigation.
  • article
    An article or page section that could be syndicated.
  • aside
    A page section that is tangentially related to either the current page or the site as a whole.
  • hgroup
    A group of headings.
  • header
    The header information for a section or page.
  • footer
    The footer information for a section or page.

Grouping Content

  • figure
    Content that is self-contained and referenced as a single unit within the flow of the page.
  • figcaption
    A caption for a figure.

Text-level Semantics

  • data
    Contents that have a machine-readable format that is defined in the value attribute.
  • time
    A date or time with a machine-readable format defined in the datetime attribute.
  • mark
    A block of text that is highlighted for some purpose beyond the context of the current page.
  • ruby
    Ruby annotation used in some double-byte languages.
  • rt
    Ruby text.
  • rp
    Ruby parenthesis.
  • bdi
    A span of text separate from the page contents for bi-directional formatting.
  • wbr
    A line break opportunity.

Embedded Content

  • embed
    The insertion point for embedded content.
  • video
    An embedded video with it’s associated source files and language tracks.
  • audio
    An embedded audio file with it’s associated source files.
  • source
    Source file for embedded video or audio.
  • track
    Supplementary tracks for captioning or secondary audio tracks on videos.
  • canvas
    A scriptable bitmap area for creating images and animations on a web page.

Forms

  • input type=search
    A search box text field.
  • input type=tel
    A telephone number input field.
  • input type=url
    A URL input field.
  • input type=email
    An email address input field.
  • input type=datetime
    A date and time input field.
  • input type=date
    A date input field.
  • input type=month
    A month input field.
  • input type=week
    A week of the year input field.
  • input type=time
    A time input field.
  • input type=datetime-local
    A local date and time input field.
  • input type=number
    A number input field.
  • input type=range
    An inexact number input field.
  • input type=color
    A color input field.
  • datalist
    A list of pre-defined options for an input field.
  • keygen
    A key pair generator control.
  • output
    Scripted form output.
  • progress
    The completed progress of a task.
  • meter
    A scalar value within a known range.

Interactive Elements

  • details
    An element where the user can get additional information.
  • summary
    A caption or legend explaining the parent details element.
  • command
    A command that the user can invoke.
  • menu
    A list of commands.
  • dialog
    A part of an application that the user interacts with such as a dialog box.