This question already has answers here:
Are single quotes allowed in HTML?
(11 answers)
Single vs Double quotes (' vs ")
(16 answers)
Closed 5 years ago.
Is it acceptable to use single quotes around html attribute values like this:
<span class='classname'>Hi</span>
Instead of double quotes like this:
<span class="classname">Hi</span>
Who defines what's okay? W3C?
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:
empty attribute syntax
unquoted attribute-value syntax
single-quoted attribute-value syntax
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.
Single quotes are and have always been completely kosher, according to the W3 specification. It's a markup/code style choice, nothing more.
Yes, the W3C publishes HTML standards.
They also provide a validator at http://validator.w3.org/
the validator is ok with both for XHTML 1.0 Strict.
There is several HTML standards, so whether it’s "acceptable" entirely depends on which you're using. Furthermore collaborative projects may have a coding style which defines to use one or the other. Using " is de-facto standard, even if the HTML standard may allow ' as well.
Related
Given the following examples which I picked up from here:
CSS.escape(".foo#bar") // "\.foo\#bar"
CSS.escape("()[]{}") // "\(\)\[\]\{\}"
Since .foo#bar is a valid CSS selector expression. Why we need to append \ before some characters? Suppose I want to write my own program which does the same task of escaping all the values/expressions in a CSS file then, how should I proceed?
PS: I am always confused about the escaping, how should I think when it comes to escaping some input?
You escape strings only when those strings contain special symbols that you want to be treated literally. If you are expecting a valid CSS selector as user input, you shouldn't be escaping anything.
.foo#bar is a valid CSS selector, but it means something completely different from \.foo\#bar. The former matches an element with that respective class and ID, e.g. <div class=foo id=bar> in HTML. The latter matches an element with the element name ".foo#bar", which in a hypothetical markup language could be represented as <.foo#bar> (obviously this is not legal HTML or XML syntax, but you get the picture).
In ReStructuredText, is it possible to have emphasis and no emphasis in the same word? For example:
*emph*not-emph
leading to "emph no-emph", but with no white space in between? I can't find a way to do it, not even with a substitution.
What you are looking for is Character-Level Inline Markup. The description from the reStructuredText specification is (emphasis mine):
It is possible to mark up individual characters within a word with backslash escapes [...] Backslash escapes can be used to allow arbitrary text to immediately follow inline markup.
The two examples provided in the specification are:
For a single character immediately following inline markup:
Python ``list``\s use square bracket syntax.
For arbitrary text immediately following inline markup:
Possible in *re*\ ``Structured``\ *Text*, though not encouraged.
So to achieve the output you want, you need to use the backslash-escaped whitespace pattern:
*emph*\ not-emph
The reason this is required is because the inline markup recognition rules require that:
Inline markup end-strings must end a text block or be immediately followed by
whitespace,
one of the ASCII characters - . , : ; ! ? \ / ' " ) ] } > or
a non-ASCII punctuation character with Unicode category Pd (Dash), Po (Other), Pe (Close), Pf (Final quote), or Pi (Initial quote).
Note that the use of that pattern above is discouraged in the reStructuredText specification:
The use of backslash-escapes for character-level inline markup is not encouraged. Such use is ugly and detrimental to the unprocessed document's readability. Please use this feature sparingly and only where absolutely necessary.
Can the 'class' attribute of HTML5 elements contain line breaks? Is it allowable in the specs and do browsers support it?
I ask because I have some code that dynamically inserts various classes into the element and this has created one very long line that is hard to manage. Normally I would build the class value using a variable but the CMS I'm using requires the template conditional tags to be positioned inline with the HTML. I can't use variables or PHP.
What I found in my research is that some HTML tag attributes need to be a single line, but I haven't been able to discover if the class attribute is one of those.
Does anyone know something about this?
Per the HTML 4 spec, the class attribute is CDATA:
User agents should interpret attribute values as follows:
o Replace character entities with characters
o Ignore line feeds
o Replace each carriage return or tab with a single space.
so you're in good shape there.
The HTML5 spec describes a class as a set of space separated tokens, where a 'space' includes newlines.
So you should be good there, too.
Can the [class] attribute of HTML5 elements contain line breaks?
Yes. The HTML5 spec says:
The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.
The link proceeds to say:
A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters.
And space characters include:
space (' ')
tab (\t)
line feed (\n)
form feed (\f)
carriage return (\r)
The space characters, for the purposes of this specification, are U+0020 SPACE, "tab" (U+0009), "LF" (U+000A), "FF" (U+000C), and "CR" (U+000D).
Newlines as you would add to UTF-8 documents are:
line feeds (\n)
carriage returns (\r)
a carriage return followed immediately by a line feed (\r\n)
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Which type of quotes we should use in css background url (“…”)? Single, double or no quote needed?
Simple question. What quotation marks should I use in CSS?
Option #1:
background: url( 'foo.png' );
Option #2:
background: url( "foo.png" );
Both works on "normal browsers". I just want to follow the standards.
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.
The standard is that you can use either for strings, and you can use either or neither for URLs. For the most part there's no real difference, but if the value you're trying to quote has double-quotes in it then it's easier to use single-quotes, and vice-versa.
Besides that, you're welcome to prefer one or the other consistently if you think it makes your files nicer and easier to edit, but nobody will shoot you for using the "wrong" one.
I use double quotes...That's how I've seen it in books and tutorials. Just be consistent in your own work
This question already has answers here:
CSS attribute selectors: The rules on quotes (", ' or none?)
(2 answers)
Closed last year.
e.g.:
a[href="val"]
Does "val" need to have quotes around it? Single or double are acceptable? What about for integers?
TLDR: Quotes are required unless the value meets the identifier specification for CSS2.1
The CSS spec might say they are optional, but the real world presents a different story. When making a comparison against the href attribute you will need to use quotes (single or double work in my very limited testing - latest versions of FF, IE, Chrome.)
Interestingly enough the css spec link referenced by #Pekka happens to use quotes around their href-specific examples.
And it's not just due to non-alpha characters like the period or slashes that give this unique situation a quote requirement - using a partial match selector ~= doesn't work if you just use the "domain" in "domain.com"
Ok, every answer here is wrong (including my own previous answer.) The CSS2 spec didn't clarify whether quotes are required in the selector section itself, but the CSS3 spec does and quotes the rule as a CSS21 implementation:
http://www.w3.org/TR/css3-selectors/
Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.
And here is the identifier info:
http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
My answer seemed correct but that's because the '~=' is a white-space selector comparator so it will never match a partial string inside an href value. A '*=' comparator does work however. And a partial string like 'domain' does work for matching href='www.domain.com'. But checking for a full domain name would not work because it violates the identifier rule.
According to the examples in the CSS 2.1 specs, quotes are optional.
In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":
span[class=example] { color: blue; }
Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Numbers are treated like strings, i.e. they can be quoted, but they don't have to.
No, they don't have to have quotes, tough in order to avoid ambiguities many people do use quotes, which are needed if the value contains whitespace.
Either single or double quotes are fine, and integers will be treated the same way (css does not have a distinction between strings and integers).
See the examples in the spec.
They do not need to be quoted.
There is also no distinction between strings/doubles/integers. CSS isn't Turing-complete, let alone typed.