HTML Document Structure: doctype, head and body

What you will learn

In the last lesson you ran a complete page. Now you will understand what each part of it does, so you can write the skeleton of any web page from memory.

The skeleton of every page

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Page Title</title>
  </head>
  <body>
    <h1>Visible content goes here</h1>
  </body>
</html>

There are two big ideas: the head holds information about the page, and the body holds what people actually see.

<!doctype html>

The first line tells the browser to read the page in standards mode, following modern rules. Without it, browsers switch to “quirks mode” and may lay things out in old, inconsistent ways. It is not a normal element, so it has no closing tag. Always put it first.

<html lang="en">

The <html> element wraps the whole page. Its lang attribute states the page language. Screen readers use it to pick the right pronunciation, and browsers use it for translation and spell checking. Use the code for your content, for example en, hi or fr.

<head>: information about the page

Nothing inside <head> is shown in the page itself. It contains:

• <meta charset="utf-8"> sets the text encoding so letters like é and ₹ display correctly. Keep it near the top of the head.
• <meta name="viewport" content="width=device-width, initial-scale=1"> makes the page fit properly on phones. Without it, mobile browsers show a shrunken desktop layout.
• <title> is the text shown in the browser tab and in search results. Make each page’s title unique and descriptive.
• Later you will also add <link> (for CSS files) and <script> (for JavaScript) here.

<body>: what visitors see

Everything visible lives inside <body>: headings, paragraphs, images, links, buttons and more. Most of this course happens here.

Comments

A comment is a note for humans. The browser ignores it.

<!-- This is a comment. It does not appear on the page. -->
<p>This paragraph is visible.</p>

Nesting and indentation

Elements sit inside other elements. This is called nesting, and the rule is that an inner element must be closed before its parent.

<!-- Correct -->
<p>Hello <strong>world</strong></p>

<!-- Wrong: the tags overlap -->
<p>Hello <strong>world</p></strong>

Indent nested elements by two spaces. Browsers do not need it, but it makes your code much easier to read and to debug.

Good to know: HTML collapses extra spaces and line breaks. Five spaces or five blank lines between words still display as one space. To control spacing you will use CSS, not repeated spaces.

Common mistakes

• Putting visible content in <head>. A heading placed there will not display as expected. Visible content belongs in <body>.
• Forgetting <title>. Pages without a title show the file name in the tab and do badly in search results.
• Two <body> or <html> elements. A page has exactly one of each.
• Skipping the viewport tag. Your page will look tiny on phones.

Practice

1. Open the editor with the Practice in Editor button and change the <title>. Where does the new title appear?
2. Add a comment above the <h1>, then confirm it does not show in the preview.
3. Deliberately overlap two tags, as in the wrong example above, and look at how the preview reacts.

Recap

• <!doctype html> first, then a single <html lang="…"> element.
• <head> holds page information: charset, viewport, title.
• <body> holds everything visitors see.
• Nest elements properly and indent your code.