HTML attributes without quotation marks?

by

Always use quotation marks.

I don’t believe that HTML properties without quotation marks are classed as Invalid HTML, but they will potentially cause you problems later on down the line.

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). Single quote marks can be included within
the attribute value when the value is delimited by double quote marks,
and vice versa. Authors may also use numeric character references to
represent double quotes (“) and single quotes (‘). For double
quotes authors can also use the character entity reference “.

In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only contain
letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45),
periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons
(ASCII decimal 58). We recommend using quotation marks even when it is
possible to eliminate them.

Source: http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.2

I think they’re a great way of clearly defining when an attribute value starts and finishes.

Take for example the class attribute which can have multiple classes seperated by spaces:

<div class="classa classb" id="123">

This clearly shows the browser that my classes are classa and classb, with an element id of 123.

Take away the quotation marks and we’ve got:

<div class=classa classb id=123>

A browser could now interpret this as 3 classes, with no id. classa, classb and id=123.

Or it may even interpret it as 3 attributes. class="classa", classb="" and id="123"

(Even stackoverflow’s syntax styling is struggling with this one!)

More Related Contents:

  1. Bad: [html] in html code i can’t make two form input in one row [closed]
  2. Make container shrink-to-fit child elements as they wrap
  3. How to overlay one div over another div
  4. What is the boundary in multipart/form-data?
  5. Trouble with content security policy
  6. html5 – canvas element – Multiple layers
  7. vs.
  8. Position an element relative to its container
  9. What is “X-Content-Type-Options=nosniff”?
  10. curved div with transparent top
  11. Autocomplete off vs false?
  12. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  13. Can a span be closed using ?
  14. Stop CSS transition from firing on page load
  15. Form and file upload with htmlService and app script not working
  16. restrict file upload selection to specific types
  17. Chrome getUserMedia Not Requesting Permission Locally
  18. What is the correct readonly attribute syntax for input text elements?
  19. How can I resize an image to a percentage of itself with CSS?
  20. HTML/CSS: Make a div “invisible” to clicks?
  21. Node.js – How to send data from html to express
  22. Responsive CSS Circles
  23. How to set thymeleaf th:field value from other variable
  24. Can Outlook 2010 use a web font in an html email?
  25. Disable Chrome translation bar on my website
  26. Floating Div Over An Image
  27. How to remove the space between list items [duplicate]
  28. How to create a heart shape using CSS?
  29. How to display alt text for an image in chrome
  30. What are all the differences between src and data-src attributes?

Leave a Comment