HTML Tags and Elements Explained for Kids

Every web page you have ever visited is built from the same simple ingredient: HTML. If you want your child to understand how pages work, the best place to begin is with tags. The first web page walkthrough is in HTML for kids: first web page. This article goes a little deeper into the vocabulary.

Tags are labels

HTML works by putting labels around content so the browser knows what each part is. Those labels are called tags, and they are written in angle brackets.

<h1>My Favourite Animals</h1>
<p>I love otters because they hold hands when they sleep.</p>

The first line says "this is a big heading." The second says "this is a paragraph." Without tags, the browser would see only plain text and have no idea how to arrange it.

Opening, closing and elements

Most tags come in pairs:

• An opening tag: <p>
• The content in the middle
• A closing tag, which has a slash: </p>

The whole package, from the opening tag to the closing tag, is called an element. A good way to explain it: tags are the lunchbox lid and base, and the element is the lunchbox with the sandwich inside.

A few tags have no closing partner because they have nothing inside, like the line break <br> and the image tag <img>.

Attributes: extra instructions

Sometimes a tag needs more information. We add it with an attribute, written inside the opening tag.

<a href="https://example.com">Visit this site</a>
<img src="otter.jpg" alt="An otter floating on its back">

• href tells a link where to go.
• src tells an image where to find the picture file.
• alt describes the image in words, which helps people using screen readers and shows if the image fails to load.

Nesting: boxes inside boxes

Elements can live inside other elements, like nesting dolls. This is called nesting.

<ul>
  <li>Otters</li>
  <li>Penguins</li>
  <li>Pandas</li>
</ul>

The <ul> is an unordered (bullet) list, and each <li> is a list item inside it. The rule that trips up beginners: close the inner tag before the outer one. Think of taking off your shoes before your socks, in reverse order of putting them on.

The skeleton of a page

Every complete page has the same basic structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

The head holds information about the page (such as the tab title), and the body holds everything you can see.

Activities to try

1. Make a page about a hobby with a heading, two paragraphs and a list.
2. Add a link to a favourite website.
3. Add an image with proper alt text.
4. Open the page in a browser, then change one word and refresh to see the change.

Once the structure is solid, the next step is making it look good with CSS. A parent and child can also build something together; see build a personal web page with your child. The HTML course gives step-by-step practice with instant results.