ChatGPT解决这个技术问题 Extra ChatGPT

Single vs Double quotes (' vs ")

I've always used single quotes when writing my HTML by hand. I work with a lot of rendered HTML which always uses double quotes. This allows me to determine if the HTML was written by hand or generated. Is this a good idea?

What is the difference between the two? I know they both work and are supported by all modern browsers but is there a real difference where one is actually better than the other in different situations?

To answer the question about whether using single- vs double-quotes as means to determine hand-written vs generated HTML, no it's probably not a good idea. While code that is inconsistent (uses single in some places, double in others) is probably hand-written, I'm sure plenty of people (including myself) use double-quotes everywhere, but our code certainly isn't computer-generated ;)
@Aito's answer is correct indeed and should be accepted ... Personally, I use single quotes for short attributes like single keywords / tags, URL and references; anything that is not intended to be read by human, actually. For longer texts, or anything that might include spaces or single quotes / apostrophes - as content, I use double quotes. It just a matter of your style (or the style guide you use)
checkout 10 major websites and see what the majority of them use, like stackoverflow, youtube/google, wikipedia. So far I have trouble finding major websites that use single-quotes.
so many websites use double quotes for HTML, so please use double quotes.. it also affects searching in HTML documents, single quotes and double quotes take effect.. I standardized using double quotes..

B
Blixt

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.


and being consistent (either with ' or ") will most probably result in higher compression rates in case you serve compressed (gzip, deflate) pages
I suggest though single over double -- Why use two when one can do the job.
@cherouvim higher compression rates? We're talking 1 byte.. maybe 2? LOL. I don't think that's relevant.
@JohnHunt: Just did a quick test on a 1823 bytes js file (a random Backbone Model from a random application). The gzip output if all of the quotes are the same (either ' or ") was 809 bytes. Mixing them pushed the output up to 829 bytes. This may be irrelevant to you but that doesn't mean that it's irrelevant to everybody.
@Jacob Think more like 0.0001%, at most. In the real world this difference isn't worth anyone's time to even think about unless people are using morse code to transfer the data with a flashlight. 20 bytes is 160 bits. To put this into perspective, in 1962 a Bell 103 or V.21 modem could transfer this in about half a second. In 1991 with a 14.4k modem it'd take a 90th of a second. Today, on the web? It's irrelevant. Period. Integrated specialised north-pole or space comms stuff, maybe not. The web, yes, irrelevant.
B
Bennett

I use " as a top-tier and ' as a second tier, as I imagine most people do. For example

<a href="#" onclick="alert('Clicked!');">Click Me!</a>

In that example, you must use both, it is unavoidable.


I do that as well but it can be avoided if you avoid inlining javascript inside html.
There are other non-inline-javascript situations where single quotes might be required, such as when using custom data-* attributes. Depending on your application and how you use the data-* attributes, you might need to use ''s within "'s. Sometimes we use them for Google Analytics Event Tracking: <a href="..." data-track="Homepage Banner|Clicked|Dick's Sporting Goods">click me</a>
Consider var x = "<a href='" + url + "'>click me</a>";
Can be easily avoided like this: . However, this is a lot less readable.
I am not entirely sure if that is officially supported by SGML and HTML5 however.
C
Corwin Newall

Quoting Conventions for Web Developers

The Short Answer

In HTML the use of single quotes (') and double quotes (") are interchangeable, there is no difference.

But consistency is recommended, therefore we must pick a syntax convention and use it regularly.

The Long Answer

Web Development often consists of many programming languages. HTML, JS, CSS, PHP, ASP, RoR, Python, etc. Because of this we have many syntax conventions for different programming languages. Often habits from one language will follow us to other languages, even if it is not considered "proper" i.e. commenting conventions. Quoting conventions also falls into this category for me.

But I tend to use HTML tightly in conjunction with PHP. And in PHP there is a major difference between single quotes and double quotes. In PHP with double quotes "you can insert variables directly within the text of the string". (scriptingok.com) And when using single quotes "the text appears as it is". (scriptingok.com)

PHP takes longer to process double quoted strings. Since the PHP parser has to read the whole string in advance to detect any variable inside—and concatenate it—it takes longer to process than a single quoted string. (scriptingok.com)

Single quotes are easier on the server. Since PHP does not need to read the whole string in advance, the server can work faster and happier. (scriptingok.com)

Other things to consider

Frequency of double quotes within string. I find that I need to use double quotes (") within my strings more often than I need to use single quotes (') within strings. To reduce the number of character escapes needed I favor single quote delimiters. It's easier to make a single quote. This is fairly self explanatory but to clarify, why press the SHIFT key more times than you have to.

My Convention

With this understanding of PHP I have set the convention (for myself and the rest of my company) that strings are to be represented as single quotes by default for server optimization. Double quotes are used within the string if a quotes are required such as JavaScript within an attribute, for example:

<button onClick='func("param");'>Press Me</button>

Of course if we are in PHP and want the parser to handle PHP variables within the string we should intentionally use double quotes. $a='Awesome'; $b = "Not $a";

Sources

Single quotes vs Double quotes in PHP. (n.d.). Retrieved November 26, 2014, from http://www.scriptingok.com/tutorial/Single-quotes-vs-double-quotes-in-PHP


The single quote vs double quote performance difference in PHP was known to be zero years before you answered this question: nikic.github.io/2012/01/09/…
You find more double quotes than single quotes within your strings? Interesting. I can't remember the last time I had a double quote in my strings.
Constantly. In the past 10 years as a full-stack developer i find myself needing to use double quotes within a string 10x more often than single quotes. The most common example for JavaScript is attribute selectors ONLY work with double quotes so document.querySelector("[name^='myname']") does not work at all while document.querySelector('[name^="myname"]') works perfectly.
@DustinPoissant WHAAAT?? On which browser??
A
Ardent Coder

If it's all the same, perhaps using single-quotes is better since it doesn't require holding down the shift key. Fewer keystrokes == less chance of repetitive strain injury.


well, at least on the Galactic Common layout. (hush-hush)
What has the risk of RSI and the number of keystrokes got to do with coding standards?
so many opinions that there is no difference between single and double quotes, but only one that clarifies that the number of keystrokes differs a factor of TWO. And we need many quotes. May I add with the suggestion that it will perhaps require more neurons to fire for the pattern recognition of a double quote in our brain?
I disagree. Displayed characters and the way you input them are two separate things. The fact that you, personally, may like a certain input mechanism requiring holding down the shift key to obtain a double quote does not mean that the OP likes to use the same input mechanism.
Not gonna lie, RSI is a main reason why I use single-quotes whenever I can. Less pinky pain!
S
Stuart

Actually, the best way is the way Google recommends. Double quotes: https://google.github.io/styleguide/htmlcssguide.xml?showone=HTML_Quotation_Marks#HTML_Quotation_Marks

See https://google.github.io/styleguide/htmlcssguide.xml?showone=HTML_Validity#HTML_Validity Quoted Advice from Google: "Using valid HTML is a measurable baseline quality attribute that contributes to learning about technical requirements and constraints, and that ensures proper HTML usage."


The grand majority of websites I encountered so far, including stackoverflow, use double quotes, I think consistency across the web is for the better, so the correct answer IMHO is also "double quotes".
But why!? Why " over '!??
@San Consistency, mostly. It follows the American English standard that double quotes are for quotes and single quotes are for subquotes.
D
David Thomas

In HTML I don't believe it matters whether you use " or ', but it should be used consistently throughout the document.

My own usage prefers that attributes/html use ", whereas all javascript uses ' instead.

This makes it slightly easier, for me, to read and check. If your use makes more sense for you than mine would, there's no need for change. But, to me, your code would feel messy. It's personal is all.


Why does it need to be used consistently? Just for readability?
Because it's easier to avoid mistakes that way.
I often have the attributes use " as well, but other times I'm writing code in PHP code where I would prefer the echo's use "'s in order to allow parsing. Any html attributes within this echo is more readable if using ''s. Sure it's not consistent, but it's much easier without all the backslashes.
Whatever works for you is fine; being consistent doesn't mean 'always do X' it just means 'in situation X do it this way,' consistency can be context-aware; and is best-used as such.
A
Alan Dong

Using double quotes for HTML

i.e.

<div class="colorFont"></div>

Using single quotes for JavaScript

i.e.

$('#container').addClass('colorFont');
$('<div class="colorFont2></div>');

R
Randy Tang

I know LOTS of people wouldn't agree, but this is what I do and I really enjoy such a coding style: I actually don't use any quote in HTML unless it is absolutely necessary.

Example:

<form method=post action=#>
<fieldset>
<legend>Register here: </legend>
  <label for=account>Account: </label>
  <input id=account type=text name=account required><br>
  <label for=password>Password: </label>
  <input id=password type=password name=password required><br>
...

Double quotes are used only when there are spaces in the attribute values or whatever:

<form class="val1 val2 val3" method=post action=#>
  ...
</form>

Is there a reason behind? Or you just "really enjoy such coding style"?
Without quotes the HTML looks a lot cleaner (and the file size is a little bit smaller). That's the only reason and nothing else. Furthermore, I really can't see the point to require every attribute to have quotes. Why can't it just be omitted to save the trouble? Even w3.org accepts unquoted attribute values (w3.org/TR/html-markup/syntax.html#syntax-attr-unquoted). Simple is better than complex. Is it some kind of religion to have quotes?
Nope, no religion that I am aware of. I've been around HTML for quite some time and never seen your style used before ... therefore I asked.
Also, HTML minifiers strip unnecessary quotes too.
The problem with leaving out quotes around attribute values is that different standards have different lists of characters which need to be quoted. For example, HTML4 said only values consisting of letters, digits, dashes and dots could go unquoted, but HTML5 says anything goes except spaces and " ' ` < = >, so you should be careful, especially with older browsers!
A
Aryan Beezadhur

I had an issue with Bootstrap where I had to use double quotes as single quotes didn't work.

class='row-fluid' made the last <span> fall below the other <span>s, rather than sitting nicely beside them on the far right. class="row-fluid" worked.


P
Paul Taylor

It makes no difference to the html but if you are generating html dynamically with another programming language then one way may be easier than another.

For example in Java the double quote is used to indicate the start and end of a String, so if you want to include a doublequote within the String you have to escape it with a backslash.

String s = "<a href=\"link\">a Link</a>"

You don't have such a problem with the single quote, therefore use of the single quote makes for more readable code in Java.

String s = "<a href='link'>a Link</a>"

Especially if you have to write html elements with many attributes.(Note I usually use a library such as jhtml to write html in Java, but not always practical to do so)


Did two internships on servlets. I was analyzing my code and only now i started realizing the reality on double quotes, single quotes and string concatenations. The website i used to study used double quotes in html and single quotes in java. Didnt even realise. Glad i finally got it...
M
Mauro

if you are writing asp.net then occasionally you have to use double quotes in Eval statements and single quotes for delimiting the values - this is mainly so that the C# inline code knows its using a string in the eval container rather than a character. Personally I'd only use one or the other as a standard and not mix them, it looks messy thats all.


a
a1204773

Using " instead of ' when:

<input value="user"/> //Standard html
<input value="user's choice"/> //Need to use single quote
<input onclick="alert('hi')"/> //When giving string as parameter for javascript function

Using ' instead of " when:

<input value='"User"'/> //Need to use double quote
var html = "<input name='username'/>" //When assigning html content to a javascript variable

In your case of "assigning html content do js variable", i usually prefer to do the opposite: var html = '<input name="username" />'; and keep consistency with ther rest of html :)
M
Marcin C

I'm newbie here but I use single quote mark only when I use double quote mark inside the first one. If I'm not clear I show You example:

<p align="center" title='One quote mark at the beginning so now I can
"cite".'> ... </p>

I hope I helped.


t
tfont

Lots of great insightful replies here! More than enough for anyone to make a clear and personal decision.

I would simply like to point out one thing that's always mattered to me. And take this with a grain of salt!

Double quotes apply to strings that have more than a single phase such as "one two" rather than single quotes for 'one' or 'two'. This can be traced as far back as C and C++.
(reference here or do your own online search).

And that's truly the difference.

With this principle (this different), parsing became possible such as "{{'a','b'},{'x','y'}} or "/[^\r\n]*[\r\n]" (which needed to be space independent because it's expressional) or more famously for HTML specific title = "Hello HTML!" or style = "font-family:arial; color:#FF0000;"

The funny thing here is that HTML (coming from XML itself) commonly adopted double quotes due to expressional features even if it is a single character (e.g. number) or single phase string.

As NibblyPig pointed out quite well and straightforward:
" as a top-tier and ' as a second tier since "'a string here'" is valid and expected by W3 standards (which is for the web) and will most likely never change.

And for consistency, double quotes is wisely used, but only fully correct by preference.


B
Brombomb

In PHP using double quotes causes a slight decrease in performance because variable names are evaluated, so in practice, I always use single quotes when writing code:

echo "This will print you the value of $this_variable!";
echo 'This will literally say $this_variable with no evaluation.';

So you can write this instead;

echo 'This will show ' . $this_variable . '!';

I believe Javascript functions similarly, so a very tiny improvement in performance, if that matters to you.

Additionally, if you look all the way down to HTML spec 2.0, all the tags listed here;

W3 HTML DTD Reference

(Use doublequotes.) Consistency is important no matter which you tend to use more often.


JavaScript does not evaluate variable names in strings. There is no difference between ' and " in JavaScript.
C
C.D. Reimer

Double quotes are used for strings (i.e., "this is a string") and single quotes are used for a character (i.e., 'a', 'b' or 'c'). Depending on the programming language and context, you can get away with using double quotes for a character but not single quotes for a string.

HTML doesn't care about which one you use. However, if you're writing HTML inside a PHP script, you should stick with double quotes as you will need to escape them (i.e., \"whatever\") to avoid confusing yourself and PHP.


I know quite a few programming languages, but one where this is true.
@mikl general practice in C# and Java is Strings in double quotes and chars in single quotes. But that gives no validation for this answer. Unless this is the answer to a different question.