DEV Community

Cover image for Back to sq1: My basic HTML template
Matti Bar-Zeev
Matti Bar-Zeev

Posted on

Back to sq1: My basic HTML template

#webdev #html #coding

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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:" />
Enter fullscreen mode Exit fullscreen mode

Author

This one is for setting the author of this document, and why the hell not to?

<meta name="author" content="Matti Bar-Zeev">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
joozferreira profile image
joozferreira •

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!

Collapse
 
mbarzeev profile image
Matti Bar-Zeev •

So happy to hear that! thanks mate 🍻

Read next

matthewbill profile image

TypeScript Regions

Matthew Bill -

mdmarufsarker profile image

Project Ideas Don’t Have to Be Unique: Here’s Why

Md. Maruf Sarker -

simranjit884 profile image

A Comprehensive Guide to Server-Sent Events (SSE) for Real-Time Web Applications

Simranjit singh -

jimmymcbride profile image

SvelteKit Basics: A Crash Course

Jimmy McBride -