7 ms·
Google HTML/CSS style guide suggests omitting head and body tags
- ianhawes 7y ago> This approach may require a grace period to be established as a wider guideline as it’s significantly different from what web developers are typically taught.
- dragonwriter 7y agoNote that the guidelines, including this note, are at least 5 years old now.
- Annatar 7y agoWow, the morons at the Google gulag are at it again. It wasn't enough that they embarrassed themselves with that shell style guide vomit. Superheroes.
- seisvelas 7y agoIt makes sense to me that if those tags are doing nothing, removing them is a legitimate micro optimization.
- sctb 7y agoCould you please review the guidelines and then not post like this here? https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- Annatar 7y agoI couldn't help it: what they did is beyond retarded, breaking standards like that. I'm so disgusted and repulsed by it.
- saurik 7y agoI don't understand: since when are those structure tags optional, and in what browsers and browser versions would this work in?
- ntzm 7y agoThe HTML5 specification says where they're optional, so any browser that properly implements the spec
- JMTQp8lwXL 7y agoSo I'm supposed to assume a browser properly implements a specification?
- folkrav 7y agoThat's what we do every day we use any browser out there.
- jpat1 7y agoYes, that's the point of having a set of standards. Otherwise you end up with an IE situation where everyone just develops for a single browser.
- dylan604 7y agoOtherwise you end up with a Chrome situation where everyone just develops for a single browser. You're commented needed to modified for current times. ;-)
- jchw 7y agoInteresting... I have never done this except on small test/toy projects at home. I think the main downside today is probably just that the structure of the document is sort of implied, and it may be unclear to new developers why its possible to style html/body when they don’t exist. It does work consistently across browsers last I checked, though.
- pingucrimson 7y agoThat problem already exists with tables, doesn't it?
- jchw 7y agoYes, it certainly does. I wouldn’t view it as a huge positive, though; it certainly confused me for a while, especially since synthetic nodes actually exist in the DOM.
- malvosenior 7y ago> For file size optimization and scannability purposes, consider omitting optional tags They're seriously going to say that removing `<html></html>` is a file size optimization? Why does this make it easier to scan?
- apetresc 7y agoThis seems like insane advice. Even if it's technically permitted, the HTML5 spec page they themselves link to shows a bunch of caveats and exceptions that make it risky. And for what - to save literally 10 bytes?
- falsedan 7y agotimes that 10 bytes by all the pages googlebot spiders and that's significant savings on bandwidth & storage for big G
- ceejayoz 7y agoWe're talking about the folks who host YouTube, right? The savings from this won't be the slightest bit significant to them.
- falsedan 7y agook thanks Warren buffet
- marcosdumay 7y agoI really doubt they avoid data fragmentation well enough for this to make a difference.
- AndyMcConachie 7y agoTL;DR HTML has been deprecated in favor of Google Markup Language (GML).
- pingucrimson 7y agoThis is all standard HTML5.
- sarah180 7y agoIn my reading of this, I wouldn't say they "recommend" it, but that they recommend considering it. Their link is quite clear that HTML 5 makes these tags optional and gives an unambiguous mapping onto the traditional structure.
- sureaboutthis 7y agoIt's optional under certain conditions but those conditions are given as you correctly point out in the link to the HTML standard. While many seem to be focused on what Google says, it's nothing that those of us who read the actual spec didn't already know. And every web developer references the spec when they have questions...don't they?
- Jonnax 7y agoHow much of a difference would this really make?
- hombre_fatal 7y agoIt's like not using semicolons in Javascript: it doesn't necessarily need to be about shaving bytes but opting out of optional things that you don't need, especially when the machine adds them back for you. For example, it keeps your indentation level flat here.
- didgeoridoo 7y agoConfusing title; I assumed it meant they were recommending avoiding the <main> tag, which seems weird but OK, it’s a new one and we’ve seen document outline tags get deprecated before. But no — they’re recommending avoiding the <head> and <body> tags! These are literally the first things you are taught when you learn HTML. This seems like a pretty fundamental change to have slipped in here without further explanation. What’s the reasoning?
- fabiomaia 7y agoIt's explained. > For file size optimization and scannability purposes Omitting tags means less transfered bytes means faster websites. If the browser can forgivingly parse HTML like this, why not take advantage of it? Of course, it doesn't sit well with me either. This'll take some time to digest, but it is interesting to consider.
- DanBC 7y agoI know it all adds up, but stripping <html><head></head><body></body></html> seems like a miniscule saving compared to the huge amounts of cruft stuffed into most websites.
- fabiomaia 7y agoThat's true. Presumably this is for extreme cases when you really need that extra bit of performance. Perhaps HTML could have been better designed with performance in mind. Every tag you open (i.e. <foo>) you're supposed to close (i.e. </foo>) which is quite redundant in terms of bytes when you think about it. It is easy to imagine markup languages that minimize the number of bytes the client has to transfer.
- freakonomics 7y agoChrome does, what about the other smaller browsers?
- lwhi 7y agoI think Google has a set of very specific aims, that aren't so relevant to a lot of other organisations. Cutting out optional tags will improve page size, download speed etc; something that's obviously important when you're serving so many billions of users.
- bshimmin 7y agoPrevious discussion of this from 2016: https://news.ycombinator.com/item?id=12520674 https://news.ycombinator.com/item?id=12520674 (Seems like a terrible idea to me - complex rules to follow for a really minimal saving...)
- blauditore 7y agoTrue, for source code it might be better to leave those in. However, the fact that omitting them is standard-compliant is interesting for automated minimizers.
- 52-6F-62 7y agoYep I agree with that top comment. Explicit is far more understandable and maintainable than implicit.
- jammygit 7y agoI tried this for a summer, it really did lead to easier to read HTML... although now when I go back I’m not sure which tags can be omitted and which might be errors. I think it’s probably a net negative trade off but still not certain. These days Im trying out pug instead, which is similar in a sense: more concise and readable at the expense of other people being certain of its correctness and myself remembering the syntax months later.
- gorzynsk 7y agoRemoving ads and tracking scripts will be more effective in reducing page size.
- yeahitslikethat 7y agoAnd Web pages will load a lot faster. The whole Internet would speed up!
- hkai 7y agoRemoving a fuel tank from a plane would be an efficient way to save fuel.
- judge2020 7y agoRemoving ads is more like removing the power-hungry android tablets and wifi systems from the plane.
- phailhaus 7y agoTablets and wifi systems don't pay for the plane's flight, so that analogy doesn't hold.
- SketchySeaBeast 7y agoWouldn't this metaphor be more like "removing paying passengers"?
- jacobsenscott 7y agoGood. I hate writing those useless tags over and over and having all the actual content deeply indented from the start. (seriously).
- netsharc 7y agoI disagree, having these tags give the document a structure that makes it easier for machines to understand. As for indenting, I usually break the consistency and put html, head and body at column 1, starting the indenting for anything inside head and body.
- hombre_fatal 7y agoWhich machines have trouble, here? Sounds superstitious.
- jacobsenscott 7y agoI can't think of why it would be easier to write software to parse <html><head><title>foobar</title></head><body><p>Hi</body></html> vs <title>foobar</title> <p>Hi Number two looks way easier. If you were to write code to parse #1 you would just need extra code to ignore the useless tags. Anyway, parsing HTML is a nightmare, and HTML documents are usually broken in the wild, and browsers still, amazingly, manage to render almost anything you throw at them. I'm sure they all already handle it.
- boomlinde 7y ago> I can't think of why it would be easier to write software to parse Maybe you haven't considered it closely enough? If you look at the specifications, there is a complex set of rules governing the conditions under which a tag may be omitted. These naturally complicate the syntax. Consistency is preferable because it typically results in a simpler syntax. Consider the following language: document ::= tags tags ::= tag { tag } tag ::= '(' symbol [ tags ] ')' symbol ::= 'x' | 'y' | 'z' | 'w' It encodes a document like the following: (x (y) (z) (y (w (x)))) (z (w (z) (y))) i.e. a list of trees of tags named by symbols. Now, try to describe the language that's identical except that the closing bracket is optional if it belongs to a 'w' tag that precedes an 'x' tag. Try even to describe a language where they are not optional, but must be omitted. They'll both be more complex than the language I described above. Now imagine that there are about a hundred such exceptions, as in HTML. Chances are that rather than encoding them as syntax for the parser, you'll complicate the lexer to automagically insert the optional tags, fuzzying the boundary between the lexer and parser. > Anyway, parsing HTML is a nightmare, and HTML documents are usually broken in the wild Exactly because the syntax is needlessly complicated.
- Camillo 7y agoFrom https://google.github.io/styleguide/ https://google.github.io/styleguide/: > This project (google/styleguide) links to the style guidelines we use for Google code. If you are modifying a project that originated at Google, you may be pointed to this page to see the style guides that apply to that project. These are just Google's style guides for their own code. They're not saying you should do this in your own code.
- boomlinde 7y agoOf course they don't put their money where their mouth is and the document that describes this guideline itself doesn't follow it: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Google HTML/CSS Style Guide</title> <link rel="stylesheet" href="javaguide.css"> <script src="include/styleguide.js"></script> <link rel="shortcut icon" href="https://www.google.com/favicon.ico"> <script src="include/jsguide.js"></script> </head> <body onload="initStyleGuide();"> [...] </body> </html>
- travesdoti 7y agoI want to truck your sock man I have no idea what your position is
- myl 7y agoI'll consider following that advice the day https://google.com https://google.com obeys.
- yeahitslikethat 7y agoDo as we say, not as we do. all the more reason not to trust them.
- gipp 7y agoThis is an internal style guide, not external recommendations, as the title would suggest. Comments like these are really making me wary of the level of groupthink on here.
- yeahitslikethat 7y agoAre you referring to the group think that Google is full of evil hypocrites?
- duxup 7y ago>Do as we say, not as we do. all the more reason not to trust them. --- >Are you referring to the group think that Google is full of evil hypocrites? I'm confused, what are you trying to say?
- shams93 7y agoNow this makes sense while on my one page website such an omission would save the user like 10 bytes of extra data, when you add up the surface area of all Google properties that extra 10 bytes adds up across billions of page views.
- spankalee 7y agoThis part of the guide does say it's option: Omit optional tags (optional). And google.com used to do this, along with other ugly but valid byte-saving hacks, but as the page has gotten richer they've loosened up a bit.
- wycy 7y agoTo be clear, for anyone confused about the "main HTML tag" in the title, this recommendation is essentially to eliminate <html><head></head><body></body></html>.
- satori99 7y agoI was slightly confused. I thought it was referring to the <main> tag. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
- yakshaving_jgt 7y agoDo all other browsers behave the same way when dealing with the omission of these basic tags? Because if not, then by following Google's advice here we are creating the new Internet Explorer.
- sureaboutthis 7y agoIt's written in the specification going back to HTML 2.0
- yodon 7y agoFrom the article: <!-- Not recommended --> <!DOCTYPE html> <html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body> </html> <!-- Recommended --> <!DOCTYPE html> <title>Saving money, saving bytes</title> <p>Qed.
- edflsafoiewq 7y agoI don't use body or head tags, but I use the html tag so there's a place to put the lang attribute.
- dbg31415 7y agoFunny that the page recommending that we not use <head> still uses <head>. "Do as we say. Not as we do." You can view source, and they post it to GitHub. https://github.com/google/styleguide/blob/gh-pages/htmlcssguide.html https://github.com/google/styleguide/blob/gh-pages/htmlcssgu...
- nialv7 7y agoI think this sort of things should be done by some html minifier, not by a human. Because the omission rules are not trivial, and removing these tags doesn't really help readability.
- jammygit 7y agoIt helps a tiny bit sometimes. The tag clutter does make it messier. It is not enough to justify the memory burden of the edge cases is all, imho
- zelon88 7y ago"Omit head and body tags, & type attributes to reduce filesize..." I'm pretty sure you could remove all the head and body tags from the entire internet and it would still make less of a performance impact than if every WordPress blog stopped using Google fonts.
- jimktrains2 7y agoA single analytics loading script and the tracking payload is larger than the gains from the removal of these tags. Most pages have more than one script and payload too.
- wybiral 7y agoFirefox has a tracker blocking mode that shows you all of the trackers. I counted 25 different tracker services being blocked on a single news article yesterday.
- jimktrains2 7y agoBelow is the recommended Google Analytics loader <!-- Google Analytics --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r; i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g; m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); </script> <!-- End Google Analytics --> That's 455 bytes, even if you have an adblocker and don't load the external javascript. No amount of removing html, head, and body tags will overcome this.
- RandomInteger4 7y agoThis reminds me of a job I recently did for a company that had duplicate Google Analytics tags. I removed one thinking I was helping only to be yelled at when their numbers were cut in half the following month. After I explained that they were getting incorrect information I was told "I know this isn't exactly ethical ..." yada yada. I fired that client.
- NightlyDev 7y agoOmitting tags is something we can get used to, but just by looking at the spec I'm kinda scratching my head. Eg. why can't the closing tag for title be omitted? Tags are not allowed inside it. I guess it's because you should be able to type tags as the title, but having to think about stuff like that makes ommiting more of a hassle than it's worth to me. And what if templates are used and put together? Then you suddenly need to know how every combination of templates is going to be in the future to avoid unintended side effects. Saving a bit of data on HTML isn't my top priority, and why would it? Just by not using a bunch of css/js-libs/fonts I'm able to have a smaller footprint than 99 percent of all pages.
- dragonwriter 7y agoNote that this is decidedly not new; there are references to this advice from Google at least back to 2014.
- duxup 7y ago>For file size optimization and scannability purposes, consider omitting optional tags. Is there much savings omitting body and head tags? This seems like excessive optimization where having them there sometimes because someone left them in, but omitted the next because someone else removed them seems like it could be confusing, a few brain cycles might be more valuable than the possible savings. Granted I'm not Google so maybe there are some great savings to be had there, I'd like to know what they are.
- ravenstine 7y agoAren't there lots of scripts that depend on the head, body, and even html tags? The HTML tag in particular is used for a lot of feature detection, and the body is used as the root element for a lot of SPAs. That's not to say that abolishing those tags isn't a great idea, but it would be harder than it looks for projects with an appreciable number of dependencies. I'm definitely in support of never writing that stupid <html> tag again.
- alexhutcheson 7y agoI think those elements still end up in the DOM regardless of whether you type them out explicitly. I might be mid-remembering though.
- ravenstine 7y agoAh yes, you're right. I forget a lot of those browser behaviors that haven't much consequence on my work.
- butz 7y agoYou are correct. Browser fills in missing tags, closes elements, etc. Try opening blank page in any browser and inspect it: you'll find html, head and body tags already placed in DOM.
- edflsafoiewq 7y agoThere's a difference between a tag, which is a bit of concrete syntax like "<b>" or "</html>", and an element, which is basically a node in the DOM.
- bediger4000 7y agoThey did get this correct: > Use UTF-8 (no BOM). I was mystified the first time I read about "byte order mark" and I'm still confused. I mean, I know that if you want to waste space on 16-bit characters, it might make some very small amount of sense to have a byte-order mark, but for crying out loud, just standardize that order and live with it. We don't need more parts of text file that are interpretable, and cause both usability problems and security problems.
- theandrewbailey 7y ago> In addition, keep the contact area as small as possible by linking as few style sheets and scripts as possible from documents and templates. Good to know that Google recommends HTTP/1.1 optimization practices. It seems like everyone is ready to spew dozens/hundreds of tiny files over HTTP/2, though the performance rationale is dubious at best.
- killion 7y agoI can’t stop looking at the missing </p> tag in the recommended example.
- PedroBatista 7y agoGoogle has been anti-Web for a long time. So I couldn't care less about their "ideas" other than being informed of what populates the head of these people. On a more objective note, if you need omit the head and body tags to get more performance, something is very wrong with your page/tech whatever. Maybe consider removing all those Google Fonts, all that Google tracking scripts, FB too and since you are at it, consider deleted Google Adsense if you can, since those $4.84 per month are costing you and us a whole more than the Billions in revenue Google gets. Sorry for the saltiness, but I'm really getting fed-up with the arrogance of these childish oligarchies.
- JoshMnem 7y agoWhat about meta tags (viewport, description, robots), Open Graph tags, and inline styles? Is it correct to put a title element outside of a head element? "Permitted parents: A <head> element that contains no other <title> element." "The <title> element is always used within a page's <head> block." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ti... Google's style guides aren't very good in general, including Python, which doesn't follow PEP8.
- edflsafoiewq 7y agoPut them before the start of the body and they'll go into the head. In <!DOCTYPE html> <title>title</title> <style>body { color: #111; }</style> <p>content the title and style elements are both inside the head element.
- JoshMnem 7y agoIt doesn't seem like a good idea to make HTML more complicated just to save 13 characters per page. It's just one more unclear thing that beginners would have to understand. "These elements go in the <head>" is easier to learn than "Here's a list of elements that have to be put in a specific order, but there is no visual indication that they are different." They will tend get copied/pasted out of tutorials in the wrong order.
- mikey_p 7y agoWould love to see someone ask how you integrate Google Analytics or GTM with this, given they both have instructions relative to <head> and <body> tags...
- OnlyRepliesToBS 7y agorace to the bottom
- boomlinde 7y agoIt's funny that the company that tries to "accelerate" web pages by directing webmasters to build their websites using a 270k AMP script internally guides its developers to size optimize by omitting the spoonfuls of bytes for optional tags—in a document that in itself doesn't follow these guidelines and is possibly the simplest page that Google has ever produced. What an absurd state of affairs.