COMM-101 ESSENTIALS OF DIGITAL MEDIA

Challenge 1 of 3 — Reading HTML

← Home

No experience needed

Reading HTML for the first time

Meet the Riverhawk Rockets — your local soccer team. Their website is written in HTML. By the end of this challenge, you'll be able to read it and understand what every line does.

Part 1 — the big idea

What is HTML?

Every webpage you've ever visited is made of HTML — HyperText Markup Language. HTML is not a programming language. It doesn't do math or make decisions. It just describes content: "this is a heading," "this is a paragraph," "this is a list."

The way HTML describes things is with tags. A tag is a word wrapped in angle brackets:

<p>This is a paragraph about the Rockets.</p>

There's an opening tag <p> and a closing tag </p>. The slash means "end here." Everything between them is the content.

Try it yourself: In the code above, identify the opening tag, the closing tag, and the visible text a visitor would read.

What does </p> do?

Part 2 — the skeleton

Every HTML page has the same skeleton

Here is the Riverhawk Rockets' page. Don't panic — you don't need to memorize this. Just look at the shape of it.

<html> <head> <title>Riverhawk Rockets</title> </head> <body> <h1>Riverhawk Rockets</h1> <p>Your hometown soccer team since 1994.</p> </body> </html>

<html>

The outermost wrapper — everything lives here

<head>

Info the browser needs but visitors don't see

<title>

The text shown on the browser tab

<body>

Everything the visitor actually sees

Try it yourself: Point to the part of the skeleton that visitors see, then point to the part that only the browser uses.

Where would you put content you want visitors to read?

Part 3 — the tag toolkit

The tags you'll see most often

Here's the Rockets' page with more content. Look at how different tags create different types of content.

<h1>Riverhawk Rockets</h1> <h2>Upcoming Matches</h2> <p>The Rockets play every Saturday at 2pm.</p> <ul> <li>vs. City FC — June 21</li> <li>vs. North United — June 28</li> </ul> <a href="tickets.html">Buy Tickets</a>

Try it yourself: Match each visible item in the browser preview to the HTML tag that created it.

And here's how that looks in a browser:

Riverhawk Rockets

Upcoming Matches

The Rockets play every Saturday at 2pm.

vs. City FC — June 21
vs. North United — June 28

Buy Tickets

What does <ul> create?

Part 4 — extra instructions

Tags can have attributes

Some tags need extra information called an attribute. Look at the link tag:

<a href="tickets.html">Buy Tickets</a>

<a> = the "anchor" tag — it makes a link
href = the attribute — "hypertext reference"
"tickets.html" = the value — the page it links to
Buy Tickets = the clickable text visitors see

Try it yourself: Read the link from left to right and say out loud: tag, attribute, value, visible link text.

To make the link go to shop.html instead, which part changes?

Part 5 — the finish line

You just read HTML

Here's the full Riverhawk Rockets page. You now know what every single line does.

<html> <head> <title>Riverhawk Rockets</title> </head> <body> <h1>Riverhawk Rockets</h1> <h2>Upcoming Matches</h2> <p>The Rockets play every Saturday at 2pm.</p> <ul> <li>vs. City FC — June 21</li> <li>vs. North United — June 28</li> </ul> <a href="tickets.html">Buy Tickets</a> </body> </html>

Try it yourself: Find the line that controls the browser tab, then find the line that controls the big page heading.

What would you change to make the browser tab say "Go Rockets!" instead of "Riverhawk Rockets"?

Results

What you learned:
Tags use opening <tag> and closing </tag> pairs · Every page has <html>, <head>, and <body> · Common tags: <h1>, <p>, <ul>, <li>, <a> · Attributes like href give tags extra instructions · <title> controls the browser tab, not the page

Next Challenge

Continue with selectors, properties, values, classes, and IDs.

Challenge 2 — Reading CSS →

Next: Challenge 2 — Reading CSS