In HTML and CSS should I use Single Quotes or Double Quotes? Is there any recommendation?

Asked

Viewed 1,563 times

4

I recently noticed that the text editor that I use gives me an "alert" if I use simple quotes ' ' in HTML.

Below are two examples, one using Simple Quotes in the body of the document in <body>, and another using Simple Quotes inside the <head>. Note that where there are Double Quotes there is no "Alert".

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

OBS: Note that the Browser can interpret the code, even with Simple Quotes! Even with them the code is rendered right on the screen!

And to confuse even more seems to me that in CSS there is no problem in using Single or Double Quotes... Note that in the image there are Quotes of the two types mixed and still no problem.

inserir a descrição da imagem aqui

Then there were doubts:

  • There is good practice in using Quotes in HTML and CSS?
  • The browser sees no difference between the types of quotation marks and I can use the one I think best?
html css browser

  • Related: https://answall.com/q/244031/8063

2 answers

7


No, no, yes, yes.

There is no established good practice, use the one that suits you best. There is no difference for the browser since the way to use it does not break the HTML syntax and generate unexpected results (but then the error was yours, not from the browser) and yes, you can use what you prefer.

In accordance with specification of the W3C, you can use double quotes, single quotes and even no quotes. It makes no difference.

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)

Translating by default the SGML (Standard Generalized Markup Language) requires that all attribute values are delimited by double quotes (ASCII table character 34) or single quotes (ASCII table character 39).

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.

Translating, in certain cases authors can specify the value of an attribute with no quotation marks. In this case the attribute value may only have letters (a-za-Z), digits (0-9), hyphens, dots, underscores and two dots. The same specification even recommends avoiding this practice whenever possible - no further reason.

Then use whatever you like. It is probably always recommended to use either single or double if one day is required you do not need to correct your code.

.text-red {
  color: red;
}
<div class="text-red">Com aspas duplas</div>
<div class='text-red'>Com aspas simples</div>
<div class=text-red>Sem aspas</div>

It is also mentioned that the use of both is allowed precisely to allow the use of characters in their values, as well as other languages. If you set the value with double quotes, the single quote will not break the syntax; the reciprocal is true.

But in all cases you can represent the character with your code without interfering with the HTML syntax. For example, to use double quotes in a double quote defined value you can do:

<a title="Valor do &#34;title&#34; com aspas duplas">Veja o title</a>

The title anchor will be Valor do "title" com aspas duplas whether or not it has been defined with double quotation marks.

But why the editor complained of single quotes?

It must be the editor’s internal configuration in order to maintain consistency in the project. It is more common to use double quotes and probably the editor is configured to use double quotes. When using single quotes it will emit this alert (not a error) that maybe you should reconsider your code. If double quotes are used throughout the project, why use single quotes? It is probably configurable and if you want to use single quotes, you can do it and the message will appear whenever you use double quotes.

  • 3

    Dude without quotes was new to me, but really it’s like Maniero’s Fiat 147... It works, but it shouldn’t :D

4

The common standard, the standard used in HTML is the presence of double quotes (") between each attribute of an element, such as style, src in images. It is purely a standard.

It is preferable to use the same symbol on both to facilitate maintenance. In CSS and HTML, double quotes are used, but in Javascript and Typescript the usual is to use single quote/quotes (') to indicate strings.

In short, it’s all standard.

For example, you’d better use " in HTML/CSS to write JS commands on tags and have a clear differentiation, rather than making use of escape characters.

Browser other questions tagged html css browser

You are not signed in. Login or sign up in order to post.