Document Boilerplate: DOCTYPE, html, head, body

10 min read

The HTML Document Shell

Every HTML file should start with a small set of required lines that tell the browser which version of HTML you are using and how to organise the document. This shell is sometimes called the boilerplate.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Breaking It Down

<!DOCTYPE html> — Tells the browser this is an HTML5 document. Always the very first line.
<html lang="en"> — The root element. The lang attribute helps screen readers and search engines.
<head> — Contains metadata that is not shown on the page: charset, viewport, title, links to CSS, etc.
<body> — Everything inside here is rendered visually in the browser window.

In editors like VS Code, type ! and press Tab to auto-generate this boilerplate. CPCODELAB lessons always start with this shell so you build the habit from day one.

The charset="UTF-8" declaration ensures the browser can render characters from any language, including emojis. Without it, non-ASCII characters may display as garbled symbols.

Ready to test yourself?

Practice HTML— quiz & coding exercises