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:

<option value=""asd">test</option>

You can see this working below, or on jsFiddle.

alert($("option")[0].value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select>  <option value=""asd">Test</option></select>

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= '<label my_attr="'+encodeHTML(attr_value)+'">Text</label>';

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:

$('body').append(
    $('<label>', {my_attr: attr_value, text: 'Text'})
);

How do I escape quotes in HTML attribute values?

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

data.name.replace(/'/g, "'");

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

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

How to escape double quotes in a title attribute

This variant -

<a title="Some "text"">Hover me</a>

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)
```
<meta property="og:name" content='some "thing"' />
```
If the attribute value is delimited by "...", you can use the double quote's numeric character reference ":
```
<meta property="og:name" content='some "thing"' />
```

or its character entity reference ":

<meta property="og:name" content="some "thing"" />

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 = %(<meta property="og:name" content="#{CGI.escapeHTML(name)}" />)
#=> "<meta property=\"og:name\" content=\"some "thing"\" />"

puts meta

Or the tag helper if you're using Rails:

<%= tag(:meta, property: 'og:name', content: name) %>

Both of the above output:

<meta property="og:name" content="some "thing"" />

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:

The less-than character < should be escaped. Usually < is used for this. Technically, depending on HTML version, escaping is not always required, but it has always been good practice.
The ampersand & should be escaped. Usually & is used for this. This, too, is not always obligatory, but it is simpler to do it always than to learn and remember when it is required.
The character that is used as delimiters around the attribute value must be escaped inside it. If you use the Ascii quotation mark " as delimiter, it is customary to escape its occurrences using " whereas for the Ascii apostrophe, the entity reference ' is defined in some HTML versions only, so it it safest to use the numeric reference ' (or ').

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:

<p class="example" data-example="She said "<abbr title="What The F***">WTF</abbr>" on last night's show.">

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

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 <html> and </html> 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.