spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / html / refactoring_html
[previous]

Sr. Web Developer
mediabistro.com
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


Refactoring HTML: Well-Formedness [con't]

Quote Attribute Value

Put quotes around all attribute values.

Motivation

In XHTML, all attribute values are quoted, even those that dont contain whitespace.

Potential Trade-offs

Absolutely no browsers are in the least bit confused by a properly quoted attribute value.

This can add roughly two bytes per attribute value to the file size. If youre Google and are counting every byte on your home page because you serve gigabytes per second, this may matter. This should not concern anybody else.

Mechanics

Manually, all you have to do is type a single or double quote before and after the attribute value. For example, consider this start-tag:

You simply turn that into this:

Or this:

Theres no reason to prefer single or double quotes. Use whichever one you like. Mechanically, both Tidy and TagSoup will fill these quotes in for you. Its probably easiest to let them do the work.

Regular expressions are a little tricky because you also need to consider the case where theres whitespace around the equals sign. For instance, you dont just have to handle the preceding examples. You have to be ready for this:

And even this:

Finding the cases without whitespace is not too hard. This will do it:

However, the preceding code snippet will also find lots of false positives. For instance, it will find this tag because of item=15314 in the query string:

You may discover a few cases where the attribute value contained whitespace and was not quoted. Similarly, you may find a few places where the initial quote is present but the closing quote is not. These are problematic, and you need to fix them. Browsers do not always interpret these as you might expect, and different browsers handle them differently. What makes no difference in Internet Explorer may cause Firefox to hide content and vice versa.



This chapter is an excerpt from the book, Refactoring HTML: Improving the Design of Existing Web Applications by Elliotte Rusty Harold, published by Addison-Wesley Professional, May 2008, ISBN 0321503635, Copyright 2008 Pearson Education, Inc.

Digg This Add to del.icio.us

home / html / refactoring_html
[previous]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

URL: