HTML Examples to Try in the Sandbox

On this page you will find simple HTML examples you can open in the PlayCode123 Code Sandbox.

These examples are optional practice alongside the lessons. If you are a complete beginner, start with the numbered learning path, then return here when you want extra examples.

How to use this page

Choose Open in Sandbox beside any example.
The Sandbox opens with the start code already loaded and running. Topic 5 includes a hosted image; topic 6 links to a provided example About Me page.
Edit the code, then choose Run Code to see your changes.

The sandbox also shows explanations and exercises for the specific example you opened. Follow its Practice section after the result preview.

Using the Sandbox on a smartphone

Tap Open in Sandbox beside an example.
The example opens automatically in the Sandbox.
Tap inside the editor to change the code.
Tap Run Code to update the preview.
Tap Reset this example to undo your changes.
Optionally tap Full-screen editor for more editing space.

Reminder: An HTML page usually starts with <!DOCTYPE html> and has <html>, <head>, and <body> tags. The <body> contains what you see on the page in the browser.

My First Web Page

This example shows a very simple web page with a heading and a paragraph.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Web Page</title>
  </head>

  <body>
    <h1>Hello, my name is Anna</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Try this: Change Anna to your own name, and change the text inside the <p>...</p> paragraph.

Heading Structure and Paragraphs

This example uses headings in a logical order. Choose heading levels for structure, not for visual size.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Heading Structure and Paragraphs</title>
  </head>

  <body>
    <h1>Topic: Aquatic Plants</h1>
    <h2>Floating Plants</h2>

    <p>
      The diversity of aquatic plants in nature is beautiful.
      They can grow in ponds, lakes, and rivers.
    </p>

    <h2>Submerged Plants</h2>
    <p>These plants grow mainly below the water surface.</p>
  </body>
</html>

Try this: Change the topic to something you like (for example: “My Favourite Movies” or “My Hobby: Football”).

Lists

This example shows a bullet list (<ul>) and a numbered list (<ol>).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lists</title>
  </head>

  <body>
    <h1>Types of Aquatic Plants</h1>

    <h2>Bullet List (unordered)</h2>
    <ul>
      <li>Floating plants</li>
      <li>Submerged plants</li>
      <li>Emergent plants</li>
    </ul>

    <h2>Numbered List (ordered)</h2>
    <ol>
      <li>Observe the plants</li>
      <li>Identify their type</li>
      <li>Write down your findings</li>
    </ol>
  </body>
</html>

Try this: Replace the plant names with your three favourite movies or games.

Table

This example shows a simple table with flowers and sizes.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table</title>
  </head>

  <body>
    <h1>Flower Sizes</h1>

    <table>
      <caption>Typical flower sizes</caption>
      <thead>
      <tr>
        <th scope="col">Flower</th>
        <th scope="col">Size</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Roses</td>
        <td>Small</td>
      </tr>
      <tr>
        <td>Tulips</td>
        <td>Large</td>
      </tr>
      </tbody>
    </table>
  </body>
</html>

Try this: Change the flower names and sizes to match flowers or objects you like.

Image with Caption

This example loads the provided image from https://playcode123.com/lesson-images/aquaticplant1.jpg. The lesson-images folder stores the lesson image on the website. Using its full HTTPS URL lets the browser find it from the Sandbox and from a downloaded HTML file, regardless of the page’s folder. An internet connection is required. For offline local practice, save the image in a lesson-images folder beside your HTML file and change the source to lesson-images/aquaticplant1.jpg. The Sandbox cannot access that local folder.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Image with Caption</title>
    <style>img { max-width: 100%; height: auto; }</style>
  </head>

  <body>
    <h1>Aquatic Plants</h1>
    <figure>
      <img src="https://playcode123.com/lesson-images/aquaticplant1.jpg" width="275" height="275" alt="Long green leaves and yellow flowers on aquatic plants">
      <figcaption>Aquatic plants with long green leaves and yellow flowers.</figcaption>
    </figure>
  </body>
</html>

Completion task: Check that the provided image loads and fits the preview when the window is narrow. Then try an image you own or have permission to use: use its full HTTPS URL in the Sandbox, and update the alternative text and caption to match it.

Link to Another Page

This example links to a provided About Me page for a fictional learner named Anna. Its full HTTPS URL works in the online Sandbox and in a downloaded HTML file while you are online. The link opens the About Me page inside the Sandbox preview. Choose Run Code to return to your homepage example. For local practice with your own pages, create about.html beside your homepage and change the link to href="about.html". The Sandbox cannot access that local file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Link Example</title>
  </head>

  <body>
    <h1>Welcome to My Website</h1>
    <p>This is the homepage of my simple website.</p>

    <a href="https://playcode123.com/about-me-html-lesson-example/">Go to the About Me page</a>
  </body>
</html>

Try this: Open the provided About Me page, then choose Run Code to show your homepage example again. Then replace the destination with another working HTTPS URL and change the link text to describe that page. For local practice, create your own about.html and test the relative link.

Horizontal Line

This example uses <hr> to mark a thematic break between topics. Browsers usually display it as a horizontal line; use CSS when you only need a decorative border.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Horizontal Line Example</title>
  </head>

  <body>
    <h1>Aquatic Plant Guide</h1>
    <h2>Section 1</h2>
    <p>This is the first section of the page.</p>

    <hr>

    <h2>Section 2</h2>
    <p>This is the second section of the page.</p>
  </body>
</html>

Try this: Add more text above and below the line to separate different topics.

Formatting Text

This example shows how to make text <strong> (bold), <em> (italic), and how to use line breaks with <br>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formatting Text Example</title>
  </head>

  <body>
    <h1>My Favourite Hobby</h1>

    <p>
      My favourite hobby is <strong>photography</strong>.<br>
      I like to take pictures of <em>sunsets</em> and nature.
    </p>

    <p>
      Sometimes I also take photos of my friends and family.
    </p>
  </body>
</html>

Try this: Change the hobby, the bold word, and the italic word. Add one more <br> line break inside the first paragraph.

Simple Contact Card

This example creates a small “contact card” with your name, email, and a short description.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Contact Card</title>
  </head>

  <body>
    <h1>Contact Me</h1>

    <h2>Name</h2>
    <p>Anna Example</p>

    <h2>Email</h2>
    <p>
      <a href="mailto:anna@example.com">anna@example.com</a>
    </p>

    <h2>About Me</h2>
    <p>
      I am learning HTML, CSS and JavaScript on PlayCode123.
    </p>
  </body>
</html>

Try this: Change the name and email to your own. Rewrite the “About Me” text to describe yourself in 2–3 sentences.

Simple Page with Header, Main and Footer

This example uses basic semantic tags: <header>, <main> and <footer>.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Semantic Page</title>
  </head>

  <body>
    <header>
      <h1>My Simple Website</h1>
      <p>Learning HTML step by step</p>
    </header>

    <main>
      <h2>Welcome</h2>
      <p>
        This is the main content of the page.
        Here I write about my favourite topics.
      </p>
    </main>

    <footer>
      <p>Created by Anna in 2025</p>
    </footer>
  </body>
</html>

Try this: Change the website title, the welcome text, and the footer text to your own information. Add one extra sentence inside the <main> section.