Boilerplate – HTML

Preview

To view this and the other 250+ tutorials on Simple Dev, sign up for a 10-day free trial.

Summary

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

Details

With HTML files, there are some standard tags and elements that show up on every page and are required to be there. This standard HTML code is called boilerplate code.

Doctype

An HTML file always starts with the doctype:

<!DOCTYPE html>

Although you won’t interact with the doctype much, it’s still required to be at the top of the file.

html element

After the doctype, the rest of your HTML code is wrapped in an html element:

<html lang="en">
  <!-- The rest of your code is in here -->
</html>

head element

The first element nested inside the html element is the head element. The head element generally contains all the metadata for your web page. Metadata is information that’s associated with your HTML file that isn’t necessarily visible to the user (at least, not on the actual web page).

<head>
  <!-- Metadata goes here -->
</head>

meta element

The tag that says <meta charset="utf-8"> tells the browser what character set your web page uses. Setting this ensures that the right characters are used when displaying your web page.

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

title element

The title element controls what text is displayed in the browser tab when viewing the HTML file in the browser. It’s always nested inside the head element.

<head>
  <!-- Metadata goes here -->
  <title>Text to show in browser tab</title>
</head>

body element

The second element nested inside the html element is the body element. It contains all of the text and visual elements that you want to show in the browser, such as your headings, paragraphs, and links.

<body>
  <!-- Visual elements go here -->
</body>

VS Code Tip

You can generate all of the boilerplate code in VS Code by typing an exclamation point (!) in an HTML file and pressing Tab or Enter.

When using this shortcut, you will generate 2 more meta elements in the head element. The first is to help make your webpage compatible with older Microsoft browsers. The second is to help with displaying your webpage on smaller screens (smartphone screens, for example). You can keep these meta elements in your code.

<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>

Demo

You can view any of the HTML demos here to see the boilerplate HTML code in action.

References

HTML basics on MDN

Lesson tags: Open Lesson
Back to: HTML Course > HTML Syntax