No-fly zone

In HTML5, browser makers must continue to support certain crusty legacy elements. Web developers though should quit using them. For example, most of us have stopped using and should continue avoiding the font, strike, and tt elements in HTML5. CSS is the way to go here. To no one’s surprise, the HTML5 no-fly-zone includes the frame, frameset, and noframes elements because of their history of aggression against usability and accessibility.

For more information on elements to avoid, see “Absent Elements” on the W3C site.

Something old, something new

The HTML5 markup language doesn’t replace or modify HTML 4 but adds to it. All valid markup elements in HTML 4 and XHTML are still valid in HTML5 (at least from the browser makers’ perspective). The difference is that HTML5 redefines some elements and adds new ones. The W3C outlines the differences in a useful document called “HTML5 differences from HTML4.”

Steak and sizzle

Cool demos showcasing HTML5’s capabilities are popping up on the web, including at the HTML5 Gallery and on Adobe’s own the expressive web website. Demos are essential learning tools. For example, at the expressive web, you can select an HTML5 or CSS3 feature from a list and, after seeing it in action, scroll down the page for examples, tutorials, and other information you need to learn the feature and use it in your projects.

For learning purposes though, not all demos are created equal. Bruce Lawson writes on his blog that “people learn from demos. People pick them apart to see how they work, and hack them about. So using fundamentally the wrong technology to achieve an eye-candy result doesn’t help anyone learn.” He urges us to learn from the steak, not the sizzle. Read Bruce’s thoughts on the subject here.

Learning on spec

If you’re thinking of learning HTML5 from the specification on the W3C or WHATWG sites, know that the audience for the official HTML specification are browser makers, not web developers. Using the official spec to learn HTML5 is like using an aircraft’s engineering manuals to learn to fly it. Feasible but not recommended.

Still, there is one invaluable document for web developers on both sites. It’s a special version of the HTML spec that strips out all the esoteric details that matter to browser makers and leaves only the stuff that matters to us.

Both versions are nearly identical and either version makes an excellent reference document when learning HTML5.

Living standards

The WHATWG (Web Hypertext Application Technology Group) calls the core markup part of the HTML5 ecosystem just HTML. No version. The spec is a living standard like the English language, which makes sense to me. Nobody refers to the English of the sixties (“far out,” “can you dig it?”) as English 8, say, and the English of today (“to text,” “to Google”) as English 10 or 11.

It probably means no browser will ever be fully compliant with the HTML spec but then has any browser ever been fully compliant with a new spec? With the ease and frequency of auto-updates, modern browsers can adapt and evolve with the spec.

The W3C (World Wide Web Consortium) still calls the markup language HTML5 rather than just HTML, but its spec is basically the same as the WHATWG’s. You’ll find the WHATWG spec here.

Which one is Pink?

The media herald the fact that HTML5 is gonna be huge I tell you, HUGE! That sounds about right, but I suspect a lot of people reading the reports think HTML5 is a single, cool technology, the same way certain people thought Pink Floyd was one of the guys in the band.

HTML5 is made up of a collection of technologies. It includes all valid elements from both HTML 4 and XHTML 1.0, plus:

  • Redefinitions of existing markup elements
  • New elements such as the <article> and <aside> semantic elements
  • Related technologies and APIs such as the <canvas> element, offline storage, the new <video> and <audio> elements, drag-and-drop functionality, and more.

CSS3 is often lumped into the term HTML5. CSS3 has it’s own specification and is a hugely important technology in its own right. Still, it’s hard to mention one technology without the other. Careful folks say “HTML5 and CSS3.” I think it’s fine to bundle CSS3 with HTML5 so long as we understand each other.

HTML5 markup or: How I Learned to Stop Worrying and Love the Browser

HTML5 markup is more streamlined than HTML 4 and, for some, will be a welcome relief from the rigors of XHTML. HTML5 embraces the forgiving nature of browsers, which wasn’t necessarily the case with XHTML, the previous incarnation of HTML. If browsers were asked to use the “application/xhtml+xml” MIME type (which wasn’t often), users would get a fatal page error if you forgot a single quotation mark for an attribute value.

Like most people who moved to XHTML, in practice I never had to achieve coding perfection because browsers continued to use the more forgiving “text/html” MIME type. If an error or two slipped past, the browser thought it was HTML and ignored it.

Well-formed and readable code continues to be important, but web developers are human and make mistakes. By some estimates, more than 99% of web pages have at least one error, and browsers know how to handle most of them gracefully. Why not accept the browsers’ flexibility in the new markup language?

For example, in an XHTML or HTML 4 page you have something like the following elements at the top of the document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" lang="en" xml:lang="en">

In HTML5 you can abandon the pretense that the document is XHTML and use the following bare-bones doctype information to tell the browser to render the page in standards mode:

<!doctype html>

Next, the character encoding element in a typical XHTML or HTML 4 page looks like this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Since all modern browsers assume the content type of a web page is text/html unless instructed otherwise, in HTML5 you can toss the http-equiv and content attributes:

<meta charset="utf-8" >

Next, the stylesheet element in an XHTML or HTML 4 page looks like this:

<link href="../css/mystyles.css" rel="stylesheet" type="text/css" />

Since all browsers assume the content type of linked stylesheets is css, in HTML5 you can get rid of the type attribute:

<link href="../css/mystyles.css" rel="stylesheet">

Finally, a Javascript link element in an XHTML or HTML 4 page looks like this:

<script src="../js/myscripts.js" type="text/javascript"></script>

Again, since all browsers assume the content type of linked scripts is Javascript, in HTML5 you can drop the type attribute:

<script src="../js/myscripts.js" ></script>

You’re left with the following streamlined HTML5 markup that any modern browser can interpret:

<!doctype html>
<html lang="en">

<meta charset="utf-8" >
<link href="../css/mystyles.css" rel="stylesheet" >
<script src="../js/myscripts.js" ></script>

To find out more about the principles that guided the development of this style of markup, see the HTML5 compatibility design principles on the W3C site.

For an entertaining look back at the history of XHTML and HTML5, see “How did we get here?” in Dive into HTML5 by Mark Pilgrim.

And we’re off

Welcome to the Way of HTML5, a blog aimed at web developers looking for community content for learning and using HTML5.

A few words about myself. I’m the content manager for Adobe Dreamweaver, a job I’ve held since 2004. I’ve been associated with the Dreamweaver team for 12 years, going back to 1999 when I came to Macromedia as a tech writer to document the new app development features in Dreamweaver. More recently I got mixed up with the digital video world with Adobe Premiere Pro and After Effects.

Why does a guy who works at Adobe want to talk about HTML5? Adobe is the leading worldwide vendor of web design and development tools by revenue, according to a recent IDC report. But I’m not here to talk about the benefits of using Dreamweaver, though personally I think it’s a pretty awesome tool. HTML5 is important for all web content producers, whether you use Adobe products or not. I hope I can make this blog useful for this wider audience.