Do you quote HTML5 attributes?

Question

Attribute quotes are optional in HTML5.

What are the pros/cons to quoting them?

id=example                     <!--quotes optional-->
href=http://example.com        <!--quotes optional-->
class="example example-1"      <!--quotes required due to space-->
href="http://example.com/p=47" <!--quotes required due to '=' sign-->

Update: Added advantages based on the answers:

Advantages to quoting all attributes:

all editors can deal with it properly
more consistent
better portability (easier to change doctype)
easier to maintain (esp. if attributes might become empty)
easier to 'find and replace' changes
cleaner doc (if you think quotes improve readability)
?

Advantages to omitting optional quotes:

slightly reduced filesize
cleaner doc (if you prefer minimal text)
?

See [HTML/XHTML advantages](http://stackoverflow.com/search?q=html+xhtml+advantages) and [Get Ready for HTML5](http://www.alistapart.com/articles/get-ready-for-html-5/). — Paul DelRe, Jun 27 '11 at 15:40
@konrad-rudolph updated question w/ clarification on 'cleaner' — ryanve, Jun 27 '11 at 16:28
@ryan we can't do that any more, a moderator may do it if they see fit. (Edit: they decided to close it instead - ah well :) — Pekka, Jun 27 '11 at 16:32
See http://mathiasbynens.be/notes/unquoted-attribute-values for the exact rules on when quotes are required around attribute values, both in HTML and in CSS/JavaScript. I also made [a tool that will tell you if a given attribute value can be used without quotes or not](http://mothereff.in/unquoted-attributes#foo%7Cbar). — Mathias Bynens, Jan 17 '12 at 07:17
You can use single-quote marks (apostrophe) instead of double-quote. That makes working in many programming languages (Java etc.) easier. — Basil Bourque, Jul 24 '12 at 07:27
I don't buy "more consistent". What's inconsistent about quoting attribute values if and only if you need to? — Hugh W, Feb 26 '13 at 10:24
@HughW well, do you need quotes in ``? Is the slash part of the URL or part of the tag structure? — Mr Lister, Jun 05 '14 at 19:48
@RobertSiemer It's more in contrast to XHTML, which requires quotes and was popular before HTML5. http://www.w3.org/TR/xhtml1/#h-4.4 — ryanve, Nov 03 '14 at 19:05
So the answer to my question is: It has nothing to do with HTML_5_. Your question was more "Do you quote HTML attributes? -- I know you had to in XHTML." — Robert Siemer, Nov 03 '14 at 19:16
For this kind of questions I can recommend https://vote4code.com/ :) — Benny Code, May 05 '17 at 14:33
I've stumbled upon a very concerning matter in this subject by accident while minifying the output. I have a static site with a search form using the Taxonomy Terms Page as data-source, reading links and queueing URLs to request asynchronously and extract information later. But even though every single URL, requester and requested, are full-formed absolute URLs, both with SSL and under the same domain, the lack of quotes around the `href` attributes prevented my requests to complete, giving me the usual 'unsecured endpoint" message. I thought this could be of someone interest. — , Oct 10 '18 at 16:46
As for file size, when using Brotli compression, eliding quotes usually leads to slightly larger files. That's because the dictionary is built from websites that mostly had quoted attributes. — Niklas, May 13 '21 at 19:09

score 68 · Accepted Answer · answered Jun 27 '11 at 15:37

68

I'm in favour of always using quotes.

It looks way cleaner and more consistent
All editors can deal with it properly
It's easier to maintain - you can edit values without breaking them because quotes are missing.

The few bytes you save in document size by dropping quotes where they are not needed are not worth mentioning (unless maybe you're Google's home page).

answered Jun 27 '11 at 15:37

Pekka

442,112
142
972
1,088

Good point about maintainability – shanethehat Jun 27 '11 at 15:39
Also if you edit dynamically it won't break attributes – Tim Jun 27 '11 at 15:41
I updated question with these—thanks :) – ryanve Jun 27 '11 at 16:32
2

Even Google uses quoted values on their mainpage ;) – kelunik Mar 10 '14 at 13:27
17

It's also worth to mention that even if you're Google's home page, it's the job of a script to reduce the filesize, not the author's. – enyo May 29 '14 at 11:28
2

And god forbid finding out what kind of breakages this will cause in old browsers or mobile browsers or some browser that doesn't know what you want. Taking one pass at reducing your JS complexity or CSS rules will blow this out of the water. – dudewad Feb 02 '15 at 23:02
1

It's also worth noting that when creating dynamic HTML, XSS vulnerabilities can occur if not using quotes around dynamic attribute values. – mbomb007 Apr 10 '18 at 15:31

Courtney Christensen · Answer 2 · 2011-06-27T15:50:46.083

I do quote all attributes and will continue to do so. Primarily because it visually distinguishing where the attribute value starts and stops.

Additionally, it just makes sense for portability and compatibility reason. Though the quotes are optional in HTML[5], they are not optional in XHTML. You have a lot of tedious work to do if you need to convert your documents to XHTML (say, to display SVG on Webkit browsers). We really don't need to dredge up the XHTML v. HTML debate, but it seems like too little hassle to not quote your attributes.

Saving a few bytes in the document body is nigh insignificant when you're downloading kilobytes and kilobytes of images and JavaScript libraries.

score 8 · Answer 3 · answered Jun 27 '11 at 15:38

8

I would say that because quotes are required in some instances you should use them consistently. This makes your code cleaner and easier to read. Switching between just creates unnecessary confusion.

answered Jun 27 '11 at 15:38

shanethehat

15,460
11
57
87

score 7 · Answer 4 · answered Jun 27 '11 at 15:37

7

I think one of the advantages to quoting all attributes is consistency.

If you're quoting some (with spaces or certain symbols), it feels nicer to me to quote all of them.

answered Jun 27 '11 at 15:37

Jamie Dixon

53,019
19
125
162

score 4 · Answer 5 · answered Jun 27 '11 at 15:42

HTML5 was designed with backward compatibility in mind, so quoting attributes is okay. Many folks argue that since XHTML requires quotes it can't hurt to always include them. Personally I choose to quote. Required? No.

Here's some guidance I find reasonable. http://www.impressivewebs.com/html5-syntax-style/

Do you quote HTML5 attributes?

5 Answers5

Linked

Related