<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
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.
An HTML file always starts with the doctype:
Although you won’t interact with the doctype much, it’s still required to be at the top of the file.
After the doctype, the rest of your HTML code is wrapped in an
<html lang="en"> <!-- The rest of your code is in here --> </html>
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>
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 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>
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>
You can view any of the HTML demos here to see the boilerplate HTML code in action.
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.
HTML basics on MDN