7 Lovely Things About HTML5 Markup

Discover 7 really nice ways that HTML5 can make your markup easier to write and more powerful. Covers doctypes, new elements and attributes, flexible linking, markup shortcuts, and more.

7 Lovely Things About HTML5 Markup

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

Lincoln

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

Writing data- attribute

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

Painting and figure tags

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:

  • header and footer for page and article headers and footers respectively
  • article for encapsulating an article or blog post
  • nav for representing the site navigation
  • figure and figcaption for including figures and figure captions
  • time for 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

Spelling test

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:

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

Gift with a link

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

ABC blocks

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

IRS form

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 input types: email, url, tel, number, range, date, datetime, search, and more. These serve 2 main purposes:

    1. Browsers can automatically validate the fields to make sure they contain the correct type of values. No JavaScript validation needed!
    2. 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 autofocus attribute that automatically focuses a form field of your choosing when the form first loads.
  • The placeholder attribute that lets you display placeholder text inside a field to guide the user.
  • The required attribute for making form fields required. As with the input types, this triggers automatic browser validation — the user can't submit the form until they've filled in all required fields.

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, figcaption and time
  • Useful new attributes such as contenteditable, spellcheck, reversed, draggable and dropzone
  • Links can now be wrapped around flow content (block-level elements)
  • Simpler markup for things like character sets, script blocks and style blocks
  • 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

Follow Elated

Related articles

Responses to this article

6 responses (oldest first):

13-Jul-11 02:18
Lovely 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


<!DOCTYPE HTML PUBLIC ….


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]
14-Jul-11 04:06
@Crazyhunk: Thanks for your comment - glad you enjoyed reading the article.
26-Jul-11 10:35
Yeah, 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
19-Oct-11 05:30
this would be helpful for a beginner website designer like me...can i use it to my wordpress sites?
19-Oct-11 05:37
tomt62: 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.
31-Jan-12 11:13
Interesting! Quite useful!

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page