Last lesson you wrote the seed of your profile page: your name and an introduction. This lesson wraps that seed in the frame every finished web page carries. It also puts your name in the browser tab.
The concept
Here is roughly where your page stands. Run it:
It works. The heading is a heading, the paragraph is a paragraph. So a fair question: if it works, why does every real page on the web carry more than this?
Look at the small strip above the preview, the one that imitates a browser tab. Right now it reads Untitled. Your page has content but no identity. Nothing tells the browser what this page is called.
Now run the same content inside the standard frame. Watch the tab strip:
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
The tab now shows the name. The page told the browser what it is called. That same title is what a bookmark saves, and what search results usually show as the headline. The frame is not decoration. It is where a page describes itself.
The frame splits a page into two zones. This split is the whole concept of the lesson:
- The head holds information about the page. Nothing inside it is drawn on screen.
- The body holds everything a visitor sees. Every element from last lesson lives here.
The syntax
The complete frame, piece by piece:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Amara Okafor</title>
</head>
<body>
<h1>Amara Okafor</h1>
</body>
</html><!DOCTYPE html> goes on the very first line, always. It tells the browser to read the file by modern rules. If it is missing, or real content sits above it, the browser falls back to an old mode. Your styling can then misbehave later in ways that are hard to trace. You will not notice today. You will in Act II. So build the habit now: line one, every time.
<html> wraps the whole document, so the browser knows where it starts and ends. Everything except the doctype nests inside it.
<head> holds information about the page. <title> sits inside the head and sets the tab text. <body> holds everything a visitor sees, which is where your heading and paragraphs go.
Two settings ride along in the frame that you do not need to understand yet. One is lang="en" on the <html> tag. The other is <meta charset="UTF-8" /> inside the head. Keep them exactly as written. They make a downloaded page behave correctly everywhere. Both are covered properly once attributes are taught, when you learn what settings like these are.
The indentation in the example is optional. The browser ignores it, but it keeps the structure readable, so keep the habit.
One more habit worth building now. When a page misbehaves, ask which zone the problem lives in. Wrong tab text is a head problem. Wrong content on screen is a body problem.
A minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Amara Okafor</title>
</head>
<body>
<h1>Amara Okafor</h1>
<p>I am learning to build things for the web.</p>
<p>This page grows as I learn.</p>
</body>
</html>This is a complete, valid web page. Saved as a file, it opens in any browser on any machine, with the name in the tab. From this lesson on, your profile page keeps this shape. Everything you add for the rest of the track goes inside the body.
Common mistakes
Visible content in the head. You put an <h1> or <p> inside <head>, expecting it to show. The browser knows visible elements cannot live there, so it quietly moves them. Your content appears at the very top of the page, above where you meant it. When an element renders in the wrong place entirely, check which zone you typed it in.
Content above the doctype. A stray character, or the frame typed in the wrong order, leaves something real before <!DOCTYPE html>. That tips the browser into the old mode. A blank line above it is harmless, but keeping the doctype on line one avoids the question. Nothing visibly breaks today. It surfaces lessons later, as styling that refuses to behave. Line one means line one.
A placeholder title. Editors and templates love to pre-fill <title>Document</title>. Thousands of real pages ship that way. Check a few browser tabs and you will find one. The page works, which is why nobody notices. But "Document" is what a bookmark saves, and what search results show. Your title should say what the page is.
Try it yourself
The editor holds your page as you left it last lesson: content only, no frame. Build the frame around it.
- Run it first. Confirm the tab strip reads Untitled.
- Add
<!DOCTYPE html>on the very first line. - Wrap everything else in
<html lang="en">and</html>. - Inside
<html>, add a<head>at the top. Put<meta charset="UTF-8" />and a<title>with your name inside it. - Wrap your visible content, the heading and paragraphs, in
<body>and</body>. - Run it. Your name is in the tab.
- Break it on purpose: move one
<p>into the<head>, run it, and watch it jump to the top of the page. The browser refused to hide it and moved it instead. Put it back where it belongs.
One more thing, and you have earned it. Press DOWNLOAD. That saves your page as a real file on your machine. Double-click it and it opens in your browser, full window, your name in a real tab. Two lessons in, you have made an actual web page. Right now it holds one heading and a couple of paragraphs. The next lesson gives it named sections, so a visitor can take in its shape at a glance.