Getting started with HTML5
Posted on 8 May 2013 at 10:23
Feeling confused about HTML5? Ian Devlin looks at the origins and features of the technology, and how you can learn more about it
No doubt you’ve heard of HTML5; but you probably haven’t seen a clear, accurate explanation of what it is, what it contains and what it can do. The term HTML5 is widely misused as an umbrella term for all sorts of technologies, some of which have no connection to the standard at all. If this has left you a little confused, it’s understandable.
In this feature we’ll give you an introduction to HTML5, showing you what it consists of and what you can do with it. We’ll also look at other technologies often mistakenly referred to as “HTML5 technologies”.
What is HTML5?
Unlike previous versions of HTML, HTML5 wasn’t created by the World Wide Web Consortium (the W3C). Its origins lie with the independent Web Hypertext Application Technologies Working Group (WHATWG), formed in 2004 by delegates from Apple, Mozilla and Opera who disagreed with the W3C’s vision of XHTML as the future of the web. The WHATWG created proposals to develop the web as a platform for applications – and within a few years the W3C adopted these proposals. The two organisations now develop and maintain HTML5 together.
It’s worth noting that each organisation has its own version: although the two are very similar, the WHATWG’s is a “living document” that’s regularly tweaked, while the W3C’s is maintained through more formal processes.
New elements in HTML5
Many of the updates HTML5 has brought are intended to make life easier for developers. A case in point is the HTML5 use of DOCTYPE. Prior to HTML5, the syntax you had to use to tell the browser what sort of HTML you were using was unfriendly to say the least; for example, the first line of an HTML 4.01 page might be:
Today, to specify HTML5, you simply need to define:
HTML5 also includes a new “charset” element that defines the character encoding of your web page – a useful feature on the increasingly multilingual web. For example, to define the default character encoding of your page as UTF-8, you can simply place the following line within the head element:
New semantic elements
HTML5 focuses on making code easier to understand, navigate and customise. To this end, it introduces several semantic elements that weren’t included in previous versions of the standard. For a start, since many web pages have headers and footers, HTML5 includes new <header> and <footer> elements, specifically for enclosing content intended for these roles. Another common feature of web pages is a list of navigation links, so again the HTML5 specification defines a new <nav> element to enclose lists of navigation links.
When it comes to the main content of a web page, the <article> and <section> elements can be used to enclose content and give it a particular semantic meaning. To get an idea of how these elements can be used, consider a newspaper with several sections, such as news, sport and entertainment. Each section contains a number of articles that are related by the section heading, but each of which can also stand on its own.
One of the most important – and most talked about – things that HTML5 allows you to do is build multimedia directly into your web pages. Previously, in order to add an audio or video file to a web page, you had to use an <object> or <embed> element to call a third-party plugin such as Adobe Flash to play the file. This required that the plugin in question was installed and working on the end user’s machine – something that can’t be taken for granted.
Really useful info
Thanks in particular for explaining the new audio and video tags. It all makes sense now, whereas before your article I was led to believe that HTML5 was a new video format.
By AndyChips on 13 May 2013
For more details about purchasing this feature and/or images for editorial usage, please contact Jasmine Samra on firstname.lastname@example.org
- Google I/O live stream and blog: how to watch 2014 Google I/O keynote speech live
- Google testing its own domain registration service
- Adobe announces first hardware: Adobe Ink and Slide
- Vote now in the PC Pro Excellence Awards 2014!
- What’s new in OS X 10.10? Apple Yosemite’s new features
- Samsung Z Tizen phone helps loosen ties with Android
- Microsoft rumoured to launch smartwatch this summer
- LG G3 launched: LG takes the wraps off smartphone that offers “more with less effort”
- LG G3 launch live video stream and blog: as it happened
- Apple fixes iMessage lock-in for Android switchers
- How Google Glass ruined my lunch hour
- Smartphone battery packs: can a USB power pack beat the festival battery blues?
- Windows Easy Transfer – not so "easy" in Windows 8.1
- Formula 1: what a difference virtualisation makes
- Office of the future: comfy chairs and tablets everywhere
- I went to Glastonbury and the only thing that got high was my smartphone
- Meet the robots helping teach children
- PaperLater: would you pay to print the internet?
- Amazon vs Kobo: how much to make the ebook switch?
- Phishing emails: how I nearly got caught out