HTML — The Bones of a Page

Lesson 2 · taught by Pip

In the last lesson we saw that a web page is really just a text file. Today we pick up the first language inside that file: the one that builds the frame. It's called HTML, and its only job is structure — what each piece is and where it belongs.

HTML doesn't make a page pretty, and it doesn't make it do clever things. It labels. It says "this is a heading," "this is a paragraph," "this is a link." That's it. The bones, not the skin.

Think of a house being built. Before the paint and the furniture, there's a wooden frame — walls here, a doorway there, a roof on top. You can walk through that frame and understand the whole house already. HTML is that frame.

Tags come in pairs

HTML labels things using tags, and most tags come in matched pairs that hug your content. An opening tag, your words, then a closing tag that looks the same but with a slash.

A paragraph looks like this:

<p>Lighthouses are taller than they look.</p>

The <p> says "a paragraph starts here." The </p> says "the paragraph ends here." Everything between them is one paragraph. Headings work the same way: <h1> is the biggest, most important title, with <h2> and <h3> for smaller subheadings. A link uses <a>, and a picture uses <img>.

The pairs matter. They're like a set of bookends — one on each side holds the content in place and tells the browser exactly where that piece starts and stops. Leave one off and the browser gets confused about where things end.

Why bones alone still work

Here's something surprising. A page with only HTML — no styling, no scripts — still works. Open it and you'll see black text on a white background, plain and a little dull, but completely readable. Headings look big, paragraphs sit apart, links are blue and clickable.

That's because the structure carries the meaning. The browser already knows what a heading is and what a paragraph is, so it can lay them out sensibly without being told how to look.

And this is where good bones earn their keep. When you label a heading as a heading — instead of just making some text look big — you're telling the truth about what that text is. A screen reader, the software that reads pages aloud for people who can't see them, leans on those labels to announce "heading" and let someone jump between sections. Search engines read the same structure to understand your page.

Honest bones make a page usable by everyone, not just people looking at a glowing screen. Sloppy ones quietly shut some people out. 🔦

Your turn

Find any web page you like. Right-click and choose View Page Source (or "Inspect"). It looks busy, but hunt for the angle-bracket tags: spot a <p>, an <h1> or <h2>, and an <a>. Notice how each opening tag has a matching closing tag with a slash. You're reading the bones of a real page.

Next, the page is sound but plain. Time to open the paint can: CSS, and how a page gets its looks.