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.

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

  13. In business you should take an amount of decisions, which included
    deciding about the business cards designs and
    myriad other collateral things. It sounds obvious, but be sure
    your car has a good amount of petrol so that you will don’t have to stop on the way towards the venue to fill up, losing valuable time. Finally, a compounding approach gives the couple a bit of everything in the final wedding collection; the pair can hire wedding photographers which will use a photojournalistic style, a normal style, and a creative style to create a wedding photo collection like no other.

  14. I always quote attributes, HTML & CSS, it just Makes It Easier.
    @Paul Irish, you dislike ids because of their specificity (agreed wholeheartedly) do this mean that you, too, dislike less and sass for the dreadfully over-​​specific CSS they churn out, making all developers’ lives a misery?

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

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

  17. […] http://​www​.webdirections​.org/​b​l​o​g​/​f​i​v​e​-​r​e​a​s​o​n​s​-​w​h​y​-​y​o​u​-​s​h​o​u​l​d​-​q​u​o​t​e​-​a​t​t​r​i​b​u​t​e​-​v​a​l​u​e​s​-​i​n​-​h​t​m​l5/ […]

  18. An average sized shed will measure about ten by twelve.

    We’ve had badgers, foxes and even skunks dig dens under our wooden shed.
    The plastic shed is a well appointed garden structure that
    comes in an array of design to make them attractive with tiny maintenance price for prolonged
    durability.

  19. Reliability is the one of the most important aspects of the
    shipping companies. Some of the people celebrate this
    day with their family by organizing party and
    gives various type of gifts to their family member and beloved ones.
    The China shipping container services are well designed taking into account the international trade
    and cargo freight policies.

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

  21. Hey, I think your website might be having browser
    compatibility issues. When I look at your website in Opera,
    it looks fine but when opening in Internet Explorer, it
    has some overlapping. I just wanted to give you a quick heads up!

    Other then that, fantastic blog!

    Here is my homepage fox news (Kathy)

  22. Yes! Finally something about child abuse survivor.

  23. There’s a huge range to choose from; in a variety of colours, styles and fabrics.
    Be patient, however, with dogs that aren’t used to wearing boots as such may take some
    time for them to get used to. For more information about
    dog clothes click Dog Clothes, and for more about dog health and keeping
    your dog happy click Dogs and Puppies Online.

    Feel free to visit my web site — Canine & Co

  24. Great site. A lot of helpful info here. I am sending it to several friends ans also sharing
    in delicious. And of course, thank you on your effort!

  25. Great site. A lot of helpful info here. I am sending it to several friends ans also sharing
    in delicious. And of course, thank you on your effort!

Your opinion:

XHTML: You're allowed to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>