HTML 5 Tags, Tips and Tricks

The HTML5 spelled without spaces is new HTML. It is also referred as WHATWG (Web Hypertext Application Technology Working Group), and their focus is the development of HTML and APIs for web applications. The new HTML5 extends HTML/XHTML with new semantically rich elements. It deprecates not required attributes, introduce some new attributes and also alteri some element and attributes.

It also introduces a number of APIs for making it easier to create web applications:

  • API for playing of video and audio content.
  • API for offline Web applications.
  • API that allows Web application to register itself for certain protocols and media types.
  • 2D drawing API with the canvas element.
  • Editing API in combination with a new global contenteditable attribute.
  • Drag & drop API in combination with a draggable attribute.
  • API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Cross-document messaging with postMessage.

One can safely use HTML 5 tags in web page and style them in CSS just as if they are a traditional HTML 4 tag, no problem.

Below is a list of the new tags introduced in HTML 5

<article> - intended for the content section of the web page.

<aside> - for content aside from the primary content stream such as a flyover or a sidebar.

<audio> - including audio files in the web page as an element.

<bb> - tag to indicate browser commands.

<canvas> - tag containing graphic information to for browsers to render vector images in real-time after loading the canvas data, much like SVG.

 

<datagrid> - used to define a datagrid which is just a representation of tree, list or tabular data that is interactive.

<details> - containing extra information that can be shown or hidden upon user demand.

<datalist> - specifies a pre-entered list of options that can be used as an auto complete feature of the form.

<command> - definition of a specific action the user can invoke via the interface controls such as a push button or clickable link.

 

<dialog> - HTML tag specifically designed for dialog content between several entities such as people.

<eventsource> - representing a target for events generated by the remote server.

<figure> - used mainly for illustrative content such as a diagram, a graph, a photo or other forms of annotations.

 

<header> - much like the

tag, it lives as the header section of the web page.

<mark> - used to emphasize, mark or highlight content such as a string of text for reference purposes.

<meter> - intended for measurable numeric results:

<nav> - semantic tag for the navigational section of a web page such as a menu.

<output> - representing the output part of something such as a script, a programming function or a calculation.

<progress> - semantic tag for the representation of progress of a task, for example, in the form of a progress bar.

<video> - just like <audio>, it represents a video in the HTML page.

<section> - semantic representation of section of the content.

<source> - used to specify the source of various media types for either

<time> - containing the date or time information in the web page.

<footer> - semantic tag specifically designed for the page footer, can be seen as something like <div id="footer">.

HTML5 standard for Internet Explorer 9