HTML Document Structure — HTML & CSS Course

What you'll learn

Every HTML page — from a one-line demo to a giant web app — shares the same skeleton. Learn it once and you'll recognise it everywhere. In this module we dissect the boilerplate from Module 1 line by line so nothing feels like magic.

By the end you'll be able to:

Write the standard HTML document skeleton from memory
Explain the <!DOCTYPE>, <html>, <head>, and <body>
Add essential metadata: title, character set, and viewport
Describe elements, tags, and attributes precisely

Anatomy of a document

Here is the boilerplate every page starts from. We'll unpack each piece below:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
  </head>
  <body>
    <!-- Everything visible goes here -->
    <h1>Welcome</h1>
    <p>Your content lives inside the body.</p>
  </body>
</html>

Notice how elements nest inside one another like boxes within boxes:<html> contains <head> and <body>, which in turn contain more elements. Indenting each level makes that structure easy to read.

The doctype & <html>

The first line, <!DOCTYPE html>, isn't an element — it's a declaration that tells the browser "use modern HTML5 standards." It must be the very first thing on the page. Right after it, the <html> element wraps everything else; it's the root of the document. The lang="en" attribute states the page's language, which helps search engines and screen readers.

The <head>

The <head> holds metadata — information about the page that isn't shown on it directly. Three entries belong on virtually every page:

Element	What it does
<meta charset="UTF-8">	Sets the character encoding so accents and emoji display correctly
<meta name="viewport">	Makes the page scale properly on phones (essential for responsive design)
<title>	Names the page — shown in the browser tab and search results

Note

Content in the <head> is invisible on the page itself, but it's doing important work behind the scenes — encoding, mobile scaling, the tab title, and later your CSS links.

The <body>

Everything a visitor actually sees — headings, paragraphs, images, buttons, links — lives inside the <body>. When we talk about "building a page" from here on, we mostly mean adding and arranging elements in the body. The rest of Phase 1 is all about filling it with content.

Elements, tags & attributes

An element is usually made of an opening tag, some content, and a closing tag. Attributes go in the opening tag and configure the element — they come in name="value" pairs:

element.html

<p class="intro">Hello there!</p>
<!--  |    |            |       |
   opening  attribute  content  closing
    tag                          tag   -->

A few elements have no content and no closing tag — these are called void (or empty) elements. <img>, <br>, <hr>, and<meta> are common examples; they carry all their information in attributes.

Tip

Almost every element needs a matching closing tag (<p>...</p>). Forgetting one is the most common beginner bug — the browser tries to guess where it ends, and your layout breaks in confusing ways. Consistent indentation makes missing tags easy to spot.

You can leave notes for yourself with an HTML comment, which the browser ignores:. Comments are great for labelling sections or temporarily hiding code.

Recap & quick check

Key takeaways

Every page shares one skeleton: <!DOCTYPE html>, <html>, <head>, and <body>.
<!DOCTYPE html> declares HTML5 and must be the first line; <html> is the document's root.
The <head> holds invisible metadata: charset, viewport, and the <title>.
The <body> holds everything the visitor actually sees.
Elements have opening/closing tags and attributes (name="value"); void elements like <img> have no closing tag.

Quick check

1. What must be the very first line of an HTML document?

2. Where does content that visitors see on the page go?

3. What is the purpose of <meta charset="UTF-8">?

4. Which of these is a void (empty) element with no closing tag?

5. How do you write an HTML comment?

The skeleton is second nature now. Next we'll fill the body with real content — headings, paragraphs, and the text elements that carry meaning.