HTML5 and CSS3, Second Edition

Joe asks:

But I Like My XHTML Self-Closing Tags.

Can I Still Use Them?

You sure can! Look at Polyglot Markup.a Many developers fell in love with XHTML

because of the stricter requirements on markup, compared to HTML. XHTML docu-

ments forced quoted attributes, made you self-close content tags, required that you

use lowercase attribute names, and brought well-formed markup to the World Wide

Web. Moving to HTML5 doesn’t mean you have to change your ways. HTML5 docu-

ments will be valid if you use the HTML5-style syntax or the XHTML syntax. But

before you dive in you need to understand the implications of using self-closing tags.

Most web servers serve HTML pages with the text/html MIME type because of Internet

Explorer’s inability to properly handle the application/xml+xhtml MIME type associated

with XHTML pages. Because of this, browsers tend to strip off self-closing tags because

they don’t consider self-closing tags to be valid HTML. For example, if you had a self-

closing script tag above a div, like this,

<scriptlanguage="javascript"src="application.js"/>

<h2>Help</h2>

the browser would remove the self-closing forward slash, and then the renderer would

think that the h2 was within the script tag, which never closes! This is why you see

script tags coded with an explicit closing tag, even though a self-closing tag is valid

XHTML markup.

Be aware of possible issues like this if you do use self-closing tags in your HTML

documents. Be sure to serve your files with the correct MIME type. You can learn

more about these issues at http://www.webdevout.net/articles/beware-of-xhtml#myths.

a. http://www.w3.org/TR/html-polyglot/

Better Forms

HTML5 promises better user-interface controls. For ages, we’ve been forced

to use JavaScript and CSS to construct sliders, calendar date pickers, and

color pickers. These are all defined as real elements in HTML5, just like drop-

downs, checkboxes, and radio buttons. You’ll learn how to use them in

Chapter 3, Creating User-Friendly Web Forms, on page 37. Although this isn’t

quite ready for every browser, it’s something you need to keep your eye on,

especially if you develop web-based applications.

In addition to improved usability without reliance on JavaScript libraries,

there’s another benefit—improved accessibility. Screen readers and other

browsers can implement these controls in specific ways so that they work

easily for people with disabilities.

report erratum • discuss

A Stronger Platform for Web Development • 3

Download from Wow! eBook <www.wowebook.com>