HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.
HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.
In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:
- Doctypes
data-attributes- Some new and improved elements and attributes
- More flexible linking
- Simpler markup, and
- Enhancements to web forms.
Ready to upgrade your markup? Let’s go!
A doctype you can actually remember
Let’s start with one of the more noticeable improvements to any HTML5 document. At last, we have a doctype declaration that’s easy to remember, and easy to write!
An HTML4 doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
The HTML5 doctype:
<!doctype html>
No contest really!
Author-defined attributes
In previous versions of HTML, you could only use the element attributes defined in the language, such as type, src, href, and so on. Now, in HTML5, you can also create your own attributes! The only requirement for an author-defined attribute is that it begins with the prefix “data-“.
For example:
<img id="img1" src="eiffelTower.jpg" alt="Eiffel Tower" data-country="fr" data-imageType="thumb" data-fullURL="/photos/large/eiffelTower.jpg"> <img id="img2" src="coliseum.jpg" alt="Coliseum" data-country="it" data-imageType="thumb" data-fullURL="/photos/large/coliseum.jpg">
data- attributes have no direct effect on the appearance or behaviour of elements. Their main purpose is to let you associate arbitrary data with an element.
You can access the values of data- attributes using the DOM methods such as element.getAttribute(), just like regular attributes. You can also access all the data- attributes in an element using the new dataset DOM property, like this:
// Displays "/photos/large/eiffelTower.jpg":
alert( document.getElementById('img1').dataset.fullurl );
Currently only some WebKit browsers support the dataset property; however, Morten Barklund has created a nice jQuery plugin that adds dataset support to all browsers.
New semantic elements
HTML5 gives you lots of new semantic elements that you can use to add more meaning and structure to your markup. This lets you avoid the plague of divitis by replacing non-semantic div and span elements with more meaningful element types.
Some of my favourite HTML5 semantic elements are:
headerandfooterfor page and article headers and footers respectivelyarticlefor encapsulating an article or blog postnavfor representing the site navigationfigureandfigcaptionfor including figures and figure captionstimefor representing dates and times
For example, here’s how you might mark up a blog post page:
<!doctype html>
<html lang="en">
<head>
<title>New WonderWidget Released</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/about/">About</a></li>
</ul>
</nav>
<article>
<header>
<h1>New WonderWidget Released</h1>
<p><time pubdate datetime="2011-07-11"></time></p>
</header>
<p>Curabitur tortor. Pellentesque nibh. Aenean quam.
In scelerisque sem at dolor. Maecenas mattis. Sed
convallis tristique sem. Proin ut ligula vel nunc
egestas porttitor.</p>
<figure>
<img src="eiffelTower.jpg" alt="Eiffel Tower">
<figcaption>The Eiffel Tower, earlier today</figcaption>
</figure>
<footer>
<p>Posted by: Matt Doyle</p>
<p><a href="comments/">Comments</a></p>
</footer>
</article>
</body>
</html>
Internet Explorer 8 and earlier don’t understand these new element types, which means that you can’t style them with CSS or access them in the DOM via JavaScript. To work around this, check out Remy Sharp’s HTML5 Shiv script.
Handy new attributes
HTML5 also introduces some useful new element attributes to the language. Not all browsers currently support all of these attributes, but browser support is improving all the time.
Here are some good ones:
contenteditableis now officially part of the HTML standard, making it easier to create rich-text web editors.spellcheckallows you to toggle spell checking for a text field or editable element.reversedlets you create an ordered list in reverse (descending) order.draggableanddropzonelet you add browser-native drag-and-drop functionality to any element (here’s a great tutorial on HTML5 drag-and-drop).
Another nice thing about HTML5 is that it resurrects the target attribute, which lets you target iframes, open links in new windows, and so on. This attribute was deprecated in HTML4 Strict, but with HTML5 the W3C has had a change of heart and reinstated it.
Being able to wrap a link around almost anything
In older versions of HTML, a (anchor) elements were defined as inline elements and, as such, could only contain other inline elements, such as text, images and span elements. This made it difficult to wrap a link around a block-level element, such as a div containing multiple elements. You had to resort to wrapping links around the individual inline elements inside the div, or adding a JavaScript click handler to the div.
Now, in HTML5, links can contain flow content, which is an HTML5 term roughly equivalent to HTML4’s “block-level”. This means that you can happily include divs, headings, tables, and lots more inside a link. For example:
<a href="mypage.html">
<div>
<h2>Linked div</h2>
<p>Here's an entire linked div containing an h2 heading,
a paragraph, and an image!</p>
<img src="eiffelTower.jpg" alt="Eiffel Tower">
</div>
</a>
The only caveat is that the content inside the link must not itself be interactive — this rules out other a elements, as well as buttons, iframes, select menus, and so on.
Simplified markup
One of my favourite things about HTML5 markup is that many commonly-used snippets are now simpler and quicker to write. For example:
<!-- HTML4 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTML5 --> <meta charset="utf-8">
<!-- HTML4 --> <script type="text/javascript"> ... </script> <!-- HTML5 --> <script> ... </script>
<!-- HTML4 --> <style type="text/css"> ... </style> <!-- HTML5 --> <style> ... </style>
Lovely!
Enhanced forms
HTML5 adds some new attributes to forms. These let you create semantically-rich form fields, and they also help to cut down on the amount of JavaScript needed for things like validation and autofocus.
My personal favourites are:
- New, more meaningful
inputtypes:email,url,tel,number,range,date,datetime,search, and more. These serve 2 main purposes:-
- Browsers can automatically validate the fields to make sure they contain the correct type of values. No JavaScript validation needed!
- Some browsers, such as Mobile Safari, can display context-aware keyboards based on the field type. For example, if the user is entering a telephone number into an
<input type="tel">field then the browser displays a telephone keypad.
-
- The
autofocusattribute that automatically focuses a form field of your choosing when the form first loads. - The
placeholderattribute that lets you display placeholder text inside a field to guide the user. - The
requiredattribute for making form fields required. As with theinputtypes, this triggers automatic browser validation — the user can’t submit the form until they’ve filled in allrequiredfields.
Summary
While HTML5 has some widely-publicised headline features such as native video, the canvas element and the geolocation API, there are also many improvements to the markup language itself that are worth a look. In this article you’ve touched on 7 things that make HTML5 markup more powerful — and nicer to write — than HTML4:
- A much simpler doctype that’s easy to remember and type
data-attributes for adding arbitrary data to page elements- New semantically-rich elements like
header,footer,article,nav,figure,figcaptionandtime - Useful new attributes such as
contenteditable,spellcheck,reversed,draggableanddropzone - Links can now be wrapped around flow content (block-level elements)
- Simpler markup for things like character sets,
scriptblocks andstyleblocks - Additional form input types and attributes that add more meaning to form fields and enable auto-focusing fields, placeholders, and browser-native form validation
Further reading
If you want to learn more about HTML5’s new markup syntax, take a look at the W3C’s document, HTML5 differences from HTML4. Another great place to learn about HTML5 is Mark Pilgrim’s site, Dive Into HTML5.
Have fun!
Photo credits: elginwx, Creative Tools, MoneyBlogNewz
Crazyhunk says
13 July 2011 at 2:18 amLovely article,good read, didn’t know about the data atributes.
since html5 has been under use, from my perspective, codeing has become a lot simpler, take for example the Doctype, I never a word more than
the rest was all copy paste for me.
with the help of CSS3, html5 is a treat to work on.
[Edited by Crazyhunk on 13-Jul-11 02:19]
matt says
14 July 2011 at 4:06 am@Crazyhunk: Thanks for your comment – glad you enjoyed reading the article. 🙂
mikaelengstrom says
26 July 2011 at 10:35 amYeah, very good post. Thanks for the breif.
I cant wait for MS to admit that they cant do browsers (or any software at all actually…) and bundle ff, chromer or opera with their os instead.
Until then i guess i will have to stick with html4 or my customers will be mad at me 🙂
tomt62 says
19 October 2011 at 5:30 amthis would be helpful for a beginner website designer like me…can i use it to my wordpress sites?
mikaelengstrom says
19 October 2011 at 5:37 amtomt62: Yeah sure you can use it with wordpress. Check out http://html5boilerplate.com/ for an awesome html5 template that you can rebuild to whatever you want.
manuelescrig says
31 January 2012 at 11:13 amInteresting! Quite useful!