Do you quote HTML5 attributes?

HtmlPerformanceStandards

Html Problem Overview


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)
  • ?

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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.

Solution 3 - Html

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.

Solution 4 - Html

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.

Solution 5 - Html

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/

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionryanveView Question on Stackoverflow
Solution 1 - HtmlPekkaView Answer on Stackoverflow
Solution 2 - HtmlCourtney ChristensenView Answer on Stackoverflow
Solution 3 - HtmlJamie DixonView Answer on Stackoverflow
Solution 4 - HtmlshanethehatView Answer on Stackoverflow
Solution 5 - Htmluser164226View Answer on Stackoverflow