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.
Note: You’ll notice that you can’t see these tags in our CodePen demos. That’s because CodePen hides the boilerplate code from you, but it’s technically still there.
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 ! 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 should 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.
Exercises
Recreate the code snippet in the Demo section by typing out the code in your index.html file or using the shortcut from the VS Code Tip section.
References
HTML basics on MDN