What's New in HTML 5

Web Application Creators Build Better Web Apps with HTML 5

HTML 5 - Wooden Mannequin demonstrating this word
Kerstin Waurick / Getty Images

HTML 5 adds a lot of new features to the HTML specification, and it is easy it is to implement. You use the HTML 5 doctype, which is simple and streamlined:

<!doctype html>

Yes, that's it. Just two words "doctype" and "html." It can be this simple because HTML 5 is no longer part of SGML but is instead a markup language all on its own.

The character set for HTML 5 is streamlined as well. It uses UTF-8, and you define it with just one meta tag:

<meta charset="UTF-8">

HTML 5 New Structure

HTML 5 recognizes that webpages have a structure, just like books and other XML documents have a structure. In general, webpages have navigation, body content, sidebar content, headers, footers, and other features. HTML 5 has tags to support those elements of the page. They are:

  • <section> defines sections of pages.
  • <header> defines the header of a page.
  • <footer> defines the footer of a page.
  • <nav> defines the navigation on a page.
  • <article> defines the article or primary content on a page.
  • <aside> defines extra content like a sidebar on a page.
  • <figure> defines images that annotate an article.

HTML 5 New Inline Elements

The new inline elements define some basic concepts and keep them semantically marked up:

  • <mark> indicates content that is marked in some fashion.
  • <time> indicates content that is a time or date.
  • <meter> indicates content that is a fraction of a known range such as disk usage.
  • <progress> indicates the progress of a task towards completion.

HTML 5 New Dynamic Pages Support

HTML 5 was developed to help web application developers, so there are a lot of new features that make it easy to create dynamic HTML pages:

  • Context menus – HTML 5 supports the creation and use of context menus within webpages and applications.
  • href is not required on a tag. This allows you to use a tag with scripts and in web applications without needing a place to send that anchor.
  • async attribute – This is added to the script tag to tell the browser that the script should be loaded asynchronously so that it doesn't slow down the load and display of the rest of the page.
  • <details> – This provides details about an element. This would be like tooltips in non-web applications.
  • <datagrid> creates a table that is built from a database or other dynamic source.
  • <menu> is an old tag brought back and given new life allowing you to create a menu system on your webpages.
  • <command> defines actions that should happen when a dynamic element is activated.

HTML 5 New Form Types

HTML 5 supports all the standard form input types, but it adds a few more:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

HTML 5 New Elements

There are a few exciting new elements in HTML 5:

  • <canvas> – This element gives you a drawing space in JavaScript on your webpages. It can add images or graphs to tooltips or create dynamic graphs on your webpages, built on the fly.
  • <video> – Add video to your webpages with this simple tag.
  • <audio> – Add sound to your webpages with this simple tag.

HTML 5 Removes Some Elements

Some elements in HTML 4 are no longer be supported by HTML 5. Most are already deprecated and shouldn't be surprising. They are:

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u