Home / Unlabelled / 7 Lovely Things About HTML5 Markup

7 Lovely Things About HTML5 Markup

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:
1
2
3
4
5
6
7
8
9
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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:
1
2
3
4
5
6
7
8
<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:
1
2
3
4
5
<!-- HTML4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<!-- HTML5 -->
<meta charset="utf-8">
1
2
3
4
5
<!-- HTML4 -->
<script type="text/javascript"> ... </script>
 
<!-- HTML5 -->
<script> ... </script>
1
2
3
4
5
<!-- 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
7 Lovely Things About HTML5 Markup 7 Lovely Things About HTML5 Markup Reviewed by BloggerSri on 11:11 PM Rating: 5

You May Also Like

No comments:

Post a Comment

Subscribe to: Post Comments ( Atom )
Powered by Blogger.