Select Page

Although in it’s early stages of development, it’s worth considering HTML5 when building your website.  The big four browsers (Safari, Explorer, Firefox and Chrome) are already using HTML5 so it seems pretty safe to use HTML5 tags on your website.

The language introduces several new tags but at the same time has made some others obsolete. While HTML4.01 and other earlier  versions have great backwards compatibility, old tags should be replaced with their HTML5 equivalents.

Without out the need to recode existing sites you should however stop using the following tags:

  • <frameset>
  • <frame>
  • <noframes>
  • <strike>
  • <u>
  • <font>

Most of structure for HTML4.01 remains the same but with HTML5 building on this base. It introduces  tags that simplify integration of non-textual material.  Examples of new tags are:

  • <canvas>  which provides for graphical elements, such as shapes and graphs
  • <audio>  allowing you to embed audio direct to your page
  • <video>  embeds visual content with optional controls for autoplay and looping

The <header> tag is addressed in CSS and defines the content. Search engines and aggregators will understand and can use it in place of the page title in their search results. Similarly <nav> defines a container for navigational elements.  The presentation of the navigation is not defined so it is still necessary to have a linked menu written using CSS.

The <section> tags will define start and end points of a discrete section by combining various elements on the page.  Using <section> ties together summary and paragraph. Any number of summaries can be on one page, they can then be styled together or, by direct address to the ‘footer action summary’ which is in CSS.

Tags <header> and <footer>, they were usually defined in HTML 4.01 with <div>, now save you time together with keeping the code readable and elements addressable by CSS.

Building on HTML5

Websites used the  <div> tag to mark out various content areas rather than use tables, the benefit being that a website built with <div> loads much faster than one built with tables. HTML5 code does not require descriptive names (as <div> tags did) and is, as a result, better organised, more regimented and far easier to navigate.

Generally the content of a website is mainly text (unless you are building for a graphics or photography portfolio)  HTML5 introduces <aside> and <summary> , together with highlighted text and specific time data.  It makes changes to the way bold and italic tags are used too.  The way in which text is highlighted is now formalised by the <mark> tag.

Previously in HTML4.01, how an image related to the text around it on the page didn’t exist and there was no way of knowing if anyone had looked at the underlying code e.g. search engine spider. Now in HTML5 proper links are established and the <figure> tag acts as a container for a collection of related elements.  The tag can be used to group together a block of code, a table or a <div> layer that needs its own caption.

Embedding media <embed> tag allows you to use a plug-in to play back media which will not play within the browser, without the need to point to the plugin used.  You can however, adjust height, width and media type, helping visitors to pick the appropriate plug-in to play the file. Height and width enable browsers to leave a space of the right size to hold the media while allowing the rest of the content to load. For browsers on slower connections this means the page is more likely to load correctly and reduces the chances of visitors clicking away from your site.

The <embed> tag does not require a closing tag (</embed>) but using a closing tag with <audio> and <video> allows you to specify multiple source files and  your visitor’s browser will pick the first in the list to play the file.

HTML5’s new features assist developers to build websites that provide easier loading pages while still delivering the information customers want to see and hear. The embedding of various types of media, with allowances made for slower connections, easier navigation, and sections rather than tables all make for a better customer experience. While the ability in <figure>, to group loosely related content and the <time> tag allow you to track and provide more detailed information  for  applications that scrape your code for content.