Web Directions Conferences for web and digital professionals

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.

We make events for the professionals shaping Australia's digital future

Learn more about us

I have yet to have an end-to-end conference experience that was as professional as what was provided by Web Directions

Joe Toscano Founder, designgood.tech

Join us in 2019:

  • Web Directions Code 2020

    Australia's conference for JavaScript Developers and Front End Engineers.

    Melbourne June 4 & 5 2020

    Details
  • Web Directions Product Design & Management 2020

    Australia's conference for Product professionals. With dedicated product design and product management tracks.

    Melbourne July 1 & 2 2020

    Details
  • Web Directions Summit 2020

    A conference for the whole digital team–featuring product, design, front-end dev, and new people/talent/culture tracks.

    Sydney November 5 & 6 2020

    Details