Are single/double quotes allowed inside HTML attribute values?

by

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('&amp;').split('<').join('&lt;').split('"').join('&quot;').split("'").join('&#39;');
}

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'})
);

More Related Contents:

  1. HTML attribute with/without quotes
  2. Why shouldn’t `'` be used to escape single quotes?
  3. How to escape double quotes in a title attribute
  4. Menu does not align correctly in Safari
  5. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  6. How can I expand floated child div’s height to parent’s height?
  7. Minimum and maximum value of z-index?
  8. Adding HTML entities using CSS content
  9. How can I find an element by CSS class with XPath?
  10. Should I use px or rem value units in my CSS? [closed]
  11. Why is it a bad thing to have multiple HTML elements with the same id attribute?
  12. Is HTML case sensitive?
  13. Difference between iframe, embed and object elements
  14. Bootstrap Accordion button toggle “data-parent” not working
  15. How can I make a display:flex container expand horizontally with its wrapped contents?
  16. CSS table-cell equal width
  17. How to make div’s percentage width relative to parent div and not viewport
  18. Draw Circle using css alone [duplicate]
  19. Default text which won’t be shown in drop-down list
  20. Why my inline-block divs are not aligned when only one of them has text? [duplicate]
  21. Controlling image load order in HTML
  22. Absolute position and Overflow:hidden
  23. Fixed Header, Footer, and Sidebars with scrolling content area in center
  24. How to center an iframe horizontally?
  25. HTML input field OUTSIDE of a form
  26. word-wrap break-word does not work in this example
  27. CSS override rules and specificity
  28. How to place Text and an Image next to each other in HTML?
  29. How can I control the height of an Option element in Webkit?
  30. How to always show the vertical scrollbar in a browser?

Leave a Comment