Code condition for checking if is time to learn

HTML5 Starter Boilerplate

Just a personal reference to keep my own sanity

web development #html #code snippet #boilerplate
Author's avatar.

David Linhares

Oct 7, 2024 ・ 5 min read

In the below article we are going to discuss the base requirements for a fully functional html home page template as well as the required code snippet for it.

Table of contents

  1. Glossary
  2. Show me the code
  3. The core concepts
  4. Doctype declaration
  5. HTML
  6. HEAD
  7. BODY
  8. Final considerations

Glossary

  • DTD: Document Type Definition

Show me the code

Without further ado, I give you the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

The core concepts

TLDR; the above code snippet provides:

  • the doctype declaration to enable HTML5 features;
  • the root <html> tag with a language attribute set to english;
  • a <head> element with minimal meta, a title for the page and the placeholder for the page’s stylesheet;
  • sets <body> with a placeholder for the page’s javascript.

Doctype declaration

Nowadays, the document type declaration (DTD) is way simpler than in previous versions. For purposes of comparison, here is the HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

As you can see there are a few more details than the one we use in the html boilerplate code snippet:

<!DOCTYPE html>

Why is this necessary?

Well in short, we are informing the browser on how to interpret the document it is about to load.

The doctype declaration helps the browser prepare the feature set to be used by the document, this is specially important as the living spec of the HTML is updated and may introduce breaking changes in its API.

For a more detailed list of recommended DTD’s, see W3C QA - Recommended list of Doctype declarations you can use in your Web document.

HTML

The root html element tag declares the root level of the document. Everything in between the opening and closing declarations of this tag are to be included and interpreted by the browser.

The head element tag informs the browser about metadata and resources the document needs loading. This can be seen by the meta, title and link tags inside the boilerplate code snippet above.

BODY

Here is where magic happens. All the actual content of your page goes in between the body. That’s what the browser is going to display in its canvas. For instance, all content related html element tags such as headers (h1, h2 …), paragraph (p) and anchors (a), for instance, are going to be rendered when declared between the opening and closing tags of body.

Why not linking the javascript file in the same way we “link” the css stylesheet? Yes, you could link the .js file as part of the head and it is actually recommended to when loading certain libraries (jquery used to be a known use case for doing so), it ensures the page only starts to load when the head required resources indeed finish loading. The reason we “link” this script tag in the body is so that we have it loading alongside the page, unblocking the browser from the “load” step in the lifecycle.

For more details on the page lifecycle see Overview of Page Lifecycle states and events from developer.chrome.com.

Final considerations

The main purpose of this article was to have a quick reference for my own personal projects but adding some meaning behind the given boilerplate is helpful to justify “why would we need any of this?”.

Hope this was a good read.

See ya! 👋