Single or double quotes for HTML attributes?
February 18th, 2007
The issue of whether to use single quotes or double quotation marks in HTML attributes is a topic that has been somewhat debated for some time now. The reason there is debate is due to the differences in, and the leniency of the relevant standards or recommendations. So here’s my take.
The W3C’s HTML 4.01 Recommendation allows the use of either single or double quotation marks and in certain cases no quotation marks are required at all.
To quote the recommendation:
By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39). Single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa. Authors may also use numeric character references to represent double quotes (") and single quotes ('). For double quotes authors can also use the character entity reference ".
In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58). We recommend using quotation marks even when it is possible to eliminate them.
XHTML1 is a little stricter, saying that all attribute values must be quoted, even those which appear to be numeric
, but (as far as I can tell) still allows the use of either quote.
While I am all for flexibility in standards, it can and does lead to inconsistencies between developers, projects and even within the same document.
This inconsistency is not a problem for the majority of (especially static) X/HTML documents. Even though double quotes are recommended, the choice is essentially inconsequential, and may be influenced by factors such as personal preference or the contents of the value being quoted (because single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa
).
It does become more relevant once dynamic pages are introduced, mainly due to the uncertainty of the value within the quotes (which can be a deciding factor in the choice, as mentioned above). In this situation I strongly advocate the use of double quotes. Let me explain why with a simple example.
Imagine a template, used in a dynamic web page, that displays a form to allow some data to be entered or edited. With single quotes, an example in PHP may look like this:
<form …>
<input type='text' name='name' value='<?php echo $name ?>' />
<input type='submit' value='Submit' />
</form>
This would work fine in most cases, but consider the case where the $name variable contains an apostrophe such as in "O’Brien". The resulting HTML would look like this:
<form …>
<input type='text' name='name' value='O'Brien' />
<input type='submit' value='Submit' />
</form>
This would obviously cause problems with the display, causing only an "O" to be displayed inside the text field (not to mention invalid markup). Of course, you could run the value through the PHP’s addslashes() function, and the problem would be solved. But addslashes is one of those functions I try to use very sparingly, it has a tendency to bite you by adding slashes where they are not intended, such as before slashes intended to be escaping other characters. Instead, I prefer to use double quotes around all attributes, like so:
<form …>
<input type="text" name="name" value="<?php echo $name ?>" />
<input type="submit" value="Submit" />
</form>
The advantage is that, by passing the variables through a htmlentities function (or equivalent). This will convert any double quotes in the variable to the HTML entity """, preventing the reverse of the problem described with "O’Brien" and ensuring the markup is going to be valid and the value is as intended. This only works for double quotes because there is no standard HTML entity for single quotes (The ASCII code can be used, and ' is supported in some browsers, but these aren’t as widely supported as ").
On the surface, the approach of converting the HTML entities may appear to be no better or worse than the method of escaping the single quotes with addslashes. The advantage is, converting the HTML entities will also account for other characters that should be converted as well, for example the ampersand (&) that, while they may not cause the page to fail to function (most browsers will compensate), will render the HTML invalid if not converted. As such, this conversion would need to be done even with the escaping using slashes, so why use both? Taking this into consideration, I have yet to find a good reason for using single quotes (at least if the value contains dynamic content).
So that’s my vote, and my reasoning behind it. Vote 1: Double quotes for attribute value delimiters.
