HTML Codes to Copy and Paste

On this page you will find simple HTML examples you can copy and paste into the PlayCode123 Code Sandbox.

This page is part of your learning path. If you are a complete beginner, first read the explanations on the homepage and then come back here.

How to use this page

Choose Open in Sandbox beside any example.
The Sandbox opens with the complete example already loaded and running.
Edit the code, then choose Run Code to see your changes.

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 shows a responsive image with useful alternative text and a caption.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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="aquaticplant1.jpg" alt="Green aquatic plants growing beneath the water">
      <figcaption>Aquatic plants provide shelter for pond life.</figcaption>
    </figure>
  </body>
</html>

Completion task: Change the caption so it describes what you notice in the image.

Link to Another Page

This example shows a simple link to another HTML page.

<!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="about.html">Go to the About Me page</a>
  </body>
</html>

Try this: Change about.html to another page name, and change the link text.

Horizontal Line

This example shows a simple horizontal line using <hr>.

<!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.