A List Apart

Menu
Get Ready for HTML 5 Issue № 291

Get Ready for HTML 5

by Published in HTML37 Comments

With support in Chrome, Firefox 3.5, Opera, and Safari, HTML 5 is coming at you like a runaway train. Here are some suggestions to help you prepare to get on board rather than be left at the platform or tied to the tracks.

See what others have done

The first thing you can do to prepare for HTML 5 is see how other people are using it. A visit to the HTML 5 gallery will show you how several sites are already using the new HTML 5 elements. Use the source, Luke!

Now you do it

You can look at the sites, read all the articles here and elsewhere, and even read the specification—but none of that will help you understand HTML 5 as much as using the new elements. You can modify part of an existing site or experiment by creating new pages. I did this myself by updating a trip report I made for friends and family. (I never intended it for public display, but here it is.)

By doing this, you’ll find out what works and what doesn’t. For example, I discovered that, as of this writing, Firefox 3.5 treats elements like article and section as display:inline, and I had to explicitly set them to display:block to make them work as expected.

X marks the spot

If you are like most designers, you probably don’t write all your markup by hand. But until the tools you use catch up to the new elements in (X)HTML 5, you will be doing some markup by hand while you learn. There’s been a bit of confusion (and controversy!) about the relationship between HTML 5, XHTML 1.0/1.1, and XHTML 5. Let’s clear that up right now.

HTML 4.0 (the markup language we all know and love) is based on a “rulebook” called SGML. In the SGML rulebook, element names are not case sensitive, you can have elements with optional closing tags (like <p>), and you can have attribute values without quotation marks. XHTML 1.0 and 1.1 are based on a rulebook called XML. In the XML rulebook, element and attribute names are case sensitive, every opening tag must have a closing tag, and attribute values must be quoted.

HTML 5 defines a markup language that isn’t based on either rulebook, but that can be written in either “HTML form” (or serialization, as the spec calls it) or “XHTML form.”

When you write markup in HTML form, you are allowed to leave off some closing (and opening!) tags, you don’t have to quote attribute values if they don’t contain blanks, and element and attribute names aren’t case sensitive. You also get to use some of the XML markup; you can have a trailing slash on elements like <img /> or <hr />.

When you use the XHTML serialization, you have to follow the XML rules mentioned a few paragraphs ago.

I suggest that you write your markup in XHTML 5, or, if you use HTML 5, do the markup as if it were XHTML. You will be better off staying with the XML standard that requires a closing tag for each opening tag rather than spending your time optimizing markup for tags that have optional closing and/or opening tags. Similarly, quote all your attribute values rather than trying to decide when you can leave the quotes off. In addition to not having to waste neurons on those decisions, your markup will be more consistent.

Once the automatic markup generation tools catch up, you may still want them to generate XHTML 5 rather than HTML 5. Use of XML is forward-looking; its namespaces allow you to have “polyglot documents” that consist of multiple markups beyond the RDFa, MathML, and SVG of HTML 5. You can also use tools such as XPath, XSLT, and XQuery on XML-based markup, using any XML parser of your choice (though there is a Java-based parser that will process plain HTML 5).

Of course, it’s not all good news. If you do go with XHTML 5, remember that your server must deliver the documents with a MIME type of application/xhtml+xml or text/xml. This may involve negotiation with your hosting service. Also, when you deliver an XML file, any syntax error will cause an error message.

Screenshot of XML parse error for mismatched tags
Fig. 1. XML parse error for mismatched tags.

If you are doing markup by hand, think of these error messages as a way to keep you honest. If you are using tools that create XHTML, there is no problem; the tools should always produce well-formed XML.

Regular expressions

HTML 5 extends the input element by offering new attributes that allow you to specify what data you will allow as input. These attributes include min and max (to set a numeric range), and HTML 5 also offers new values for the type attribute, such as url, email, date, and time.

If none of these new input types suits your needs, HTML 5 provides the pattern attribute for input elements with type=“text”. The value of the pattern attribute is a regular expression, as defined in ECMAScript and used in JavaScript. Regular expressions are a concise and perhaps somewhat cryptic way of specifying a pattern of characters. For example, if I want to match a five-digit or nine-digit US ZIP code or a six-character Canadian postal code, I can use this pattern:

([0-9]{5}(-[0-9]{4})?)|([A-Z][0-9][A-Z]\s+[0-9][A-Z][0-9])

The new web form capabilites are partially implemented in Safari and Chrome, and completely in Opera (see this site for browser capability information). Don’t worry if your browser does not yet support the form extensions for HTML 5; you can download Google’s Web Forms 2 and off you go!

Here is a sample form that validates a date and a postal code:

Enter a date: Enter a US ZIP Code or Canadian Postal Code:  

And here is the relevant markup:

<p>
Enter a date: <input type="date" name="day"
required="required"
title="Use format yyyy-mm-dd" />
</p>

<p>
Enter a US or Canadian Postal Code:
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&#160;B2C" />
</p>

Regular expressions are well worth the time it takes to learn them. Many text editors offer integrated regular expression search-and-replace features, and once you start using them, you’ll wonder how you ever got along without them.

Static art with SVG

red circle and blue octagon overlapped by translucent green rectangle
Fig. 2. Image of SVG showing colored shapes.

If you want the crisp edges of vector-drawn art, HTML 5 allows you to embed SVG (Scalable Vector Graphics) in your documents. Putting SVG inline is partially implemented in Firefox, Safari, and Opera, according to this site.

You can already link to an SVG file in Firefox 3.5. That graphic is a bit complex—here’s a much simpler one (see Fig. 2) showing some simple colored shapes.

And here’s the SVG that generates it:

<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 200 100"
width="200px" height="100px">

<circle cx="50" cy="50" r="30"
    style="stroke:none; fill:#ff0000;"/>

<g transform="translate(100, 20) scale(1.65)">
    <polygon points="36 25, 25 36, 11 36, 0 25,
        0 11, 11 0, 25 0, 36 11"
        style="stroke:none; fill:#0000ff;" />
</g>

<rect x="60" y="20" height="60" width="60"
    style="stroke:none; fill:#00ff00;
    fill-opacity: 0.5;" />   
</svg>

While it is possible to use JavaScript to dynamically modify an SVG graphic, HTML 5 provides a better solution:

The blank canvas

The canvas element is one of the most exciting features of HTML 5, and it’s supported by Firefox, Safari, Opera, and Chrome—but not Internet Explorer. (Color me surprised.) The canvas element is truly a forward-looking feature. You use JavaScript to draw whatever you need on this (literally) blank canvas.

Here’s the same graphic as the SVG graphic, only on a canvas:

Sorry, but your browser does not support <canvas> :(

And here’s the JavaScript that created it (with multiple statements per line to save space):

function drawSimpleCanvas() {
  var canvas =
    document.getElementById("simpleCanvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    
    ctx.beginPath(); // the circle
    ctx.fillStyle = "#ff0000";
    ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.save();
        
    // move and resize the octagon
    ctx.translate(100, 20);
    ctx.scale(1.65, 1.65);
    ctx.fillStyle = "#0000ff";
    ctx.beginPath();
    ctx.moveTo(36, 25); ctx.lineTo(25, 36);
    ctx.lineTo(11, 36); ctx.lineTo(0, 25);
    ctx.lineTo(0, 11); ctx.lineTo(11, 0);
    ctx.lineTo(25, 0); ctx.lineTo(36, 11);
    ctx.closePath();
    ctx.fill();
        
    // restore graphics as they
    // were before move and resize
    ctx.restore();
    ctx.fillStyle = "#00ff00";
    ctx.globalAlpha = 0.5;
    ctx.beginPath();
    ctx.rect(60, 20, 60, 60);
    ctx.closePath();
    ctx.fill();
  }
}

Here is a <canvas> that demonstrates simple user interaction:

Sorry, but your browser does not support <canvas> :(
Draw:         pixels,   color #  

Normally, you will use a canvas to display graphics that support your content. For example, saying “the mean of a set of numbers is the ‘center of gravity’ of that set” is fine, but using a canvas element with associated JavaScript to let the reader enter a set of numbers and show her that the mean is the “balance point” is much more effective.

Sorry, but your browser does not support <canvas> :(
Enter numbers, separated by commas or blanks:    

These examples don’t even begin to show the scope of the canvas element’s capabilities. See Mozilla’s Canvas tutorial for a more thorough introduction as well as links to examples.

What are you waiting for?

Although some developers have reservations about the direction in which HTML 5 is taking the web (and although I share these reservations), HTML 5 has enough new and interesting features to be well worth exploring. So, start looking at other people’s markup, experiment on your own, and go wild with the new form validation and canvas features.

37 Reader Comments

Load Comments