• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / 7 Lovely Things About HTML5 Markup

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

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:

  • contenteditable is now officially part of the HTML standard, making it easier to create rich-text web editors.
  • spellcheck allows you to toggle spell checking for a text field or editable element.
  • reversed lets you create an ordered list in reverse (descending) order.
  • draggable and dropzone let 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

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




Filed Under: HTML Tagged With: article, block-level, contenteditable, data attributes, Doctype, draggable, dropzone, figcaption, figure, flow content, footer, forms, header, html, HTML5, link, markup, nav, reversed, spellcheck, time

Reader Interactions

Comments

  1. Crazyhunk says

    13 July 2011 at 2:18 am

    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]

    Reply
  2. matt says

    14 July 2011 at 4:06 am

    @Crazyhunk: Thanks for your comment – glad you enjoyed reading the article. 🙂

    Reply
  3. mikaelengstrom says

    26 July 2011 at 10:35 am

    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 🙂

    Reply
  4. tomt62 says

    19 October 2011 at 5:30 am

    this would be helpful for a beginner website designer like me…can i use it to my wordpress sites?

    Reply
  5. mikaelengstrom says

    19 October 2011 at 5:37 am

    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.

    Reply
  6. manuelescrig says

    31 January 2012 at 11:13 am

    Interesting! Quite useful!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits