What is the best basic template for an HTML doc?
I often ask myself this question, and though there are quite a few code generators which do just that (or at least claim to) I wanted to take control over the very basic foundation of any web page, regardless of whether I’m using React, Solid, vanilla or any other frontend solution to build it.
What should it include and why?
The core idea behind "back to sq1" is to utilize the right tools for the right tasks and to fully understand the purpose of each tool. As we go along this post, I hope this will become clearer. I will go through each line (or related group of elements) step by step, explaining its function and why I believe it should be part of a basic HTML template.
Let’s start from the top -
DOCTYPE
<!DOCTYPE html>
According to the specs “Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.” We don’t want anything surprising going on when the document is rendered, right?
BTW, it is case insensitive, so we can also write <!DOCTYPE HTML> but I prefer the format above (so is my IDEA so we’re cool on that).
The html root element
<html lang="en" dir="ltr">
…
</html>
For creating our HTML doc we need to start with the html tag. Did you know that you can omit this tag in certain situations? But why would we - let’s keep it readable and understandable.
The lang attribute can be applied to all elements (yes, not just html), but it is a good practice to put the lang up there and have all its descendant elements adhere to it.
We also want to add the direction the page is at, meaning what is the direction of the content in this page. E.g. If it's English, we will use ltr (left to right), if it's Hebrew, rtl.
That pretty much sums it for the html root tag. The other attributes available for it are either obsolete or not needed for common modern web pages.
The head element
The head element is where things begin to vary. Here we need to think about what we want this tag to contain as it can affect our page performance among other things.
We will start with the page’s metadata. The head tag will usually hold some meta tags. Lets see what are the basic meta tags we would like to have
Meta tags
charset
<meta charset="utf-8">
Here we set the encoding of the entire html doc. It must be utf-8 since it is the only valid encoding for HTML5 documents. Also it has to be within the first 1024 char of the document, so it is wise to put it first.
Having this will eliminate the need to use the content-type http-equiv meta tag (see below).
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The name and the content are like “key” and “value”. Here we set the viewport to width=device-width, initial-scale=1.0. What do they mean?
“width=device-width” means that when the page loads, its width should be the width of the device it is being displayed on. You can also set this width to actual size in pixels but I don’t think there is a real use-case for that.
The “initial-scale” defines the zoom level of the document. 1.0 means that it is 100%.
So basically what we’re saying here is “your width is the display width and your zoom should be 100% to begin with”.
http-equiv
“Defines a pragma directive”. What is a pragma you ask? Basically it is more information on how to handle this document that the browser understands.
The allowed values for this meta are http headers. According to the docs there are 5 headers you can use, but I’m only interested in one - the content-security-policy.
The content-security-policy is the one that allows us to define the security policy without needing to register them on the response header.
There are some advantages to that, one of them relates to the JAMstack, where you eventually serve static pages from a CDN. It might be that the pages being cached do not bear the same headers the response has from the origin server and you still want your CSP (content security policy) to protect the page. In addition to that, headers tend to have size limits and sometimes CSPs can be quite large.
So I suggest having this meta in your html page and not on the header. I think that the most basic one is allowing src resources only from a secured http connection. Later on you can enrich that to gain better security over the web page.
<meta http-equiv="Content-Security-Policy" content="default-src https:" />
Author
This one is for setting the author of this document, and why the hell not to?
<meta name="author" content="Matti Bar-Zeev">
Description
This is mainly for SEO. It describes the page purpose so that search engine indexing could get a better understanding on how to index it. There are a lot more meta tags and tricks to increase SEO indexing but this is a topic which deserves its own post. For now, here is what I have:
<meta name="description" content="Your site description">
Title tag
Finally we’re getting into something which also has a displayable aspect to it - the title tag.
This tag determines the text shown in a page's tab. Let’s keep it as simple as it is:
<title>Your Website Title</title>
Fav Icon
Another important thing is the fav icon. This is the icon that the browser will show on the page’s tab, and in bookmarks (hence the “favorite” in the name) and usually bears the brand logo.
Usually this will hold a 16x16 pixels .png, .ico or some other low volume image. avoid large fav icons since they still need to be seen in a 16x16 resolution yet their size will affect your site’s Core Web Vitals (CWV) score. The path can be either relative or absolute. I will go with the relative one
<link rel="icon" href="./favicon.ico">
Resetting the styles
It is well known that each browser has its own “understanding” of what the default CSS styles should be, thus the same CSS can result in a different visual experience across different browsers. So far for a single standard to rule them all.
What we need to do to avoid this chaos is to reset and align the styles before we start writing our first CSS rule.
There is a great article by Josh Cameo (if you haven't already, check out his blog, the guy's a true inspiration) where he gives his reset style rules with a good explanation about each decision. This is my goto reset CSS file.
I’m adding the media=”all” to declare that this reset is applied to all sorts of media, no matter screen size.
<link rel="stylesheet" href="./reset.css" media="all"/>
Other CSS resources
I’m going to separate my CSS resources. We already saw that we have the reset.css which aligns all browsers. On top of that I will have a common.css which will contain rules that are common for all pages in the site, and on top of that I will have the specific page.css that will contain rules only for the page we’re at.
This gives a lot of advantages, first by caching the “static” css files while only fetching the changing CSS for each page, and also keeping a good SoC of which CSS rule goes where, and not mixing responsibilities.
So I’m adding these lines:
<link rel="stylesheet" href="./common.css" media="all" />
<link rel="stylesheet" href="./page.css" media="all" />
The body element
This is where our page content is being placed. Generally speaking this tag should have 3 main “sections” - header, main and footer. These are all semantic html tags, and here is the place to emphasize the importance of using semantic html over generic div’s. This will help SEO and users who need a better accessible site. Always try to find the most suitable semantic html to represent your content.
At the end of the content inside the body element I will put the scripts. The reason is well known but still - JS scripts tend to be render blocking, and also cause the browser to fetch, evaluate and execute them (which may take time). Having the scripts at the end gives the browser a chance to render the content before starting to execute scripts.
So here what we have in the body element:
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
<script src="./page.js"></script>
</body>
I think that this is it for now. Here is the final result:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src https:" />
<meta name="author" content="Matti Bar-Zeev">
<meta name="description" content="Your site description" />
<title>Your Website Title</title>
<link rel="icon" href="./favicon.ico" />
<link rel="stylesheet" href="./reset.css" media="all" />
<link rel="stylesheet" href="./common.css" media="all" />
<link rel="stylesheet" href="./page.css" media="all" />
</head>
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
<script src="./page.js"></script>
</body>
</html>
Now you can start enriching your web page with content and interactivity.
I hope that this basic template helps you understand the different parts better so you can choose them with care instead letting a generator do the decisions for you, without knowing their meaning
If you have any other ideas that you think should be included in the basic HTML template, please leave your comment in the comments section below
Cheers
*Hey! for more content like the one you've just read check out @mattibarzeev 🍻
Photo by Sean Stratton on Unsplash
Top comments (2)
This is one of the best articles I have seen about HTML Template. As referred, there are more tags that can be used, but this a great list to start with.
Thanks for the article!
So happy to hear that! thanks mate 🍻