297

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?

5
  • 2
  • 8
    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 ;)
    – Doktor J
    Feb 20, 2012 at 12:16
  • @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)
    – cedbeu
    Feb 27, 2013 at 15:54
  • 1
    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. Nov 2, 2015 at 12:55
  • 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.. Nov 5, 2021 at 9:22

17 Answers 17

426

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.

22
  • 47
    and being consistent (either with ' or ") will most probably result in higher compression rates in case you serve compressed (gzip, deflate) pages
    – cherouvim
    Mar 3, 2010 at 16:53
  • 8
    I suggest though single over double -- Why use two when one can do the job. Jun 22, 2014 at 19:00
  • 8
    @cherouvim higher compression rates? We're talking 1 byte.. maybe 2? LOL. I don't think that's relevant.
    – John Hunt
    Jan 15, 2016 at 14:42
  • 16
    @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.
    – cherouvim
    Jan 15, 2016 at 15:00
  • 8
    @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.
    – John Hunt
    Oct 9, 2017 at 9:14
87

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.

7
  • 43
    I do that as well but it can be avoided if you avoid inlining javascript inside html.
    – cherouvim
    Mar 3, 2010 at 17:04
  • 5
    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> May 14, 2012 at 3:31
  • 3
    Consider var x = "<a href='" + url + "'>click me</a>";
    – NibblyPig
    May 14, 2012 at 8:16
  • 4
    Can be easily avoided like this: <a onclick="alert(\"Clicked!\")">. However, this is a lot less readable.
    – fabspro
    Jul 16, 2012 at 13:36
  • 2
    I am not entirely sure if that is officially supported by SGML and HTML5 however.
    – fabspro
    Jul 16, 2012 at 13:37
43

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

  1. 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.
  2. 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

4
  • 6
    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/… Oct 20, 2017 at 16:12
  • 1
    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. May 13, 2018 at 14:36
  • 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. May 14, 2018 at 14:43
  • 2
    @DustinPoissant WHAAAT?? On which browser??
    – Mr Lister
    Nov 28, 2018 at 21:00
20

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.

5
  • 2
    well, at least on the Galactic Common layout. (hush-hush)
    – n611x007
    Feb 13, 2014 at 14:51
  • 2
    What has the risk of RSI and the number of keystrokes got to do with coding standards?
    – Dib
    Aug 11, 2014 at 10:41
  • 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?
    – Roland
    Feb 23, 2017 at 10:27
  • 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.
    – Damien L
    Sep 8, 2021 at 14:10
  • Not gonna lie, RSI is a main reason why I use single-quotes whenever I can. Less pinky pain!
    – JoePC
    Nov 8, 2021 at 23:08
15

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

3
  • 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". Nov 2, 2015 at 12:49
  • 2
    But why!? Why " over '!??
    – San
    Aug 23, 2016 at 19:00
  • 2
    @San Consistency, mostly. It follows the American English standard that double quotes are for quotes and single quotes are for subquotes.
    – Nielsvh
    Aug 17, 2017 at 23:01
11

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.

4
  • Why does it need to be used consistently? Just for readability?
    – timetofly
    Mar 15, 2013 at 17:59
  • Because it's easier to avoid mistakes that way. Mar 15, 2013 at 18:04
  • 2
    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.
    – timetofly
    Mar 15, 2013 at 18:14
  • 3
    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. Mar 15, 2013 at 18:16
6

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>
12
  • 1
    Is there a reason behind? Or you just "really enjoy such coding style"?
    – Bugs Bunny
    Jun 9, 2015 at 15:04
  • 4
    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?
    – Randy Tang
    Jun 9, 2015 at 16:40
  • 7
    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.
    – Bugs Bunny
    Jun 10, 2015 at 7:06
  • 2
    Also, HTML minifiers strip unnecessary quotes too.
    – Nimrod
    Oct 27, 2017 at 17:52
  • 2
    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!
    – Mr Lister
    Nov 28, 2018 at 21:18
5

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>');
0
3

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.

2

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)

1
  • 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...
    – Michael
    Oct 28, 2018 at 14:59
1

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.

1

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
1
  • 3
    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 :)
    – Erenor Paz
    Mar 23, 2014 at 17:32
0

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.

0

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.

0

Summary:

Both are fine, double quotes is more standard, single quotes are good for special cases.

In detail:

Both are perfectly fine from a technical point of view. Being consistent (sticking to " or ' all the time) is better from a human point of view (working in a team) and also slightly better for compression.

If you want to take that farther and be consistent with the rest of the world, double quotes are more widespread for HTML, while nowadays single quotes are widespread for Javascript embedded in HTML, including with modern frameworks like React/Vue/Svelte:

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

But there are cases where single quotes are still a good option. For example, if you have HTML embedded in JSON. JSON only supports double quotes, so single quotes for HTML are handy here. That way you don't have to constantly escape JSON double quotes with \":

data.json:

{
    "title": "LianBOT",
    "description": "This is a small sumo robot. <a href='https://www.youtube.com/watch?v=deuFnTpAc_c'>Watch it on YouTube</a>."
}
-5

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.

1
  • 13
    JavaScript does not evaluate variable names in strings. There is no difference between ' and " in JavaScript. Aug 14, 2012 at 12:08
-10

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.

2
  • 1
    I know quite a few programming languages, but one where this is true.
    – mikl
    Jul 3, 2014 at 13:17
  • 3
    @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.
    – Evorlor
    Jan 29, 2015 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.