Skip to content
HTML Course

Add boilerplate code

Intro

Every HTML file should start with something called boilerplate code.

Boilerplate code is the basic code that needs to be inside of every HTML file to be considered a proper HTML document.

So, before you start writing any other code, you need to first add the boilerplate code.

Steps

Add boilerplate code

To create the boilerplate, type an exclamation point and then press Tab.

!

This shortcut will generate all of the boilerplate code you need.

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


</body>
</html>

Explanation

It looks like a lot of code, but if you look at the preview, you’ll see there’s nothing on the page. This is because the boilerplate code is more like a skeleton for your HTML file and it’s used to organize your code. It actually doesn’t add any content to your page, like text or images.

As a beginner, you don’t have to understand every part of the boilerplate code just yet. The main thing to know right now is that most of the code you’re going to write in this course will go in between the body tags on lines 9 and 11.

Right now, there’s not a lot of room in between the body tags, but you can always use the Enter key to create more lines if you need room to write more code.

We will explain what some of the boilerplate code means in the next lesson.

IMPORTANT: SAVE YOUR WORK

The live preview extension will display the code you write as you type it, but it does not automatically save your work. Make sure you are saving your files often so you don’t lose any work.

You can go to the menu bar and click File > Save to save your file. However, I recommend using the keyboard shortcuts Control + S on Windows or Command + S on macOS to save your file since they’re faster.

I recommend saving your work after completing each lesson at a minimum. You could also save your work after each step in a lesson.

Final code

Check the last code snippet for the code that should be in between the index.html file.