Command Palette

Search for a command to run...

Hectal
PHASE 0Beginner ~16 min· topic 4 of 4

Topic 0.4

Your First Complete HTML Page

In one line

A proper HTML page has a fixed skeleton: a doctype, an html element with a language, a head with information about the page, and a body with what you see.

0/4 · 0%

Think of it like this

A letter in an envelope. The envelope (the <head>) carries information about the letter: who it's for, the title on the outside. The letter inside (the <body>) is what the reader actually reads. The <!DOCTYPE html> line is like the stamp saying which postal rules to follow.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

DOCTYPE
The first line, <!DOCTYPE html>, telling the browser this is a modern HTML page.
Standards mode
The browser's normal, modern way of showing pages. The doctype turns it on.
head
The part of the page with information about it (title, character set), not shown in the page.
body
The part of the page with everything you see.
meta
An element in the head that gives the browser extra information, like the character set.
Character encoding
The rule for turning stored bytes into letters. UTF-8 covers every language and emoji.
Nesting
Putting elements inside other elements, like boxes inside boxes.

Step by step

01Start with the doctype

The first line of every HTML page. It's not a tag; it's an instruction to the browser.

index.htmlwhole filehtml
<!DOCTYPE html>

02Add the html element

Everything else goes inside <html> and </html>. Set the language with lang.

index.htmlwhole filehtml
<!DOCTYPE html>
<html lang="en">

</html>

03Fill the head

The charset line should come first in the head, before any text, so the browser decodes everything correctly from the start.

index.htmlwhole filehtml
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first page</title>
  </head>

</html>

04Add the body

Now the visible content. This is the complete skeleton you'll start every page with.

index.htmlwhole filehtml
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first real web page.</p>
  </body>
</html>
Add the bodydiagram
Rendering diagram…

05Check it in the browser

Open the page: the tab shows "My first page" and the page shows your heading and paragraph. In DevTools → Elements you'll see exactly the tree from the diagram.

Try it yourself

  1. 1

    Change the tab title

    In the first example, change the <title> text and run it: the console prints the new title.

  2. 2

    Watch the repair

    In the second example, right-click the preview → Inspect. In the Elements panel the <h1> sits inside <body>, not where it was written. Move it into the body in the code and the page stays the same, but now your HTML is correct.

  3. 3

    Build it locally

    Type the skeleton yourself (don't paste) into index.html and open it in your browser. Typing it a few times is how it sticks.

Code & diagrams

The complete page skeleton New tab

The JavaScript tab reads the page's details so you can see what the skeleton set.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Title: My first page
Language: en
Charset: UTF-8
The browser repairs a misplaced heading New tab

The heading was written in the head, but the browser moved it into the body. The page looks fine; the HTML you wrote isn't the HTML you got.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Heading inside head? false
Heading inside body? true

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Forget the charset

Remove <meta charset="utf-8"> from a local page that contains é or 🙂, and serve it from a server that doesn't send an encoding.

terminal
$ the page shows
── what you'll see ──
Héllo and 🙂 instead of Héllo and 🙂

Break #2

Put content in the head

Move the <h1>Welcome!</h1> line inside <head>.

terminal
$ DevTools → Elements
── what you'll see ──
<head> ... </head>
<body>
<h1>Welcome!</h1>

Myth vs fact

Myth

The <title> is the big heading on the page.

Fact

The title appears on the browser tab, in bookmarks and in search results. The visible heading is <h1> in the body.

Myth

If the page looks right, the HTML is right.

Fact

Browsers repair many mistakes silently. Use DevTools or the W3C validator (validator.w3.org) to see what your HTML really is.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    The HTML parser fixes errors in a fully specified way (the HTML Living Standard defines error recovery), so every browser repairs a given mistake identically. That predictability is why invalid HTML often "works", and why it's still worth fixing.

  • ▸

    <meta charset> must appear within the first 1024 bytes of the document so the browser can switch encoding before it has decoded much text.

  • ▸

    Quirks mode mainly changes CSS layout: for example, how percentage heights and table sizing behave. Some modern features expect standards mode, so a missing doctype can cause layout bugs that are hard to trace.

Remember this

  1. 1

    <!DOCTYPE html> goes on the very first line. It tells the browser to use modern standards mode. Without it, browsers fall back to quirks mode, which imitates bugs from 1990s browsers and lays some things out differently.

  2. 2

    <html lang="en"> wraps the whole page. The lang attribute says the page's language, which screen readers use to pronounce words correctly and browsers use to offer translation.

  3. 3

    <head> holds information about the page that isn't shown in it: <meta charset="utf-8"> (the text encoding, so letters like é, ñ and emoji display correctly), <meta name="viewport" ...> (so phones show the page at the right size) and <title> (the text on the browser tab, in bookmarks and in search results).

  4. 4

    <body> holds everything visible: headings, paragraphs, images, links. A page has exactly one head and one body.

  5. 5

    Elements nest like boxes inside boxes: head and body are inside html, and title is inside head. Indenting the inner elements is not required, but it makes the structure easy to see.

  6. 6

    Browsers are forgiving: if you forget parts of the skeleton, they quietly add them. Don't rely on that. A complete skeleton behaves the same in every browser and is what professionals write.

Explain it without notes

01

What goes in the <head> and what goes in the <body>?

02

Why should every page start with <!DOCTYPE html>?

03

What does lang="en" do, and who benefits from it?

Practice

01

Write the complete skeleton of a page titled Recipes with an <h1> saying My recipes and one paragraph.

02

Change your page to French: what attribute value do you change?

Trade-offs

  • ↔

    Writing the full skeleton costs a few lines; skipping it saves nothing and risks quirks mode, garbled characters and poor phone layout.

Done when you can

  • I can write the complete HTML skeleton from memory.

  • I know what the doctype, lang, charset, viewport and title each do.

  • I can say which elements belong in the head and which in the body.

  • I can check a page's structure in DevTools.