Topic: HTML Basics

Boilerplate HTML code

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.

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.

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>

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

The title tag 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>

Demo

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

References

HTML basics on MDN