Google HTML/CSS style guide suggests omitting head and body tags

[zelon88]

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

[wybiral]

Yeah, or if people returned to using HTML the way it was meant to be used instead of using a JavaScript framework on every page.

[kllrnohj]

One of them is a functional change and one of them isn't. And they are not incompatible changes, so you can do both if you really care.

But there's no reason to ignore literally free improvements just because there's bigger, not free improvements to be had as well.

[jimktrains2]

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

[gorzynsk]

Removing ads and tracking scripts will be more effective in reducing page size.

[yeahitslikethat]

And Web pages will load a lot faster. The whole Internet would speed up!

[hkai]

Removing a fuel tank from a plane would be an efficient way to save fuel.

[myl]

I'll consider following that advice the day https://google.com obeys.

[spankalee]

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

[smoe]

I vaguely remember years ago google.com omitting tags to strip file size and there being some mild controversy around it. Pretty sure it was before HTML 5 adaption and don't think back then the tags where optional, just that browsers try to interpret whatever mess is thrown at them.

[yeahitslikethat]

Do as we say, not as we do. all the more reason not to trust them.

[bshimmin]

Previous discussion of this from 2016: https://news.ycombinator.com/item?id=12520674

(Seems like a terrible idea to me - complex rules to follow for a really minimal saving...)

[blauditore]

True, 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]

Yep I agree with that top comment. Explicit is far more understandable and maintainable than implicit.

[jammygit]

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

[sarah180]

In 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]

It'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?

[apetresc]

This 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]

times that 10 bytes by all the pages googlebot spiders and that's significant savings on bandwidth & storage for big G

[NightlyDev]

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

[saurik]

I don't understand: since when are those structure tags optional, and in what browsers and browser versions would this work in?

[pdw]

I believe they've been optional in every version of HTML.

The example document in the HTML+ spec (1993) did not use them: https://www.w3.org/MarkUp/HTMLPlus/htmlplus_7.html

The HTML 2.0 spec gives this as its first example:

    <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
    <title>Parsing Example</title>
    <p>Some text. <em>&#42;wow&#42;</em></p>

[ntzm]

The HTML5 specification says where they're optional, so any browser that properly implements the spec

[jchw]

They are implied. I believe this dates back to when browsers supported non-standard HTML and the behavior of doing it was cemented in HTML5 (like tag soup and so forth.) Since it was based on existing behavior it should work even in old IE, just like the doctype.

[Tomte]

Since pretty much forever. HTML 4 for sure, probably even earlier.

[yoz-y]

From the slug of this page it seems since 2011? https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#opt...

Note though that there are some conditions.

[jacobsenscott]

Good. I hate writing those useless tags over and over and having all the actual content deeply indented from the start. (seriously).

[netsharc]

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

[pupppet]

Man, me too. Indenting the meat of the page that heavily seems wrong, as does not properly indenting it.

[boomlinde]

It'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.

[wycy]

To 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]

I was slightly confused.

I thought it was referring to the <main> tag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...

[Camillo]

From 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]

Of 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>

[duxup]

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

[ianhawes]

> 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]

Note that the guidelines, including this note, are at least 5 years old now.

[jchw]

Interesting... 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]

That problem already exists with tables, doesn't it?

[dragonwriter]

Note that this is decidedly not new; there are references to this advice from Google at least back to 2014.

[JoshMnem]

What 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/ti...

Google's style guides aren't very good in general, including Python, which doesn't follow PEP8.

[edflsafoiewq]

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

[bediger4000]

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

[ravenstine]

Aren'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]

I think those elements still end up in the DOM regardless of whether you type them out explicitly. I might be mid-remembering though.

[edflsafoiewq]

There'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.

[yodon]

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