Five reasons why you should quote attribute values in HTML5

With HTML5, you don’t have to quote attribute values. Until you do.

One of the benefits often touted for HTML5 over XHTML is what I once heard Paul Irish describe as its “loosey goosey” approach to syntax. No longer the strict taskmaster that XHTML was, we can now do all kinds of cool stuff like leave off closing li and p tags, and of course, we no longer need to quote attribute values. Think of the bytes saved! The billions of developer hours saved no longer having to type " or '.

Except.

You can’t always leave off quotes from attribute values. Think about an element with two class attribute values.

<p class=important warning>

Here the browser actually see two attributes, class=important and a boolean attribute warning (which it doesn’t understand, but that’s not a problem, making up your own attribute names is what all the kids are doing these days (I’m looking at you Angular!))

So, we need to quote attributes values when they include spaces. But that’s not all. Unquoted attribute values must also not contain any of these characters:

", ', =, >, <, or `. Sure, you can have %, or # or £, but no backticks please!

If it does, then quote you must. Think about all sorts of URLs for APIs, or into CMS content, or to blog posts. A = is very likely to crop up in these URLs. So, why not simply quote all attribute values? One basic rule that will never get you into trouble, and cost you maybe a few dozen bytes a page at most.

BTW, the same rule applies to CSS values that take urls. We only need to use quotes around the URL value when it includes one of the same characters. But why not always again use quotes? Simple pattern, always works. And, the same applies to the value of attribute selectors. a[attr="attrvalue"] will always be correct. a[attr=attrvalue] won’t be if attrvalue contains spaces or one of our magic characters.

You could try to remember all these rules — go for it! But sometimes it just pays to be strict.

21 responses to “Five reasons why you should quote attribute values in HTML5”:

  1. I think it’s always best to err on the side of verbosity when coding, whether it’s quotes, brackets or closing tags. It just mitigates errors and improves legibility. If you want to save bytes on the page, trust a tool to do it for you either at deployment or in real time via a script on your server. Don’t do it yourself. You’re only going to run into trouble.

    • By: c
    • July 5th, 2013

    My feeling is that it’s always best to include as much punctuation, documentation etc as you can handle during the Dev process and then use something like tidy or another minifier to systematically pull all the extra stuff out.

    As Ara says above, it just makes things easier all the critical ways.

    • By: Emmanuel
    • July 5th, 2013

    Quoting attributes in html5 is like writing HTML comments: useless waste of time, but you can still do if you want to.

  2. BTW, the same rule applies to CSS values that take urls. We only need to use quotes around the URL value when it includes one of the same characters.

    This is incorrect. The rules for unquoted attribute values in HTML are different than the ones in CSS. For example, foo|bar is a valid unquoted HTML attribute value, but would be an invalid unquoted attribute value in CSS.

    I wrote about this years ago. Unquoted attribute values in HTML: http://​mathiasbynens​.be/​n​o​t​e​s​/​u​n​q​u​o​t​e​d​-​a​t​t​r​i​b​u​t​e​-​v​a​l​u​e​s​#​h​tml Unquoted attribute values in CSS: http://​mathiasbynens​.be/​n​o​t​e​s​/​u​n​q​u​o​t​e​d​-​a​t​t​r​i​b​u​t​e​-​v​a​l​u​e​s​#​css

    I’ve even made a tool that allows you to enter any attribute value, and it will tell you if that value can be used as an unquoted attribute value in HTML or CSS. Check it out: http://​mothereff​.in/​u​n​q​u​o​t​e​d​-​a​t​t​r​i​b​u​tes Try entering foo|bar, for example.

  3. With HTML5, you don’t have to quote attribute values.

    This is nothing new in HTML5; unquoted attribute values are allowed in any HTML version. Just not in XML/​XHTML.

    BTW, the same rule applies to CSS values that take urls. We only need to use quotes around the URL value when it includes one of the same characters.

    This is incorrect. The rules for unquoted attribute values in HTML are different than the ones in CSS. For example, foo|bar is a valid unquoted HTML attribute value, but would be an invalid unquoted attribute value in CSS. (Also, this is not just about URLs. The rules apply to any attribute value.)

    I wrote about this a while back. See Unquoted attribute values in HTML and Unquoted attribute values in CSS.

    I’ve even made a tool that allows you to enter any attribute value, and it will tell you if that value can be used as an unquoted attribute value in HTML or CSS. Check it out: http://​mothereff​.in/​u​n​q​u​o​t​e​d​-​a​t​t​r​i​b​u​tes Try entering foo|bar, for example.

  4. With HTML5, you don’t have to quote attribute values.

    This is nothing new in HTML5; unquoted attribute values are allowed in any HTML version. Just not in XML/​XHTML.

    BTW, the same rule applies to CSS values that take urls. We only need to use quotes around the URL value when it includes one of the same characters.

    This is incorrect. The rules for unquoted attribute values in HTML are different than the ones in CSS. For example, foo|bar is a valid unquoted HTML attribute value, but would be an invalid unquoted attribute value in CSS. (Also, this is not just about URLs. The rules apply to any attribute value.)

    I wrote about this a while back. See Unquoted attribute values in HTML and Unquoted attribute values in CSS.

    I’ve even made a tool that allows you to enter any attribute value, and it will tell you if that value can be used as an unquoted attribute value in HTML or CSS. Check it out: http://​mothereff​.in/​u​n​q​u​o​t​e​d​-​a​t​t​r​i​b​u​tes Try entering foo|bar, for example.

  5. Loosey goosey ftw! :)
    It’s a good chance most of the classes on elements will gain some friends while developing a project, so I would always recommend quoting those class values.
    IDs I wouldn’t, but hey, IDs are totally out of fashion now due to their high specificity so who cares.
    So that leaves some things like data attributes and form input values (min/​max/​step). I could go either way, but in general most tools prefer quotes, so I’d go with that.
    The fun thing (for me) is knowing about the details of how things are specified and how browsers treat them. But I’d agree at a pragmatic level that quotes have pretty big advantages and the four keystroke tax isn’t too bad.

    • By: John
    • July 10th, 2013

    Thanks Matthias,

    it sort of proves my point — there’s even more rules to try and learn, or just quote!

    Paul, I still remember you saying that, and use it quite a bit in my workshops etc, but can’t remember whether it was at W3CConf 1.0 in Seattle, or even way back further in Tokyo at WDE.

    Your reference to id attribute reminds me of another of my bugbears. I feel another rant coming on!

    • By: John
    • July 10th, 2013

    Emmanuel,

    you did actually read the article right ;-)

  6. […] on my post about quoting HTML5 attributes, Paul Irish commented in […]

  7. It’s good to know when one can and cannot omit quotes, but honestly I think most of us have more important things to think about when we’re developing… this is not one of those things I want to think about.

    I urge you all to quote all attributes and think harder about what you’re going to put inside those quotes.

    • By: Brian m
    • July 11th, 2013

    Good points by the author, but just the tip of the iceberg for the bad mess that is todays web development environment. Yes relaxed syntax does give those who don’t have the real skills in software engineering or who are just too lazy to follow syntax rules to hack together web sites etc. But if strict syntax had been enforced life would be a lot easier for professional developers and probably faster for the user. But that horse has long bolted!

  8. Since HTML5 has come along I have retained strict XHTML style in it, sometimes called XHTML5.

    • By: Raj
    • July 11th, 2013

    Having the attributes within quotes is good coding practice and easy for us to know that we have added the attributes for a DOM element. Otherwise, we will have to crack our head when looking in to the code after a month or two.

    I don’t think it is an important feature of HTML5 of not using ” or ’

    • By: John F
    • July 11th, 2013

    What are the good reasons for promoting HTML 5 over a new version of XHTML?

    Personally, I think ditching XHTML was an huge mistake

  9. Nice little post, I have a similar stance on using role values on our html5 projects for accessibility though.

    • By: TVD
    • July 17th, 2013

    Wait…You’re telling me we have to tell folks to “quote” HTML5 attributes? X.X

    No quotes. Does it validate? Yes. Is it maintainable? No.

    I could give two scoops of monkey urine whether you’re in the “mood” to hit the extra keystrokes. Moods are things for cattle and loveplay, not for coding!

    Quote the attributes.

  10. […] Five reasons why you should quote attribute values in HTML5 – for the record, you should do this in HTML 4 as well. […]

  11. ROFL. This article could have been written 10 years ago. “Yes, you could leave off the attribute quoting, the browser will still render it, but it might cause problems as some browsers parse html in different ways. Better to quote them at all times and know that the browsers are more likely to render them consistently.”

    Then along came XHTML to enforce it, because the lazy people were still being lazy and blaming the browser vendor implementation of standards rather than follow stricter markup.

    But it seems the lazy people are still lazy and have convinced everyone else it’s okay.

    As a great man once said: “Those who cannot learn from history are doomed to repeat it”.

    Andrew
    Quoting attributes like it’s 1999

  12. Were numerous volunteers in addition to establishing a whole new structure in our group. Your web site offered all of us by using helpful information and facts to work with. You have done a remarkable activity along with our own whole town will likely be thankful to you.

    • By: Damian
    • December 17th, 2013

    Individual soccer drills are an effective way for you to work on your general fitness, improve ball control and improve anticipation.
    There are many techniques which are today outdated,
    but are nevertheless applied by well-​​meaning, but uninformed trainers.
    You can adjust the boxes by making shorter rungs and placing the rungs closer together
    or making larger rungs to make bigger boxes for larger athletes or different drills.