Many html tags have don't have to be closed, like <p>, <li>, and table elements. But surprisingly some tags don't need to be opened or closed.
If you leave out the <html>, <head>, and <body> tags in your markup, the browser will add them for you.
This isn't a hack, it's part of the html5 specification.
How does the browser know what to do?
It's simple for the browser to wrap your markup in an <html> tag. but how does it know when the <head> ends and the <body> begins?
It's works something like this:
Most elements only belong in the <body> tag, so the browser opens a <head> tag, then when it comes across the first element that only belongs in the <body> it closes the <head> and opens the <body>.
<doctype html>
<title>A relevant title</title>
<script>
<style></style>
<link>
// A div can't be in the head.
// So the browser knows to close the head tag...
// ...and open the body tag here
<div></div>
Why do this?
It saves 39 bytes on every page of your site. One of many small optimisations that add up to a lot.
HTML Minifies
I've been using html-minifier to do this for me. Though it's not a default setting.
Top comments (6)
So out of curiosity, I tested this locally and you're right: Omitting head/body tags does reduce the network request size for the HTML document. However, the part that I don't understand is this:
Optimizations at the byte level are useless—optimizations at the kB and MB level, on the other hand, can make a significant difference in load times.
Besides, most sites these days will have proper HTML scaffolded out with JS frameworks or SSGs anyway, so there's no point in advocating for this approach.
One last thing worth mentioning: You can have link and script tags in the body, and there's sometimes a very good reason for doing so (e.g., deferring JavaScript).
Well, kilobytes are made of bytes. If you have 100 similar optimizations, you'll start seeing the differences. Especially once 1 million people visit your site.
You can still place link and script tags in the
<body>. So long as they're placed after an element that isn't allowed in the<head>. Usually when deferring scripts you place them at the very end of the document, so in that case it will work the same.I totally get why someone wouldn't bother doing this. But if you're already minifying html, which you definitely should do, then it's as simple as adding something like
omitUnnecessaryTags:trueto your config.That's a bit like saying that $1,000,000 is made of $1 bills (technically true), and you'll eventually become a millionaire if you collect enough $1 bills (not necessarily true, and almost always false).
Every optimization incurs a cost—on maintainability, legibility, and time. There are far better ways to minify your HTML and other assets, like with compression.
Think of this in terms of opportunity cost. Why save 39 bytes when you could save more, by working on more meaningful optimizations? Time is money.
I totally understand what you're saying. I personally enjoy little things like this so I'm happy to do them. i wouldn't expect every developer to take the time to do this on every individual website.
But there are situations where doing this would save
39 byteson lots of other people's sites. Like if you're building a template of some kind. then you really ought to take the time to do this sort of thing.Considering Accessibility
How we screen readers read out the page?
Won't they skip the heading?
So the initial package is missing the tags, but the browser puts them in where they belong, so to the end user there is no difference.