Single Versus Double Quotation Marks in HTML & CSS

Single versus double quotation marks in HTML & CSS

Either are valid, but you probably should stick to a certain style guide. For example, Google's style guide suggest using double quotes for HTML and single quotes for CSS. (Although Google Fonts doesn't follow this exactly)

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.

what is the difference between single quotation ' and double quotation on CSS?

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,it seems to be no difference. Only depends on your style.

What Quotation Marks Should I Use In CSS?

The standards say:

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

i.e. none, single or double. If you care about IE5/Mac (which you probably don't these days) avoid ', otherwise use whatever makes you comfortable.

When should I use double or single quotes 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.

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.

How can I escape single or double quotation marks in CSS?

Use a backslash.

content:"i said don\"t Touch me";

Same goes for single quotes within single-quoted strings.

jsFiddle demo

Why are double quotes shown only for the first element?

Your open quotes are not terminated, so the browser makes the "smart" assumption that you're about to nest your quotes, resulting in double outer quotes for the first element and single inner quotes for the second. This is how quote punctuation works in nested quotations. See Wikipedia and the references to nested quotations therein.

Notably, element boundaries are ignored, so it doesn't matter even if your second element is nested deeper or if both elements are nested in their own parent elements, it will still work the same way, which makes it particularly useful in paragraphs that may contain different kinds and combinations of phrasing elements (a, br, code, em, span, strong, etc, as well as q itself). How quotes are nested depends solely on the number of open-quotes and close-quotes that have been generated at any point in time, and the algorithm is detailed in section 12.3.2 of the CSS2 spec, ending with the following note:

Note. The quoting depth is independent of the nesting of the source document or the formatting structure.

To that end, there are two so-called "solutions" to this problem, both of which involve adding an ::after pseudo-element to balance out the first set of open quotes.

By inserting close quotes using ::after the quotation for the first element is terminated before the second element is encountered so there is no nesting of quotations.

a::before {  content: open-quote;}
a::after {  content: close-quote;}

<a href="http://www.google.com">Google</a> <br><a href="http://www.amazon.com">Amazon</a>

Big Quotation marks styled in html css

Although it's not clear after reading your question I guess you want to change the shape of quotation marks.

Pick a proper unicode value and add a quotes property. E.g.

blockquote {    border:none;    font-family:Georgia, "Times New Roman", Times, serif;    margin-bottom:-30px;    quotes: "\201C""\201D""\2018""\2019";}
blockquote h3 {font-size:21px;}
blockquote h3:before { content: open-quote;font-weight: bold;font-size:100px;color:#889c0b;} blockquote h3:after { content: close-quote;font-weight: bold;font-size:100px;color:#889c0b;  }

<div class="container"><blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote></div>

---

Related Topics