HTML Basics: What a Web Page Is Made Of

Across this track you will build one thing: your own profile page. A real page, about you, that works in any browser. Every lesson adds a piece to it. This lesson adds the first piece.

The concept

A web page is a file. Inside the file is text. A browser is the program you are reading this in, whether that is Chrome, Edge, Safari or Firefox. It opens the file, reads it from top to bottom, and draws what it finds onto your screen.

So what happens if the file holds nothing but plain text? Try it. Press Run and look closely at the result:

Two lines went in. One line came out. The browser threw away the line break.

This surprises almost everyone. It is the single most important fact in this lesson: the browser does not trust the spacing in your file. It cannot tell whether a line break means "new paragraph" or "someone pressed Enter for no reason". Plain text carries no meaning it can rely on. Which line is the title? Where does one thought end and the next begin? The file does not say.

HTML exists to say it. HTML stands for HyperText Markup Language. Two definitions, both in plain words:

• Hypertext is text that can link to other text. That idea is what made the web the web.
• Markup means labels wrapped around your content that state what each piece is. This piece is a heading. This piece is a paragraph.

You are not programming the browser. You are labelling your content, and the browser draws each piece according to its label.

Here is the same text with two labels added. Run it:

Now the name is large and bold. The sentence sits on its own line below, with space between them. You never chose a font size or added spacing. You said "this is a heading" and "this is a paragraph", and the browser did the drawing.

The syntax

Those labels have names. Each one is called a tag: a label written between angle brackets, < and >. Most tags come in pairs around your content. The whole unit is called an element: an opening tag, the content, then a closing tag.

<h1>Amara Okafor</h1>

Reading it piece by piece:

• <h1> is the opening tag. It says a heading starts here.
• Amara Okafor is the content. It is the part people see.
• </h1> is the closing tag. The slash says the heading ends here.

The closing tag exists because the browser cannot read your mind. Without a marked end point, it has no way to know whether the heading is one word long or the rest of the page.

That slash trips up almost everyone at first: which slash character, and where it goes. Two anchors to hold onto. It is the forward slash /, the one that leans in the direction you read. And it sits right after the <, before the tag's name: </h1>.

Two more things about tag names. First, they are short codes from a fixed list that every browser knows. h1 means heading level 1. p means paragraph. You cannot invent your own. A tag the browser does not recognise has no effect, and its content shows as plain text. Second, tags themselves never appear on screen. They are instructions to the browser, and the browser consumes them.

A minimal working example

<h1>Amara Okafor</h1>
<p>I am learning to build things for the web.</p>
<p>This page will grow as I learn.</p>

Three elements, stacked in the order they should appear. The browser draws one large bold heading, then two paragraphs, each on its own line with space between them. Every <h1> on every website you have ever visited works exactly like this one.

One honest note. A finished web page wraps content like this in a standard frame: a few extra elements that identify the file and organise it. Your page works without the frame for now. That frame is the whole of the next lesson.

Common mistakes

Every one of these is a mistake real beginners make in their first week. When reading your HTML, the browser never shows an error message for any of them. It quietly draws something wrong instead. Learning to read the symptom is the skill.

Forgetting the closing tag. You write <h1>Amara Okafor and move on. The heading never ends, so the browser pulls everything after it into the heading. Suddenly your whole page is huge and bold. When everything after some point looks wrong, look for a missing closing tag at that point.

A space after the angle bracket. You type < h1> instead of <h1>. The space stops the browser from reading it as a tag at all, so it treats the whole thing as ordinary text. The symptom is unmistakable: you can see your own tags on the page. If brackets are visible on screen, a tag near them is malformed.

Wrong bracket characters. Parentheses (h1) and curly braces belong to other languages you may meet later. HTML tags only ever use angle brackets, < and >. Anything else is drawn as plain text.

The wrong slash. The backslash key sits nearby and looks similar. But a backslash does not close a tag. The browser will not read it as a closing tag, which puts you back in the first mistake: an element that never ends. Closing tags use the forward slash: </p>.

A warning about the browser's silence. When your HTML is broken, the browser guesses what you meant and repairs it without telling you. Sometimes the guess matches your intent. Sometimes it does not, and a page held together by hidden repairs becomes harder to change with every lesson. Fix breakage when you see it, not later.

Try it yourself

Time to place the first piece of your profile page. The editor below starts as plain text, the same trap you saw at the top of the lesson.

1. Press Run before changing anything. Watch the two lines collapse into one.
2. Replace the placeholder text with your own name, and wrap it in an <h1> element.
3. Wrap the sentence in a <p> element, and make it about you.
4. Add a second <p> with one more sentence. Run it. Each paragraph now gets its own line and spacing, because the browser knows what they are.
5. Break it on purpose: delete the closing </h1>, run it, and watch your paragraphs get swallowed into the heading. Put the tag back and watch it heal.

Step 5 matters as much as the others. You will break pages hundreds of times while learning. Everyone does. What you practised there is recognising a break from its symptom, and that skill compounds.

The heading and introduction you wrote are the seed of your profile page. In the next lesson you will wrap them in the frame every finished page carries. From then on, every lesson makes the page more yours.