1. Technology

New Tags in HTML 5

These Tags were Not In HTML 4 in Any Form


HTML 5 brings a lot of changes to the HTML specification. For one thing, the doctype is much easier to remember:

<!doctype html>

But aside from that, HTML 5 brings in 25 new tags to help build your websites. Some of these tags are a long time coming to HTML, and others are a bit complicated. But they all serve a purpose.

Layout Tags

The new layout tags in HTML 5 allow you to define sections of your Web page as layout areas without needing a div tag to define them. Your header is surrounded by the header tag, and your navigation is surrounded by the nav tag. Use these tags just like you would a div tag for your layout - only now they are named for you, so you don't need an id unless you want one.

  • article - the main content of the page
  • aside - extra content
  • figure - peripheral content with caption
  • footer - the footer of the page
  • header - the header of the page
  • nav - the page navigation
  • section - any section or portion of the page

Multimedia Content

HTML 5 is attempting to make video and audio easier to add to Web pages. One of the ways that it is doing that is by providing specific tags for audio, video, and the source files.

  • audio - denoting an audio stream
  • source - the video or audio source files
  • video - denoting a video stream

Web Applications and Ajax or DHTML

HTML 5 adds some tags into the language specifically for Web applications, Ajax, and DHTML. These tags give more hooks to your scripting languages and provide a framework for the browsers to deliver the application data.

  • canvas - a place to draw dynamic graphics
  • command - denotes a command button that has information sent to the server or script
  • datagrid - references dynamic data in a tree form or tabular data form
  • datalist - references a list of data in a drop-down list
  • details - provides additional details of a page element, like pop-up help text
  • output - references the output of a script or calculation
  • progress - represents a progress bar in the completion of a process

Ruby Annotations

"Ruby" are short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation. HTML 5 provides access to ruby through three tags:

  • rp - Ruby parenthesis for user-agents that can't handle ruby
  • rt - Ruby text, the text of the annotation
  • ruby - the span of ruby annotation

Other New Tags

There are also some new tags that help you mark up your HTML more effectively. These help the browsers know exactly what different elements on the page are.

  • dialog - a conversation or people talking
  • hgroup - a grouping of header tags that should stay together
  • mark - text that has been marked for reference purposes
  • meter - a scalar gauge of measurement
  • time - a date or time

Read about all the HTML 5 tags, including the old and new tags, in my HTML 5 Reference.

©2014 About.com. All rights reserved.