DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Max Lockwood
Max Lockwood

Posted on • Originally published at maxlockwood.dev

How to Create an HTML Boilerplate

When launching a new website, it is essential to have a strong foundation. In this article, I’ll define an HTML5 boilerplate and show you how to make a basic template for usage in your projects.

What is an HTML5 Boilerplate?

A boilerplate in HTML is a template that you will include at the beginning of your project. This boilerplate should be added to all of your HTML pages.

Example HTML5 Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

What is a DOCTYPE in HTML?

Doctype HTML is a declaration that informs the browser of the HTML version in which the document is written. In an HTML file, this declaration appears as the first line.

Every HTML document must begin with a <!DOCTYPE> declaration.

The declaration does not contain an HTML tag. It is β€œinformation” to the browser about the type of document to expect.

The declaration in HTML5 is straightforward:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

What is the HTML element?

The <html> element is the top-level element of an HTML document, and is referred to as the root element.
Here you will nest the <head> and <body> tags inside of it.

<html lang="en">
    <head></head>
    <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

The lang attribute specifies the language of the element’s content. Always use a language attribute on the html tag to declare the default language of the text in the page. This is inherited by all other elements.

What are head tags in HTML?

The <head> element, which is positioned between the <html> and <body> tags, is a container for metadata (info about data). Metadata is information about an HTML document. Metadata is not shown. The document title, character set, styles, scripts, and other meta information are often defined via metadata.

What is UTF-8 character encoding?

The UTF-8 character encoding system. It allows you to display characters as ASCII text while still supporting international characters like Chinese characters.

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

What does X-UA-Compatible mean?

X-UA-Compatible is a document mode meta tag that allows web authors to choose what version of Internet Explorer the page should be rendered as. It is used by Internet Explorer 8 to specify whether a page should be rendered as IE 7 (compatibility view) or IE 8 (standards view). β€œIE=7” β€œIE=EmulateIE8” β€œIE=8”

In the example below, it supports the latest browser β€œIE=edge”. This is the highest supported document mode of the browser.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Enter fullscreen mode Exit fullscreen mode

What is the viewport meta tag in HTML?

The viewport is the visible area of a web page to the user. It varies depending on the device; on a mobile phone, it will be smaller than on a computer screen. This provides guidance to the browser on how to control the page’s scale and dimensions.

You should include the following <meta> element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0"
Enter fullscreen mode Exit fullscreen mode

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

What are HTML title tags?

The title of the web page is specified by the <title> tag. This text appears in the title bar of the browser.

What are body tags in HTML?

The body of the document is defined by the <body> tag. The <body> element holds all of an HTML document’s contents, such as headings, paragraphs, graphics, hyperlinks, tables, lists, and so on.

How to quickly add a boilerplate in VSCode?

To create an instant HTML boilerplate in VSCode create an empty index.html document.

Type the following into your text editor and then hit tab to see the results.

!
Enter fullscreen mode Exit fullscreen mode

Should reveal the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Useful Resources

If you are looking for a professional HTML5 Boilerplate then definitely check out HTML5 Boilerplate: The web’s most popular front-end template

HTML5 Boilerplate allows you to create web apps or sites that are quick, powerful, and customisable. Start your project with the collective knowledge and labour of hundreds of developers, all in one small package.

Conclusion

Each of your HTML pages should have an HTML 5 boilerplate. The doctype, html, metadata, head and body tags are all included in the initial code. Additionally you can go further and add your own external stylesheets, and script tags.

Learn more about HTML by reading the following articles on my website:

How to write β€œHello World” in HTML
What is an HTML Document’s Basic Structure?
What is an HTML Element? How do you create one?

Top comments (0)

🌚 Life is too short to browse without dark mode