Bookmark this page

HTML Playground

Quick reference for HTML with practice options

Code Runner

You can practice by running HTML code in a pop-up code runner.

Table of content

Basics
Forms
Advanced HTML

Basics

Hello World

Introduction to basic HTML structure.

<!DOCTYPE html>
<html>
<head>
  <title>Hello World Example</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a classic HTML "Hello World" example.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Hello World Example</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a classic HTML "Hello World" example.</p>
</body>
</html>

Lists & Links

Using bullet or numbered lists and hyperlinks in HTML.

<!DOCTYPE html>
<html>
<head>
  <title>Lists & Links</title>
</head>
<body>
  <h1>Lists and Links</h1>
  <ul>
    <li><a href="https://example.com">Example Link</a></li>
    <li><a href="https://google.com">Google Link</a></li>
  </ul>
  <ol>
    <li>First item</li>
    <li>Second item</li>
  </ol>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Lists & Links</title>
</head>
<body>
  <h1>Lists and Links</h1>
  <ul>
    <li><a href="https://example.com">Example Link</a></li>
    <li><a href="https://google.com">Google Link</a></li>
  </ul>
  <ol>
    <li>First item</li>
    <li>Second item</li>
  </ol>
</body>
</html>

Forms

Simple Form

A basic form with text inputs and required fields.

<!DOCTYPE html>
<html>
<head>
  <title>Simple Form</title>
</head>
<body>
  <h1>Simple Form Demo</h1>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required />

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" placeholder="Enter your age" required />

    <button type="submit">Submit</button>
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Simple Form</title>
</head>
<body>
  <h1>Simple Form Demo</h1>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required />

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" placeholder="Enter your age" required />

    <button type="submit">Submit</button>
  </form>
</body>
</html>

HTML5 Validation

Using built-in validation attributes like type="email", minlength, etc.

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Validation</title>
</head>
<body>
  <h1>Form with Basic Validation</h1>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />

    <label for="password">Password (min 8 chars):</label>
    <input type="password" id="password" name="password" minlength="8" required />

    <button type="submit">Register</button>
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Validation</title>
</head>
<body>
  <h1>Form with Basic Validation</h1>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />

    <label for="password">Password (min 8 chars):</label>
    <input type="password" id="password" name="password" minlength="8" required />

    <button type="submit">Register</button>
  </form>
</body>
</html>

Advanced HTML

Tables

Using tables to display tabular data in HTML.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tables</title>
</head>
<body>
  <h1>Product Table</h1>
  <table border="1">
    <tr><th>Product</th><th>Price</th><th>Quantity</th></tr>
    <tr><td>Apple</td><td>$2</td><td>10</td></tr>
    <tr><td>Banana</td><td>$1</td><td>8</td></tr>
    <tr><td>Orange</td><td>$3</td><td>5</td></tr>
  </table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tables</title>
</head>
<body>
  <h1>Product Table</h1>
  <table border="1">
    <tr><th>Product</th><th>Price</th><th>Quantity</th></tr>
    <tr><td>Apple</td><td>$2</td><td>10</td></tr>
    <tr><td>Banana</td><td>$1</td><td>8</td></tr>
    <tr><td>Orange</td><td>$3</td><td>5</td></tr>
  </table>
</body>
</html>

Embedding Media

How to embed videos and audio with <video> and <audio> tags.

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Media</title>
</head>
<body>
  <h1>Video & Audio Examples</h1>
  <video controls width="320" height="240">
    <source src="sample-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <br><br>

  <audio controls>
    <source src="sample-audio.mp3" type="audio/mp3">
    Your browser does not support the audio element.
  </audio>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Media</title>
</head>
<body>
  <h1>Video & Audio Examples</h1>
  <video controls width="320" height="240">
    <source src="sample-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <br><br>

  <audio controls>
    <source src="sample-audio.mp3" type="audio/mp3">
    Your browser does not support the audio element.
  </audio>
</body>
</html>

Semantic Elements

HTML5 semantic tags like <header>, <main>, <section>, <article>, and <footer>.

<!DOCTYPE html>
<html>
<head>
  <title>Semantic HTML</title>
</head>
<body>
  <header>
    <h1>My Website Header</h1>
  </header>

  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is an article describing semantic HTML elements.</p>
    </article>
    <section>
      <h3>Section Title</h3>
      <p>Sections group related content or themes.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 MySite. All rights reserved.</p>
  </footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Semantic HTML</title>
</head>
<body>
  <header>
    <h1>My Website Header</h1>
  </header>

  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is an article describing semantic HTML elements.</p>
    </article>
    <section>
      <h3>Section Title</h3>
      <p>Sections group related content or themes.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 MySite. All rights reserved.</p>
  </footer>
</body>
</html>

Meta Tags

Specifying metadata like charset, viewport, description, etc.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Meta Tags</title>
  <meta charset="UTF-8">
  <meta name="description" content="Example of meta tags in HTML.">
  <meta name="keywords" content="HTML, meta, example">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Testing Meta Tags</h1>
  <p>Check out the document <strong>head</strong> to see meta tags in action.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>HTML Meta Tags</title>
  <meta charset="UTF-8">
  <meta name="description" content="Example of meta tags in HTML.">
  <meta name="keywords" content="HTML, meta, example">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Testing Meta Tags</h1>
  <p>Check out the document <strong>head</strong> to see meta tags in action.</p>
</body>
</html>