1.1 What Is a Webpage, Really?

Predict

When you right-click a webpage and select "View Source," what do you think you will see? What do you think HTML looks like before the browser turns it into a visual page?

The simplest webpage in the world

Here is a complete (tiny) webpage:

<h1>Welcome to my site</h1>
<p>This is a paragraph of text.</p>

That is it. If you saved those two lines in a file and opened it in a browser, you would see a large bold heading that says "Welcome to my site" followed by a normal-sized paragraph below it.

Let's break down what is happening.

Tags are labels

The words inside the angle brackets — <h1>, <p> — are called tags. They are labels that tell the browser what kind of content follows:

<h1> means "this is a top-level heading"
<p> means "this is a paragraph"
<h2> means "this is a second-level heading" (like a subheading)

You do not need to memorize a long list of tags. The important ones come up so often that you will recognize them naturally. For now, just remember: a tag is a label that says what the content is.

Opening and closing tags

Most tags come in pairs — an opening tag and a closing tag:

<p>This is a paragraph.</p>

<p> is the opening tag — it says "a paragraph starts here"
</p> is the closing tag — the / means "this paragraph ends here"
Everything between them is the content

Forgetting the closing tag is one of the most common mistakes in HTML. If you see content that looks weirdly merged together or styled wrong, a missing closing tag is often the culprit.

Nesting: tags inside tags

Tags can go inside other tags. This is called nesting:

<div>
  <h1>Article Title</h1>
  <p>First paragraph of the article.</p>
  <p>Second paragraph of the article.</p>
</div>

The <div> (short for "division") is a container that wraps the heading and paragraphs. Think of it like a folder that groups related content.

Nesting has one critical rule: tags must close in the reverse order they opened. Like nesting bowls — the last one you put in is the first one you take out.

This is correct:

<p>This is <strong>bold</strong> text.</p>

This is broken:

<p>This is <strong>bold</p></strong>

The second example closes <p> before closing <strong>, which is like trying to pull out the outer bowl before the inner one. Browsers will try to fix this silently, but the result is often unpredictable.

Try it: View Source

Right-click on any webpage and select "View Page Source" (or press Ctrl+U on Windows / Cmd+Option+U on Mac). What you see is the raw HTML that the browser received. It looks intimidating at first, but now you know the core idea: it is just content wrapped in labels.

Look for tags you recognize — <h1>, <p>, <div>. They are there, surrounded by plenty of other tags you do not know yet. That is fine. You are reading HTML.

Check Your Understanding

On a scale of 1-5, how confident are you that you could look at a block of HTML and identify where one element starts and ends?

Reading HTML

Problem 1 of 3(basic)

What would this HTML look like in a browser?

<h1>Our Products</h1>
<p>We sell handmade candles.</p>
<h2>Best Sellers</h2>

Explain Back

In your own words, explain what HTML tags are and how opening and closing tags work. Use an analogy from your own experience if it helps.

Key Takeaway

HTML is content wrapped in tags. Tags are labels — they tell the browser what each piece of content is. Most tags come in opening/closing pairs, and they must nest properly (close in reverse order). When something looks wrong on a webpage, a missing or misordered closing tag is one of the first things to check.

Connect

Now you know what tags are and how they work. But a real webpage has more structure than just headings and paragraphs — it has a head, a body, navigation, and sections. Next, we will zoom out and look at the full anatomy of an HTML page.