Skip to main content

blog

Websites Blog

Setting the standard

5th January 2015

At the end of October 2014, HTML5 reached recommendation status by the World Wide Web Consortium after many years of development and refinement. This means that there is now an absolute finalized standard for developers and user agent manufacturers to work from, meaning better interoperability and a more refined web experience for everyone.

It's semantics

One of HTML5's iterative improvements is that it is more semantic. This means that the mark-up used has more derivative meaning and is less generic.

For example, a very basic website structure may look like the below in HTML 4 (the previous version of the specification):

<div class="header">
  <div class="navigation">
    […]
  </div>
</div>

<div class="content">
  […]
</div>

<div class="footer">
  […]
</div>
    

Whereas now in HTML5, with its new tags:

<header>
  <nav>
    […]
  </nav>
</header>

<main>
  […]
</main>

<footer>
  […]
</footer>
    

The new syntax in HTML5 means that developers can write less cluttered code. It also means other computers can read websites better too — such as search engines and accessibility tools — so that they can easily determine what content HTML tags contain (they can't do that with class names and ID's).

Also introduced into the mark up is ARIA (Accessible Rich Internet Applications) mark-up. This enriches the document even further for screen readers by adding validated attributes.

Media Support

Along with semantic tags, the specification now introduces native support for displaying videos playing audio files using the tags <video> and <audio> respectively:

<video src="video.mp4" height="480px" width="640px" controls poster="thumbnail.jpg" >
  Fall-back content for incompatible browsers can go here.
</video>

<audio src="audio.mp3" autoplay controls>
  Fall-back content for incompatible browsers can go here.
</audio>
    

The mark-up gives clear, concise embedding of the media files using attributes to customize the output (the full list can be found here for <video> and here for <audio>).

To summarize…

HTML5 gives developers tools for creating valid, accessible mark-up for web-based applications of which we touched on a few here. Many more features include new native API's that allow drag-and-drop, file editing, offline storage and much more! All major modern browsers support the specification — with easy to manage fallbacks for older browsers — which means the truly accessible internet is here.