Are you ‘using’ “useless” “‘QUOTES’”?
I write <div id=foo> instead of <div id="foo">
in HTML just like chmod a+x bar instead of chmod "a+x" "bar" in shell.
I write
<div class="multiple words">if I have to in HTML
just likechmod a+x "file name with spaces"in shell.
I don’t use useless quotes just for the hell of it. It “makes” “the” “html” “that” “is” “already” “cluttered” “enough” “even” “less” “readable”.
Usually when I show unquoted values in HTML as examples on my workshops, someone always points out that maybe it works in the browsers but it is not actually valid HTML. Well, maybe, but are you sure your own code is always valid? See the exercise below and check if you can spot all problems in this short HTML and then run the validator to see if you found everything. The results may surprise you!
Why I care
I cried in 1998 when W3C published Reformulating HTML in XML but hoped it wouldn’t get traction. When XHTML 1.0 was officially adopted as a W3C Recommendation in January 2000, I was lifeless and devastated when I was changing all my <img src=rounded-border-top-left.gif> to <img src="rounded-border-top-left.gif"/> and later was praying for the W3C to open their eyes while they were developing the dead-end XHTML 2.0 and my prayers have been answered! When HTML5 came out in 2007 and when W3C abandoned the XHTML dead-end standard, I celebrated like never before - but to this day I see frontend developers who act like 2007 never happened.
Exercise for the reader
Read the short HTML example below and:
- Note everything that you think is not strictly valid according to the letter of the standard (even if you think that would work in the browsers)
- Use the official W3C HTML validator and see if you spotted all errors and warnings!
- Write in the comments if you were surprised — but no spoilers for the readers!
Especially look for
- There is code above
<!doctype html> - The
!DOCTYPEis lowercase - The
HTMLin doctype is lowercase - The
"en"in<html lang=en>is not quoted - The
"en"in<html lang=en>is lowercase - There is no
<head>! - There is no
<body>! - The
"utf-8"in<meta charset=utf-8>is not quoted but contains a dash - The
"utf-8"in<meta charset=utf-8>is lowercase - The
"stylesheet"is not quoted in the<link rel=stylesheet>tag - The full URL with colons and slashes is not quoted in
href=https://example.com/style.cssin the<link rel=stylesheet>tag - The
<link rel=stylesheet>tag has notype="text/css"attribute - There is no
<meta http-equiv="content-type" content="text/html; charset=UTF-8">tag - The
Abctext node is directly in<html>without any<div>or<p>(not to mention the<body>) - The
<br/>is missing the trailing slash in<br> - The
<img>tag has unquotedsrcvalue - The
<img>tag does't have a slash like in<img src="icon.gif"/> - The
<img>tag has emptyaltattribute - The
"foo"is not quoted in<div id=foo></div> - The
"bar-baz"is not quoted in<div id=bar-baz></div>but contains a dash - The
"menu.html"is not quoted in<a href=menu.html></a>but contains a dot - The external
<script>has notype="text/javascript"ortype="application/ecmascript"property - The external
<script>tag has a fully qualified URL that is not quoted - The internal
<script>has notype="text/javascript”ortype="application/ecmascript"property - Anything else?
Do you have an HTML validator in your eyes? Leave comments below!
(but no spoilers for others!)
