feather

Featherweb Blog

Blog index

Pruning a web page

No <html>, no <head>, no <body>!

tree
Image

Image by Simon Wilkes @ Unsplash


Sep 03, 2022

If you too like your pages to be light and fast and make the source code as readable and as resource efficient as possible, continue reading... HTML5 became official in 2014 and its current edition, version 5.2, in 2018. Somewhere during that period, HTML5 introduced "Optional Tags", quite a long list of omittable tags and/or closing tags. We all know some of them, e.g. <hr>, <br>, <meta>, or<link>. Those tags need no closing tag. This might be old news to you, but I was happily surprised, when I discovered the "big" tags like html, head, body and /p can be omitted as well. A comparison, traditional first: 


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My sister loves</title>
  <link rel="stylesheet" href="../style/default.css">
</head>
  <body>
    <p>My sister loves dark chocolate.</p>
  </body>
</html>
and then the new approach: 

<!DOCTYPE HTML>
  <meta charset="UTF-8">
  <title>My sister loves</title>
  <link rel="stylesheet" href="../style/default.css">
<p>My sister loves dark chocolate.

Wow, 5 lines instead of 11! Personally, I would leave a blank line between line 4 an 5, as a reminder where the 'head' ends and the 'body' starts. Or am I being "old-fashioned"? Which leads to the question: why is this way of writing HTML not more widely visible. As far as I could see most authors and teachers stick to the classic scheme. Are we humans habit-animals?

A useful list of all optional tags. All tags are links to their complete explanation.

Google has an interesting page on github: Optional Tags

If you really want to dig (much) deeper into html5: HTML Living Standard


▵
Feedback ⇆