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:
Advantages to omitting optional quotes:
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.
The HTML specification says: Attributes are placed inside the start tag, and consist of a name and a value, separated by an = character. The attribute value can remain unquoted if it doesn't contain spaces or any of " ' ` = < or > . Otherwise, it has to be quoted using either single or double quotes.
Quotes are optional for attributes. Attribute values are optional. Closing empty elements are optional.
The official rules In the HTML 4.0 specification, section Attributes , the rule is formulated as follows: By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39).
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).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With