The Structure of a Web Page

Every page starts with the same four pieces

7 min read

Every HTML page, no matter how simple or how huge, starts with the same basic skeleton. Once you know this skeleton you can start any page from scratch, including the personal page you are going to build in this course.

The doctype

The very first line of an HTML file is called the doctype. It looks like this:

<!DOCTYPE html>

This line is not really a tag - it does not have a closing tag, and it does nothing visible on the page. It simply tells the browser "this is a modern HTML page", so the browser knows how to read everything that follows. You will type this exact line at the top of every page you ever build.

The html tag

Right after the doctype comes the <html> tag. This tag wraps around absolutely everything else in your page. Think of it as the outer box that holds your whole website.

The head

Inside <html>, the first section is the <head>. The head holds information about the page that is not shown directly on the page itself - things like the page title that appears in the browser tab. You will not put visible text inside the head.

The body

After the head comes the <body>. This is the important part: everything inside the body is what actually shows up on the page. Every heading, paragraph, image, and link you add in this course goes inside the body.

Put together, the full skeleton looks like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

That is it. That is the shape of every web page on the internet. From here on, whenever we talk about "adding" something to your page, we mean adding it inside the body.

Notice how the closing tags appear in reverse order: body closes before html closes. This is normal - think of it like nesting boxes inside boxes. The last box opened is the first one closed.

Nesting, in plain words

"Nesting" just means putting one element inside another. The body is nested inside the html tag. Soon you will nest paragraphs inside the body, and later you will nest list items inside a list. As long as tags close in the right order, the browser can follow along.

In the next lesson you will start filling that empty body with real content: headings and paragraphs, the two elements you will use more than any other.

Quick check

Q1 Where does all the visible content of a page go?

Q2 What does the doctype line do?

Want to save your progress? It's free.

Create a free account