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 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:
- 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
The 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!)
Top comments (26)
It's not about what's valid or not valid, what you can leave out or what you cannot. I know that quoteless attributes are valid, I know that only the left li is needed. I know that
eis counted as a number. But what counts when working with others is time tested idomatic html so you better start using quotes even if you don't want to.The author is correct however!
I wrote that way exactly 25 years ago so I would argue that it is actually quite time tested and idiomatic. ;) Just to let you know, I always respect the style used in projects when I work in teams, so you won't find me adding any code in a different style that is used in the project. But I argue against using redundant attributes like
type="application/ecmascript"ortype="text/css"that is not only not needed but can be inconsistent with the actual Content-Type headers that are used anyway. And yes, I also quote attributes when I write professional code. But it puzzles me that people insist on quoting simple attributes in HTML like<div id="abc">while I've never seen anyone insisting on quoting arguments in shell scripts ascp "file.txt" "directory"- and incidentally, there you also need to quote them (both de jure and de facto) when they contain spaces but certainly not for simple identifiers.This is a barel of snakes. 🤦♂️ I love your passion and your respectful answer so let's agree to, whatever we just did. I'm 15 years jr to you and perhaps I can't argue with time. But what is idiomatic isn't constant so what is idiomatic today? What is it tomorrow?
As for quotes, sometimes it's as simple as mostly every tool including my editor and linter is going to auto format in such a way, it might be a faff to keep changing that. I will study your post again before jumping to this thread.
I didn't mean to imply that I am more senior so I must be right. In fact, one could argue that since I've done table layouts and rounded corners with gif borders even before sprite maps then my sense of taste has been destroyed forever.
Of course the idiomatic code changes, and quite quickly at that. I actually like your answer. If you saw my projects where the first thing I do is set up linters with the most strict options turned on and explicit AirBnb style guide and enforce it all in the CI pipeline, then it might turn out that we actually might have much more in common than it might seem.
What I wanted to do with this post is for people to select maybe half of those 24 things that I mentioned, maybe add some other things, get surprised by the result and dig more into the standards. Of course the standards are not everything, that's why we have style guides, but tell me - did you read this HTML and think "Of course this is perfectly valid HTML but it just doesn't follow my preferred style guide"?
Indeed. The argument is far too similar to the idea that basic politeness and considerateness is superfluous in human interactions, or for that matter, that wearing clothes when going to work isn't essential. Just because it's technically possible to leave it out, that doesn't mean that it's a good idea.
Wfh I don't NEED clothes technically 😅 pajamas work.
It is not only technically possible, but this is actually what is described by the standard and enforced by the validators. Notice that the W3C validator doesn't even emit warnings for that, let alone errors. Most people that I talk to actually think that quotes are required by the standard (they were in XHTML, see my post, so some people may believe that they still are). No one has actually told me that bare identifiers look naked without quotes like going to work without clothes :) good example. But what I noticed is that people who insist on using quotes at the same time use HTML rarely change
&to&in URLs and are much less strict in other aspects. The thing with quotes is very similar like in shell scripts and I never seedd if="file1" of="file2"(in shell scripts that quotes are also needed for values with spaces but are not needed for simple single-word identifiers - just like in HTML).Which validator exactly enforces it?
Can't argue with that, but I can't change because it takes a movement to change the hearts of devopers and you would need an authoity such as a website org dedicated to correcting learned knowledge, such an org should permiate through companies, browser vendors and tooling, creating a linter preset and so on. This article won't be enough. But I'm glad you wrote it.
Well said.
I tend to value consistency, and there's no reason one can't be consistent by just doing the same thing (using quotes, in this case) every time. Same deal with semicolons in JS, and leaving out curly braces on one-line
ifblocks. To me, it's just sloppy.In a similar vein, I have my opinion on the tabs vs. spaces debate (and let's not get into that here), I will lay down my sword so long as there's a
.editorconfigin the project. Consistency, consistency, consistency.well.. while i agree mostly..
<head>and<body>should be present tho.at least
<head>, due to the fact the document object model differs between head and body when it comes to DOM selectors and search engines.I agree and in fact I always use explicit
<head>and<body>exactly for that reason. Here I removed them to demonstrate that it is indeed not required by the standard.<head>is actually mandatory so<html></html>is invalid because it has no<head>but<title>gets<head>automatically so interestingly it is valid here. I don't like automatic wrapping so I add explicit<head>and<body>because in addition to what you pointed out it is also not obvious if a given<script>is in the head or body so the structure is not obvious. But I argue for not cluttering the code with redundanttype="application/ecmascript"attributes etc.fun fact, i use
<script type=module async>these days.hey!, I liked the way you presented the post 🙂, pretty cool way of exposing these points.
I'm seeing this types of examples about html a lot on the internet lately and my opinion is that the languages have several ways of being written but most important is that you should be consistent and comfortable with the style... if you like quotes use quotes, if you don't just don't use it.
On the other hand, if you're working in a team please create a set of rules with them and stick to it.
This is definitely a spicy take.
Given that
"appears over 3000 times in the source of this page alone, I think the topic of saving a few bytes over the wire is another topic. (Unless the compression process does away with this need—not sure about how that part works)Well, the DEV page may be using
"over 3000 times, but, unlike my example, it is still invalid HTML - both according to the standards, and to validators: see for yourself. So I'm not sure if that is a good page to take example from.I have a weird feeling that its invalid because of many reasons, quotes not being one of them.
Nice take, I learned a lot! As for whether or not to omit the quotes—the fact that sometimes they're necessary means that there's no chance I'm going to waste brain cycles on "Does this attribute have a space in it?"; much easier to just type them all the time.
That said, if Prettier or other automatic formatter can take care of that piece for me, and my team was on board, I'd be down to try it. :)
And even though
type="text/javascript"is the default, sometimes it's nice to be explicit, not for the computers' sake but for future human readers of the code. (OK, maybe not in this particular case, but generally. Code is a way for humans to communicate with each other as well as with computers.)I have to disagree with this one. One reason browsers are so large and complicated is because they have to compensate for content which breaks standards and features which are optional. Otherwise a huge chunk of the internet would go dark.
You can't completely do away with quotes because sometimes they're required. Multiple class values are separated by spaces. Must be quoted. Meta tags such as description contain spaces and must be quoted. Having values sometimes quoted and sometimes not is not a friendly format for readers or parsers.
I would never argue for any code that breaks standards. In fact, back in 1996 all my pages had Valid HTML 3.0 badges (not only that, but also a "Best viewed in any browser" banner - which was quite unusual at that time, most of the pages were "best viewed" either in IE or Netscape, but I coded strictly to the standards and not for the browsers. So when XHTML came out in 2000 I changed all my
id=menutoid="menu"as required by the standard (even though it was not required by the browsers!) and then when HTML5 came out in 2007 I changed it back, because they made it no longer required again.I argue that the only reason that web developers quote everything is that in one point it became required because I remember web development from before 2000 and no one did it. In fact almost no one did it even in 2000 because not many people have adopted the latest W3C recommendation as quickly and followed the rules as strictly as me.
Now I often hear the argument for consistency, but why I never hear that in shell scripting sometime we have to quote arguments so why not quote all of them for consistency? That argument for consistency seems quite inconsistent with other languages with almost exactly the same rules for quoting arguments.
In any case, I wrote this post to show people what is actually required and what is not, some of those things in my opinion actually should be required (like the head and body tags) and it's always good to know what is really in the standard and what is just a convention.
Was playing with the validator and as surprised to see I don't need to close
<p>tag. On the other hand if I don't, the way my Firefox auto-closes it is also surprising as it would include everything until the next<p>tag or just before</body>You need more status shayari quotes with images and do you want to copy all these status shayari quotes directly. so come here - Status About Love
Thank you so much! Let's hope that the saved keystrokes of the double quote symbol on the pinky can save someone from getting Carpal Tunnel Syndrome.
I've been in web dev for a long time and I've never heard of quotes being invalid markup. Can you post exactly where it says this in the spec?
I did find this in the validator.w3.org error docs... the same validator you use.
validator.w3.org/docs/errors.html#...