DEV Community

Cover image for Are you 'using' "useless" "\"QUOTES\""?

Are you 'using' "useless" "\"QUOTES\""?

Rafał Pocztarski on July 01, 2020

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 writ...
Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

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 e is 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!

Collapse
 
rsp profile image
Rafał Pocztarski

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" or type="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 as cp "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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

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.

Thread Thread
 
rsp profile image
Rafał Pocztarski • Edited

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"?

Collapse
 
alainvanhout profile image
Alain Van Hout

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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Wfh I don't NEED clothes technically 😅 pajamas work.

Collapse
 
rsp profile image
Rafał Pocztarski

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 &amp; in URLs and are much less strict in other aspects. The thing with quotes is very similar like in shell scripts and I never see dd 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).

Thread Thread
 
pavelloz profile image
Paweł Kowalski

Which validator exactly enforces it?

valid

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

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.

Collapse
 
darrylhodgins profile image
Darryl Hodgins

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 if blocks. 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 .editorconfig in the project. Consistency, consistency, consistency.

Collapse
 
gottz profile image
Jan-Stefan Janetzky

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.

Collapse
 
rsp profile image
Rafał Pocztarski

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 redundant type="application/ecmascript" attributes etc.

Collapse
 
gottz profile image
Jan-Stefan Janetzky

fun fact, i use <script type=module async> these days.

Collapse
 
fblind profile image
Facundo Soria

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.

Collapse
 
ben profile image
Ben Halpern

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)

Collapse
 
rsp profile image
Rafał Pocztarski

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.

Collapse
 
pavelloz profile image
Paweł Kowalski

I have a weird feeling that its invalid because of many reasons, quotes not being one of them.

valid

Collapse
 
mjswensen profile image
Matt Swensen

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.)

Collapse
 
mattschwartz profile image
Matthew Schwartz

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.

Collapse
 
rsp profile image
Rafał Pocztarski

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=menu to id="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.

Collapse
 
louy2 profile image
Yufan Lou

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>

Collapse
 
lifestatus4 profile image
Life Status

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

Collapse
 
louy2 profile image
Yufan Lou

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.

Collapse
 
jamesthomson profile image
James Thomson

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?

Collapse
 
jamesthomson profile image
James Thomson

I did find this in the validator.w3.org error docs... the same validator you use.

In fact, unless you have extreme file size requirements it is a very very good idea to always put quote marks around your attribute values. It is never wrong to do so, and very often it is absolutely necessary.

validator.w3.org/docs/errors.html#...

Collapse
 
jwp profile image
John Peters

Wow.