Are you 'using' "useless" "\"QUOTES\""?
Tags: html, javascript, frontend
Published: 2020-07-01 18:24:22

---
title: "Are you 'using' \"useless\" \"\\\"QUOTES\\\"\"?"
published: true
description: 
tags:
  - html
  - javascript
  - frontend
  - html5
cover_image: https://user-images.githubusercontent.com/119231/86280767-ba3d4c00-bbdc-11ea-94f5-53e8d0157297.png
---
## I write `<div id=foo>`<br>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 like `chmod 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:
1. 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)
2. Use [the official W3C HTML validator](https://validator.w3.org/) and see if you spotted all errors and warnings!
3. Write in the comments if you were surprised - but **no spoilers** for the readers!

Especially look for
-
1. There is code above `<!doctype html>`
1. The `!DOCTYPE` is lowercase
1. The `HTML` in doctype is lowercase
1. The `"en"` in `<html lang=en>` is not quoted
1. The `"en"` in `<html lang=en>` is lowercase
1. There is no `<head>`!
1. There is no `<body>`!
1. The `"utf-8"` in `<meta charset=utf-8>` is not quoted but contains a dash
1. The `"utf-8"` in `<meta charset=utf-8>` is lowercase
1. The `"stylesheet"` is not quoted in the `<link rel=stylesheet>` tag
1. The full URL with colons and slashes is not quoted in `href=https://example.com/style.css` in the `<link rel=stylesheet>` tag
1. The `<link rel=stylesheet>` tag has no `type="text/css"` attribute
1. There is no `<meta http-equiv="content-type" content="text/html; charset=UTF-8">` tag
1. The `Abc` text node is directly in `<html>` without any `<div>` or `<p>` (not to mention the `<body>`)
1. The `<br/>` is missing the trailing slash in `<br>`
1. The `<img>` tag has unquoted `src` value
1. The `<img>` tag does't have a slash like in `<img src="icon.gif"/>`
1. The `<img>` tag has empty `alt` attribute
1. The `"foo"` is not quoted in `<div id=foo></div>`
1. The `"bar-baz"` is not quoted in `<div id=bar-baz></div>` but contains a dash
1. The `"menu.html"` is not quoted in `<a href=menu.html></a>` but contains a dot
1. The external `<script>` has no `type="text/javascript" or `type="application/ecmascript"` property
1. The external `<script>` tag has a fully qualified URL that is not quoted
1. The internal `<script>` has no `type="text/javascript" or `type="application/ecmascript"` property

The HTML
-
```html
<!-- find incorrect html below -->
<!doctype html>
<html lang=en>
<meta charset=utf-8> 
<title>title</title>
<link rel=stylesheet href=https://example.coms/style.css>
Abc
<br>
<img alt src=icon.gif>
<div id=foo></div>
<div id=bar-baz></div>
<a href=menu.html></a>
<script src=https://example.com/library.js></script>
<script>
// ...
</script>
</html>
```
### Do you have an HTML validator in your eyes? Leave comments below!

(but no spoilers for others!)