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

Open the Code Sandbox in a new tab.
On this page, click the Copy to Sandbox button above a code block, or click inside the block to select the code yourself.
If you clicked inside the block, press Ctrl + A (or ⌘ + A on Mac) to select all code.
Press Ctrl + C (or ⌘ + C on Mac) to copy the code.
Go to the sandbox tab, click in the code box, and press Ctrl + V (or ⌘ + V) to paste.
Click the Run Code button in the sandbox to see the result.

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.

Example 1 – 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">
    <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.

Example 2 – Headlines and Paragraphs

This example uses different headline sizes and a paragraph.

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

  <body>
    <h1>Topic: Aquatic Plants</h1>
    <h3>Subtopic: Floating Plants</h3>
    <h6>Subtopic: Tiny Details</h6>

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

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

Example 3 – Lists

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

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

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

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

    <h3>Numbered List (ordered)</h3>
    <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.

Example 4 – Table

This example shows a simple table with flowers and sizes.

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

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

    <table border="1">
      <tr>
        <th>Flower</th>
        <th>Size</th>
      </tr>
      <tr>
        <td>Roses</td>
        <td>Small</td>
      </tr>
      <tr>
        <td>Tulips</td>
        <td>Large</td>
      </tr>
    </table>
  </body>
</html>

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

Example 5 – Image with Caption

This example shows how to display an image with a caption. Make sure the image file is in the same folder as your HTML file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Image with Caption</title>
  </head>

  <body>
    <h1>Aquatic Plant Photo</h1>

    <figure>
      <img src="aquaticplant1.jpg" alt="Aquatic plant 1" width="300">
      <figcaption>Beautiful small aquatic plant</figcaption>
    </figure>
  </body>
</html>

Try this: Change the src to your own image name and update the caption text.

Example 6 – 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.

Example 7 – 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>Section 1</h1>
    <p>This is the first section of the page.</p>

    <hr>

    <h1>Section 2</h1>
    <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.

Example 8 – 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.

Example 9 – 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>

    <h3>Name</h3>
    <p>Anna Example</p>

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

    <h3>About Me</h3>
    <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.

Example 10 – 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.