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:
- 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:
No contest really!
In previous versions of HTML, you could only use the element attributes defined in the language, such as
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 “
<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 );
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
span elements with more meaningful element types.
Some of my favourite HTML5 semantic elements are:
footerfor page and article headers and footers respectively
articlefor encapsulating an article or blog post
navfor representing the site navigation
figcaptionfor including figures and figure captions
timefor 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>
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.
dropzonelet 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
click handler to the
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
select menus, and so on.
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 --> <style type="text/css"> ... </style> <!-- HTML5 --> <style> ... </style>
My personal favourites are:
- New, more meaningful
search, and more. These serve 2 main purposes:
- 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.
autofocusattribute that automatically focuses a form field of your choosing when the form first loads.
placeholderattribute that lets you display placeholder text inside a field to guide the user.
requiredattribute for making form fields required. As with the
inputtypes, this triggers automatic browser validation — the user can’t submit the form until they’ve filled in all
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
- Useful new attributes such as
- Links can now be wrapped around flow content (block-level elements)
- Simpler markup for things like character sets,
- Additional form input types and attributes that add more meaning to form fields and enable auto-focusing fields, placeholders, and browser-native form validation
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.