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 the
and 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 2021
- modified
- 1 Jan 2021
- author
- Nathaniel
- tags
posts
html
web performance