Is It Correct to Use Single Quotes for HTML Attributes

Is it correct to use single quotes for HTML attributes?

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.

Single vs Double quotes (' vs )

The w3 org said:

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 ".

So... seems to be no difference. Only depends on your style.

Is it acceptable to use single quotes around values in HTML attributes?

Yes, that's acceptable. It works in browsers, and it's allowed by the specifications.

The HTML5 spec says:

In the HTML syntax, attributes can be specified in four different ways:

1. empty attribute syntax
2. unquoted attribute-value syntax
3. single-quoted attribute-value syntax
4. double-quoted attribute-value syntax

The HTML4 spec says:

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.

Are double and single quotes interchangeable in JavaScript?

The most likely reason for use of single vs. double in different libraries is programmer preference and/or API consistency. Other than being consistent, use whichever best suits the string.

Using the other type of quote as a literal:

alert('Say "Hello"');
alert("Say 'Hello'");

This can get complicated:

alert("It's \"game\" time.");
alert('It\'s "game" time.');

Another option, new in ECMAScript 6, is template literals which use the backtick character:

alert(`Use "double" and 'single' quotes in the same string`);
alert(`Escape the \` back-tick character and the \${ dollar-brace sequence in a string`);

Template literals offer a clean syntax for: variable interpolation, multi-line strings, and more.

Note that JSON is formally specified to use double quotes, which may be worth considering depending on system requirements.

Single and double quotes together as HTML attribute value?

Is there a way to fix it WITHOUT using HTML entities (Like "), htmlentities() or similar functions?

No, there is not. The double quote (") has special meaning inside a HTML attribute. If you want to put it into an attribute value, you must (this is not a true must but a good rule of thumb. It's a must if you use attributes delimited by double-quotes as you do in your question) write it as its entity ". There is no way around it.

Actually even <tag attr='this"'> is not wrong HTML, too and most browsers can deal with that. However it doesn't help you because you're looking for both quotes - single and double - and one of these always in HTML is a delimiter of the attribute value - if you need spaces inside the attribute value (as you do).

However, do not worry about that. It works, and you can express everything you like with that, including the combination of quotes you have.

And actually PHP is there for you to take the burden of "escaping" all those characters just with the htmlspecialchars method doing all the work for you. Inside a PHP string you have the original text - with single and double quotes as you see fit - verbatim.

$myString = 'She said: "I don\'t know."';
printf('<input type="text" name="myInput" value="%s" />'
       , htmlspecialchars($myString));

Just a shortened example that should demonstrate how this works. Online demo.

What are the functional differences between single-quoted vs double-quoted html attributes?

There is no functional difference. Quoting the W3C on SGML and HMTL:

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.

...

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.

---

Related Topics