Featherweb BlogBlog index
Pruning a web page
No <html>, no <head>, no <body>!
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:
and then the new approach:
<!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>
<!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