TIL: You can leave out <html>, <head>, and <body> tags.

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 it closes theand opens the`.

<!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 Minifiers #

I've been using html-minifier to do this for me. Though it's not a default setting.

published
1 Jan 21
modified
1 Jan 21
author
Nathaniel
tags
html webperf