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
- 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.
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.
The article tag can be wrapped around each independent piece of content, such as a blog entry or news article in a document.
<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>
<header> & <footer>
<a href=“/”><img src=“logo.gif” alt=“The Apple Logo”></a>
<p>Copyright © 2012</p>
When you have multiple heading tags (e.g. Sub-headings) in a group, you can wrap them in the hgroup tag.
<h2>The Revenge of the Killer Markup</h2>
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.
<h1>Puffin Man Introduced to Written Word</h1>
<p>Publishing house ‘Puffin Books’ has offered reading assistance to [...]</p>
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.
<h4>iPad 4 Specifications</h4>
1THz “Granny Smith” Processor
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.
<img src=“ipad4layout.jpg” alt=“caption”>
<figcaption>A look at the internal components of the new ipad4</figcaption>
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.
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.
<source src=“/video/video.mp4” type=video/mp4/>
<source src=“/video/video.ogg” type=video/ogg/>
Your browser doesn’t support HTML5 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.
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.
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!