Double quote in html attribute

Deprecated Behaviour

The inane, sometimes insane, ramblings from the mind of Brenton Alker.

Single or Double Quotes for HTML Attributes?

The issue of whether to use single quotes or double quotation marks in HTML attributes is a topic that has been somewhat debated for some time now. The reason there is debate is due to the differences in, and the leniency of the relevant standards or recommendations. So here’s my take.

The W3C’s HTML 4.01 Recommendation allows the use of either single or double quotation marks and in certain cases no quotation marks are required at all. To quote the recommendation:

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

XHTML1 is a little stricter, saying that all attribute values must be quoted, even those which appear to be numeric, but (as far as I can tell) still allows the use of either quote.

While I am all for flexibility in standards, it can and does lead to inconsistencies between developers, projects and even within the same document.

This inconsistency is not a problem for the majority of (especially static) X/HTML documents. Even though double quotes are recommended, the choice is essentially inconsequential, and may be influenced by factors such as personal preference or the contents of the value being quoted (because single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa).

It does become more relevant once dynamic pages are introduced, mainly due to the uncertainty of the value within the quotes (which can be a deciding factor in the choice, as mentioned above). In this situation I strongly advocate the use of double quotes. Let me explain why with a simple example.

Imagine a template, used in a dynamic web page, that displays a form to allow some data to be entered or edited. With single quotes, an example in PHP may look like this:

This would work fine in most cases, but consider the case where the $name variable contains an apostrophe such as in “O’Brien”. The resulting HTML would look like this:

This would obviously cause problems with the display, causing only an “O” to be displayed inside the text field (not to mention invalid markup). Of course, you could run the value through the PHP’s addslashes() function, and the problem would be solved. But addslashes is one of those functions I try to use very sparingly, it has a tendency to bite you by adding slashes where they are not intended, such as before slashes intended to be escaping other characters. Instead, I prefer to use double quotes around all attributes, like so:

The advantage is that, by passing the variables through a htmlentities function (or equivalent). This will convert any double quotes in the variable to the HTML entity “»”, preventing the reverse of the problem described with “O’Brien” and ensuring the markup is going to be valid and the value is as intended. This only works for double quotes because there is no standard HTML entity for single quotes (The ASCII code can be used, and ' is supported in some browsers, but these aren’t as widely supported as ").

On the surface, the approach of converting the HTML entities may appear to be no better or worse than the method of escaping the single quotes with addslashes. The advantage is, converting the HTML entities will also account for other characters that should be converted as well, for example the ampersand (&) that, while they may not cause the page to fail to function (most browsers will compensate), will render the HTML invalid if not converted. As such, this conversion would need to be done even with the escaping using slashes, so why use both? Taking this into consideration, I have yet to find a good reason for using single quotes (at least if the value contains dynamic content).

So that’s my vote, and my reasoning behind it. Vote 1: Double quotes for attribute value delimiters.

Posted by Brenton Alker Feb 19 th , 2007 Code, HTML/CSS, PHP

Recent Posts

Источник

How to Escape Quotes in HTML Attribute Values

How do I properly escape quotes inside HTML attributes?

» is the correct way, the third of your tests:

You can see this working below, or on jsFiddle.

Are single/double quotes allowed inside HTML attribute values?

Yes, both quotes are allowed in attribute values, but you must HTML-escape the quote you’re using as an attribute value delimiter, as well as other HTML-special characters like < and & :

function encodeHTML(s) return s.split('&').join('&').split('<').join('<').split('"').join('"').split("'").join(''');
>

var html= 'Text';

However, you are usually much better off not trying to hack a document together from HTML strings. You risk bugs and HTML-injection (leading to cross-site-scripting security holes) every time you forget to escape. Instead, use DOM-style methods like attr() , text() and the construction shortcut:

How do I escape quotes in HTML attribute values?

You just need to swap any ‘ characters with the equivalent HTML entity character code:

Alternatively, you could create the whole thing using jQuery’s DOM manipulation methods:

var row = $("").append("Name ");
$("", < value: data.name >).appendTo(row.children("td:eq(1)"));

How to escape double quotes in a title attribute

How to escape double quotes in HTML attribute value in Ruby?

To properly encode a double quote in an HTML attribute value, there are several ways:

You can use an unescaped » if the attribute value itself is delimited by ‘. ‘ or vice-versa: (just like strings in Ruby)

From within Ruby, you could call CGI.escapeHTML : (I’m using Ruby’s %(. ) percent string literal here for the meta tag string, so I don’t have to escape all the » )

require 'cgi'

name = 'some "thing"'
meta = %(" />)
#=> ""

puts meta

Or the tag helper if you’re using Rails:

escaping inside html tag attribute value

There are two types of “escapes” involved here, HTML and JavaScript. When interpreting an HTML document, the HTML escapes are parsed first.

As far as HTML is considered, the rules within an attribute value are the same as elsewhere plus one additional rule:

You can escape > (or any other data character) if you like, but it is never needed.

On the JavaScript side, there are some escape mechanisms (with \ ) in string literals. But these are a different issue, and not relevant in your case.

In your example, on a browser that conforms to current specifications, the JavaScript interpreter sees exactly the same code alert(‘Hello’); . The browser has “unescaped” ‘ or ‘ to ‘ . I was somewhat surprised to here that ‘ is not universally supported these days, but it’s not an issue: there is seldom any need to escape the Ascii apostrophe in HTML (escaping is only needed within attribute values and only if you use the Ascii apostrophe as its delimiter), and when there is, you can use the ‘ reference.

Escape Quotes In HTML5 Data Attribute Using Javascript

There is no way around it, you have to escape the values properly, or the HTML can’t be parsed properly. You can’t use Javascript to correct the code after it is parsed, because then it has already failed.

Your example with proper HTML encoding would be:

You can’t use backslash to escape characters, because it’s not Javascript code. You use HTML entities to escape characters in HTML code.

If you can’t control how the data is input, then you are screwed. You simply have to find a way to take control over it.

How can I escape a single quote?

You could use HTML entities:

For more, you can take a look at Character entity references in HTML.

HTML attribute with/without quotes

It is all about the true validity of HTML markup. It’s for what W3C (WWW Consortium) work for. Many things might work in HTML but they have to be validated in order to be more carefully recognized by the web browser. You can even omit the and tags at the start and end, but it is not recommended at all, nobody does it and it is considered as a ‘bad code’.

Therefore, it is more valid to put them in quotes.

Источник