Lean, meaningful markup with HTML5

By Tom Prior

Posted on

Among the promises to lose weight, cut down on the red wine, or travel more, you may have put together some business resolutions for the new year. Perhaps in 2013 your organisation will finally take the plunge and embrace HTML5. But where to start?

The HTML5 specification encompasses all manner of exciting web technologies, but these can appear intimidating to those deciphering the benefits without technical knowledge. A great starting point for those taking their first steps happens to be the most familiar aspect of the spec: markup.

HTML has been around for some time (published specifications first appeared in 1995), and refers to the simple tags used to give structure and meaning to content on the web. Paragraphs surrounded in <p> tags, a list in a <ul> and so on – all familiar to anyone publishing on the web since the last century. HTML5 adds a host of useful new tags, allowing for even more meaningful markup around your lovely content.

The benefits

So why is markup a great place to get started with HTML5? Firstly, support is excellent across the browser landscape, and even older browsers can be encouraged to behave like their newer cousins. The new or revised HTML tags bring enhanced definition, offering your content extra semantic goodness.

Whereas more generic structural elements such as the age-old <div> gave little indication of the content encased, a host of new elements allow for more thoughtful page structure. Even previously tricky customers like audio and video with their endless formats and embed codes benefit from simplified, standardised markup in the HTML5 spec.

Lean, and meaningful

Added semantics are useful for content consumers (search engines, screen readers, or even humans), but have development benefits too. The more meaningful, readable nesting of HTML5 markup can afford more ‘hooks’ for developers to harness without adding extra weight to their code.

Leaner code can reduce loading times, another boon in an era where speed is paramount, particularly for devices where connection speed can be limited. Functionality such as form validation can now be handled through HTML alone where additional server-side scripts may have been previously required.

Ready or not?

At Makemedia we’ve been using HTML5 markup for nearly 18 months, including some of our largest projects. Although not as ground-breaking as some of the more attention-grabbing aspects of HTML5 (Graphics, Online, File Access) the new markup is reliably supported by all modern browsers. Where support is lacking, there are a number of widely used techniques to force older browsers to play nicely.

The learning curve for the new markup is relatively shallow. There’s no shortage of great resources to check you’re doing things properly, and these have been hugely helpful while the Makemedia team have been familiarising ourselves with the how best to apply the new markup.

The new standard

We’re now well practised at developing with HTML5  markup at Makemedia, and we’re not alone in using the new elements in the wild. By September 2011, 34 of Alexa’s top 100 websites were already using the new tags, a statistic which now includes the likes of Apple and Microsoft.

We’re just touching the surface of HTML5 here; Javascript API’s, offline storage, and 3D animation all offer exciting development prospects we can start using today. But as a first step to embracing HTML5, understanding and implementing the new markup is an important starting point.


If you would like to know more about what Makemedia can bring to your web project call us now 0845 017 8777 or email info@makemedia.com

Sign up to the Makemedia newsletter here.

Back to top

Leave a Reply