How do you build a web page using HTML?

1. Building blocks

HTML uses tags to describe content

An HTML page is made of elements. Each element starts with an opening tag and ends with a closing tag. For example:

<h1>This is a heading</h1>
<p>This is a paragraph with some text.</p>
<a href="https://playcode123.com">This is a link</a>

The browser reads these tags and knows which text is a heading, which is a paragraph and which part is a clickable link.

Many HTML tags come in pairs, like <h1>...</h1> and <p>...</p>. The first tag opens the element, the second tag closes it.

2. Basic structure

Every HTML page has a simple skeleton

A complete HTML page always has a <head> and a <body>. The head contains information about the page (like the title), the body contains everything you see on the screen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first web page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>My nature page</h1>
    </header>
    <main>
      <section>
        <h2>Aquatic plants</h2>
        <p>These plants live in or near water.</p>
      </section>
    </main>
  </body>
</html>

You can copy this code into the Playcode123 Sandbox and change the text to see what happens.

Use one clear <h1> for the main topic, followed by <h2> headings for sections. Do not skip heading levels just to obtain a different visual size; use CSS for appearance.

3. Accessible content

Images, tables and links need meaning

Put an image and its caption inside <figure> and add useful alternative text. Use tables only for data, with a caption and properly identified header cells.

<figure>
  <img src="pond-plant.jpg"
       alt="Green aquatic plant floating on a pond">
  <figcaption>A floating plant near the pond edge.</figcaption>
</figure>

<table>
  <caption>Typical flower sizes</caption>
  <tr>
    <th scope="col">Flower</th>
    <th scope="col">Size</th>
  </tr>
  <tr><td>Rose</td><td>Small</td></tr>
</table>

Write descriptive link text instead of “click here.” For an embedded video, give the iframe a descriptive title, use loading="lazy", and add a caption when useful.

4. Practice

What can you try yourself?

Add a second section with an <h2> heading.
Add a figure with useful image alternative text and a caption.
Add a descriptive link and test the page at 200% browser zoom.

Use the Sandbox to experiment: you cannot break anything, you just learn by playing with the code.

5. What to do next?

Continue your HTML learning path

After you understand the basic structure, continue with these steps:

Try more HTML examples: go to the HTML codes page and copy the exercises code into the Sandbox.
Add some style: read about CSS in the “How can CSS style a web page?” explanation.
Practise with assignments: open the HTML, CSS and JavaScript exercises (PDF) and build your own small pages.

Take it step by step. First structure with HTML, then add colors and layout with CSS, and later make your pages interactive with JavaScript.