Generation STEM
Learning LibraryWebsite Development LibraryKids

HTML basics: the building blocks of a web page

Every web page is built from tags. A tag like <h1> makes a big heading, and <p> makes a paragraph. Stack a few together and you've made a page!

The big idea

HTML tags label the parts of a page — headings, paragraphs, and more — so the browser knows how to show them.

See it in code

1Start simple

Every tag comes in a pair: an opening <h1> and a closing </h1>, with your words in between. <h1> makes a big heading, and <p> makes a paragraph. Here's the start of a page about a robot:

html
<h1>My Robot</h1>
<p>This is Beep. He is a friendly helper robot.</p>
Two tags, and the browser makes a real page:

The <h1> came out big and bold, the <p> as normal text. The browser knows what each tag means.

2A step further

Want to show a few things in a row? <ul> makes a bullet list, and each <li> is one item on it. Let's list what Beep can do:

html
<h1>My Robot</h1>
<p>This is Beep. He is a friendly helper robot.</p>

<ul>
  <li>Solves puzzles</li>
  <li>Tells jokes</li>
  <li>Waters the plants</li>
</ul>
A heading, a paragraph, and a bullet list:

Each <li> became its own bullet. A list keeps lots of items neat, instead of squishing them into one long sentence.

3In our world

Now a fuller page. <h2> is a smaller heading — perfect for starting a new part. Here Beep gets his own little 'Favorite Things' section:

html
<h1>My Robot</h1>
<p>This is Beep. He is a friendly helper robot.</p>

<h2>Beep's Favorite Things</h2>
<p>Beep loves solving puzzles and telling jokes.</p>
Here's the real page those tags make — it renders right here:

Stack tags together — headings, paragraphs, lists — and you've built a whole page. The browser shows each one the right way, and changing the words changes the page.

The same idea, everywhere

Every website you visit is made of tags like these. Headings, paragraphs, buttons, images, links — each is a tag telling the browser what that piece is. Learn the tags, and you can build any page.

Try it yourself

Add another <p> with a fun fact about Beep. Then add a picture with <img src="robot.jpg"> — the src tells the browser which picture to show.

The common mistake

Forgetting the closing tag. Most tags need a partner: <p> opens and </p> closes. Leave off the </p> and the browser gets confused about where your paragraph ends.

What it unlocks

Once you can structure a page, you can color and space it with CSS, and add extra info to tags with attributes.

Older, or want more depth? Read the Teens version →

Related concepts