Every HTML page is built from the same small set of parts. They tell the browser what kind of document
it is, what to call the page, and what to show.
<!DOCTYPE html> tells the browser this is HTML5.
<html> is the root element that wraps everything; its lang attribute
says what language the page is written in.
<head> holds information about the page (the title, the character set) -
none of it is shown on the page itself.
<title> is the text that appears in the browser tab.
<body> holds everything that is actually displayed.
Try it: a complete page
Copy this into a new file called index.html and open it in a browser:
You should see the browser tab labelled "My first page", and "Hello" with the paragraph shown in the
window.
Key points
The <title> lives in <head> and shows in the browser tab - not
in the page body.
Everything visible goes inside <body>.
The lang attribute on <html> helps screen readers pronounce the page
correctly.
Exercises
Exercise 1 - Build a complete page
Preparation: re-read "The skeleton of every page" above.
Write a complete, valid HTML page with a title of "About me", one
<h1> heading, and one <p> paragraph.
Try it in: save as index.html and open in a
browser, or use CodePen / VS Code. Starter: <!DOCTYPE html><html>…</html>
Hint 1 - direction
Start with the four parts: doctype, html,
head, body.
Hint 2 - partial solution
Remember the <title>
goes inside <head>, and the heading/paragraph go inside
<body>.
Hint 3 - full solution
Check your work: the browser tab reads "About me", and the
heading plus paragraph are visible in the window.
Exercise 2 - Fix a broken page
Preparation: note where <title> and the
character set go.
A page is missing its <title> and its
<meta charset="UTF-8">. Add them, and explain what each one is for.
Try it in: your editor, then reload the page in the
browser.
Hint 1 - direction
Both belong inside
<head>.
Hint 2 - partial solution
The title is what the tab shows; the
charset makes sure letters and symbols display correctly.
Hint 3 - full solution
Add <title>…</title>
and <meta charset="UTF-8"> inside <head>. The title labels the
tab and the charset tells the browser how to interpret the characters (so é, £, etc. display
correctly).
Check your work: the tab shows your title, and any accented
characters render correctly.
Exercise 3 - Predict where the title shows
Preparation: re-read the key points about
<title>.
Without running it, predict: does the <title> text appear in
the page itself, or somewhere else? Explain where.
No code needed - answer in a sentence, then check in the
browser.
Hint 1 - direction
It is not part of the visible body
content.
Hint 2 - partial solution
Look at the top of the browser
window.
Hint 3 - full solution
The <title> text
appears in the browser tab (and in search results / bookmarks), not in the page
body. Only content inside <body> is displayed in the page.
Check your work: you said "browser tab" (or equivalent), not "on
the page".
Exercise 4 - Add the language attribute
Preparation: re-read the point about the lang
attribute.
Add lang="en" to the <html> element of your
page, and explain in one sentence why it matters.
Try it in: your editor - this one changes behaviour for
assistive technology, not what you see.
Hint 1 - direction
It goes on the opening
<html> tag.
Hint 2 - partial solution
It declares the document's
language.
Hint 3 - full solution
Write <html lang="en">.
It tells screen readers (and search engines) which language the content is in, so it is read aloud
with the correct pronunciation.
Check your work: your <html> tag now has a
lang attribute.