The Fresh Egg blog

Latest digital marketing news

HTML5: Markup Levels Up

In the fourth month of our Ultimate Web Design Toolkit series, we almost find ourselves going back to basics. HyperText Markup Language (HTML) is, after all, one of the building blocks of the internet and has been ever since its original definition in the early 90s – a positively primordial period of the internet from a modern perspective. First and foremost, a web browser is an HTML interpreter. Sure, your daily browsing has your browser interacting with plenty of other languages, (many of which are doing far more exciting things on the page) but HTML is at the core of it all.

HTML’s early history was similar to its current predicament. The problem with imposing a standard on web-design has always been that no one standard can contain the imaginations of designers and the evolving content demands of the internet audience. Yet the HTML 4 standard has existed basically unchanged for more than a decade, HTML 4.01 published as a W3C Recommendation way back in 1999. It goes without saying that the internet was a very different place back then: a world with no Google Maps, no Facebook, no Youtube. Music piracy had only just been invented, your encyclopaedia was on a CD and you were expecting technology to evaporate the second the calendar flipped into the New Year.

HTML5 has been a long time coming, and many of its new additions reflect the massive differences between web content now and prior to the millennium. It is however, an old project, one that was initiated by the Web Hypertext Application Technology Working Group (WHATWG) back in 2004. Though well known in web development circles, HTML5 became more widely renowned when in early 2010 Steve Jobs gave Adobe Flash

Ringing in the Changes

HTML5 was created to bring standards to widespread multimedia support whilst also creating a markup language which is easily readable by everyone, or rather, everything that interacts with it. Designers can look at it and understand the function of each tag, and computers and devices read it and produce the same end product. More detail in markup also helps in terms of accessibility, allowing certain elements to be omitted or passed over if they’re not useful to certain users. “HTML5” actually encompasses the CSS3 and a new generation of Javascript APIs, but its chief update in markup terms involves the creation of a set of new tags / elements.

Additionally, HTML5:

  • Is more self-contained, aiding the creation of databases and offline content within a single document;
  • Is intended to be faster than its predecessors;
  • Is designed with security in mind.

The only drawback of HTML5 presently is the lack of support. Whilst any browser created in the last two years will handle the code well, any web designer will tell you that the wider market simply isn’t as keen on browser updating as we’d all like them to be. There is a solution though: Javascript libraries like modenizr and html5shiv will force compatibility on knuckle-dragging browsers.

New Structural Elements

Whereas <div> tags are deployed liberally in HTML 4.01 markup (and the tag is still valid in HTML5), HTML5 gives designers a far more descriptive way of marking up divisions in their documents. This benefits those working on code because it’s easier to work out what each element is achieving. However, by making tags more semantically obvious, browsers can interpret them more easily.

<article>

The article tag can be wrapped around each independent piece of content, such as a blog entry or news article in a document.

<article>

<img src=“image.jpg” alt=“caption”>

<h1>Where Now for Man Raised by Puffins?</h1>

<p>A 25-year-old Bristolian man was found bewildered outside the city zoo.</p>

</article>

<header> & <footer>

Both <header> & <footer> are descriptive of their intended purpose. Introductory content or navigational aids are typically put in headers, whilst footers are supposed to contain copyright information, authors, terms of use and other content typically placed at the bottom of a page.

<header>

<a href=“/”><img src=“logo.gif” alt=“The Apple Logo”></a>

</header>

<footer>

<p>Copyright © 2012</p>

</footer>

<hgroup>

When you have multiple heading tags (e.g. Sub-headings) in a group, you can wrap them in the hgroup tag.

<article>

<hgroup>

<h1>HTML Five</h1>

<h2>The Revenge of the Killer Markup</h2>

</hgroup>

</article>

<section>

The section tag can be deployed to define divisions such as chapters, but it can generally represent a generic section in much the same way as a DIV.

<section>

<h1>Puffin Man Introduced to Written Word</h1>

<p>Publishing house ‘Puffin Books’ has offered reading assistance to [...]</p>

</section>

<aside>

Any element which appears alongside an article or piece of content without being part of the linear structure of the main text is an aside. For example, a news report on a new product may contain a right-aligned info box containing a list of its technical specifications.

<p>In a news conference today, Apple announced the new iPad 4 [...]</p>

<aside>

<h4>iPad 4 Specifications</h4>

1THz “Granny Smith” Processor

</aside>

<figure>

Similar to asides, illustrations, diagrams, code snippets and photos which provide useful information but could be removed without altering the flow of the document can be wrapped in the figure tag.

<figure>

<img src=“ipad4layout.jpg” alt=“caption”>

<figcaption>A look at the internal components of the new ipad4</figcaption>

</figure>

<nav>

Large blocks of navigational links should be wrapped in nav tags. This is primarily for accessibility reasons – screen reading technology can choose to omit initial reading of this non-essential content.

<nav>

<ul>

<li><a href=“”>link</a></li>

<li><a href=“”>zelda</a></li>

</ul>

</nav>

New Tags for Media Content

HTML5 recognises the need to go beyond displaying formatted text and image files, providing markup for video and audio content, as well as providing the means to code graphical effects.

<video> & <audio>

Both Video and Audio can be wrapped in their own respective tags. Interestingly, designers can include a hierarchy of media sources. In the following example, if the device doesn’t support mp4 video, it will attempt to use ogg video instead. Providing different media options in this way allows you to cater to a wider range of devices. Any text between the tags will appear if the provided media formats cannot be played.

<video width=“300” height=“150” controls=”controls”>

<source src=“/video/video.mp4” type=video/mp4/>

<source src=“/video/video.ogg” type=video/ogg/>

Your browser doesn’t support HTML5 video

</video>

A wide range of attributes can be assigned to media content. “loop”  will cause the video to repeat endlessly, “autoplay” starts play automatically and “poster” allows the designer to specify an image to display until the play button is pressed.

<canvas>

The canvas tag provides a way of rendering graphical content via scripting (often JavaScript). From the following example you get a simple 80 by 100 pixel rectangle in red.

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

However, the possibilities for visual effects are far more exciting than this, and they technically wouldn’t require additional image files to be placed on the server.

Conclusion

HTML5’s long road to W3C recommendation is somewhat troubling, but if you’re defining the foundation of all web-coding for the foreseeable future, it pays to get it right. Fresh Egg has been working in the new standard since the creation of our new main site and we’re continually excited by the possibilities presented to us. HTML5 can only get more important for new site builds: you’ll need it to run a cutting-edge site and it stands to reason that semantic tags are going to have some significance in onsite SEO. So get ahead of the game and start dabbling today!

Further Reading



Share this post


comments powered by Disqus