Minimal HTML Template

Ivan Georgiev

3 min readOct 7, 2019

When I want to do a quick conceptual test, I need a simple, short HTML template to start with.

Problem

You want to start a new minimal HTML page. For that purpose you need a very simple copy/paste HTML markup.

Solution

To start new, empty HTML page, use following minimal markup:

<!doctype html>

<html>
<head>
  <meta charset="utf-8">

  <title>My HTML Page</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- Add your HTML here -->
  <script src="js/main.js"></script>
</body>
</html>

You can replace the comment  with the actual document content.

Also you can remove the link and script elements if you do not need them.

Discussion

The Doctype

Although the document type declaration (doctype) is not strictly required, it is recommended to include it:

<!doctype html>

This declaration is a way to tell the browser or any other reader (human or bot) about what type of document is this. The declaration must be the first item of any HTML page.

The `html` Element

All the content of the HTML document is wrapped into a html element. It is a good practice to add a lang attribute to the element:

<html lang="en">
    
</html>

The `head` Element

HTML documents have two parts — header and body. The header contains metadata and instructions to browsers and bots and the body contains the actual document content.

One important element in the header is the character encoding meta element:

<head>
    <meta charset="utf-8">
</head>

In most cases the encoding is utf-8. The element must be included within the first 512 characters of the document and should appear before any content-based elements.

The Document `title`

The document title is specified in the document header (the head element), using title element:

<head>
    <meta charset="utf-8">
    <title>My First Document</title>
</head>

It is always a good idea to give your documents a title so that browsers, search engines or bots can display meaningful title when rendering the HTML document.

Document Stylesheets (CSS)

To specify document stylesheets, the link element is added to the document header:

<head>
  <meta charset="utf-8"
  <title>My HTML Page</title>

  <link rel="stylesheet" href="css/style.css">
</head>

Document Content

Document content is placed in the body element.

<body>
  <!-- Add your HTML here -->
</body>

HTML Comments

To highlight where the document content goes, I added HTML comment . HTML comments are ignored by browsers so you can use them. In some situations, you might still want to embed additional information in the form of comments.

JavaScript Files

The best practices for JavaScript suggest putting script elements at the end of the document. The reason is that when the browser encounters a script, the downloading and rendering of the page is paused until the script is parsed. As a result the overall rendering time of the page increases.

Advanced Templates

For more advanced and full featured template, you can use the HTML Boilerplate. It provides much more features.

For many simple tasks, e.g. concept testing, I found that using the described here template works much better.