Is it correct to use single quotes for HTML attributes?

HtmlSyntaxCoding StyleApostrophe

Html Problem Overview


Recently I've been seeing a lot of this:

<a href='http://widget-site-example.com/example.html'>
    <img src='http://widget-site-example.com/ross.jpg' alt='Ross&#39;s Widget' />
</a>

Is it valid to use single quotes in HTML? As I've highlighted above it's also problematic because you have to escape apostrophes.

Html Solutions


Solution 1 - Html

It's certainly valid to use single quotes (HTML 4.01, section 3.2.2). I haven't noticed such a trend, but perhaps there's some framework that powers web sites you've visited that happens to quote using single quotes.

Solution 2 - Html

I find using single quotes is handy when dynamically generating HTML using a programming language that uses double quote string literals.

e.g.

String.Format("<a href='{0}'>{1}</a>", Url, Desc)

Solution 3 - Html

When using PHP to generate HTML it can be easier to do something like:

$html = "<img src='$url' />";

than concatenating a string with a variable with a string, as PHP parses variables in double-quoted strings.

Solution 4 - Html

Someone may use it in PHP to avoid escaping " if they're using double quoted string to parse variables within it, or to avoid using string concatenation operator.

Example:

echo "<input type='text' value='$data'/>";

instead of

echo "<input type=\"text\" value=\"$data\" />";

or

echo '<input type="text" value="' . $data . '" />';

Nowadays I always stick to using double quotes for HTML and single quotes for Javascript.

Solution 5 - Html

Another case where you may want to use single quotes: Storing JSON data in data attributes:

<tr data-info='{"test":true}'></tr>

JSON object keys must be in double quotes, so the attribute itself cannot.

Solution 6 - Html

It's easier when you want to embed double quotes.

Solution 7 - Html

In ASP.NET, it's easier to use single quotes if you're using data-binding expressions in attributes:

<asp:TextBox runat="server" Text='<%# Bind("Name") %>' />

Solution 8 - Html

Single quotes are perfectly legal in (X)HTML. Using a backslash to escape them, on the other hand, isn't. <img src='http://widget-site-example.com/ross.jpg'; alt='Ross's Widget' /> is an image with the alt text "Ross", and empty s and Widget/Widget' attributes. The correct way of escaping an apostrophe in HTML is &#39;.

Solution 9 - Html

In PHP, echo takes multiples parameters. So, if one would like to omit the concatenation operator, they could done something like and still use double quotes :

echo '<input type="text" value="', $data, '" />';

Solution 10 - Html

Single quotes generate a cleaner page with less clutter. You shouldn't be escaping them in HTML strings and it's your choice which to use... my preference is single quotes normally and if I need to include a single quote in the string (e.g. as delimiters for a string inside the string), I use double quotes for one & single for the other.

Solution 11 - Html

If you want to the [tag:HTML] to be valid [tag:html4] or [tag:xhtml] then both [tag:single-quotes] or [tag:double-quotes] will work for attributes. HTML4 can be validated here: https://validator.w3.org/

If you are supporting only modern browsers ([tag:ie10] and higher) then you can use the [tag:HTML5] syntax which allows single quotes, double quotes, and no quotes (as long as there are no special characters in the attributes' value). HTML5 can be validated here: https://validator.w3.org/nu

Solution 12 - Html

What's against single quotes?

You can have single/double quotes all over your html code without any problem, as long as you keep the same quoting style inside a current tags ( many browser won't complain even about this, and validation just want that if you start with a quote, end with the same, inside the same propriety )

Free support to random quoting styles!!! (yay ;D )

Solution 13 - Html

I know this is an old thread, but still very much relevant.

If you want control over quotes in your generated HTML, you can use the sprintf() function in PHP (and similar calls available in many other languages):

$html = sprintf('<a href="%s">%s</a>', $url, $text);

Using sprintf() allows the format string to be easily modifiable by retrieving it from a database or configuration file, or via translation mechanisms.

It is very readable, and allows either double or single quotes in the generated HTML, with very little change and never any escaping:

$html = sprintf("<a href='%s'>%s</a>", $url, $text);

Solution 14 - Html

Why not save pressing the SHIFT Key. One less keystroke for the same milage.

Solution 15 - Html

Let's settle this argument for good


  1. Double quotes are OK
  2. Single quotes are OK
  3. No quotes are OK, as long as you don't have one of these characters:
    • space (obviously)
    • "<" or ">" (makes sense)
    • equal sign (not sure why but ok)
    • any kind of quote: double, single, backtick (again, makes sense)

Funny how some people, even today, stick to the "double quote only" standard which was never really a standard but a convention. Also, if your language has apostrophes as a natural element (English, anyone?) it's more convenient, but in my opinion, increasing the complexity of PHP string compositions is way too high a price to pay for this.

Solution 16 - Html

You should avoid quotes altogether.

In your example only one quoted attribute actually needed quotes.

<!-- best form -->
<a href=http://widget-site-example.com/example.html>
  <img src=http://widget-site-example.com/ross.jpg alt='Ross&#39;s Widget' />
</a>

If you do use quotes, there is no hard and fast rule, but I've seen most commonly single quotes, with double quotes on the inside if necessary.

Using double quotes won't pass some validators.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRossView Question on Stackoverflow
Solution 1 - HtmlGreg HewgillView Answer on Stackoverflow
Solution 2 - HtmlAdyView Answer on Stackoverflow
Solution 3 - HtmlDean RatherView Answer on Stackoverflow
Solution 4 - HtmlImranView Answer on Stackoverflow
Solution 5 - HtmlbrycView Answer on Stackoverflow
Solution 6 - HtmlSomeGuyView Answer on Stackoverflow
Solution 7 - HtmlDanko DurbićView Answer on Stackoverflow
Solution 8 - HtmlMs2gerView Answer on Stackoverflow
Solution 9 - HtmlmatvView Answer on Stackoverflow
Solution 10 - HtmlAnthonyView Answer on Stackoverflow
Solution 11 - HtmlEricView Answer on Stackoverflow
Solution 12 - HtmlJoshi SpawnbroodView Answer on Stackoverflow
Solution 13 - HtmlleftclickbenView Answer on Stackoverflow
Solution 14 - HtmlSnuggsView Answer on Stackoverflow
Solution 15 - HtmldkellnerView Answer on Stackoverflow
Solution 16 - HtmlCode WhispererView Answer on Stackoverflow