HTML Sandbox

Posted on , updated on 

Each code block on this page is editable. Feel free to modify the examples to try out different things.


<h1>Page Title</h1>
<h2>First Section</h2>
<h3>Sub Section 1</h3>
<h3>Sub Section 2</h3>
<h2>Second Section</h2>
<h3>Sub Section 3</h3>
<h4>Sub Sub</h4>
<h5>Sub Sub Sub</h5>
<h6>Sub Sub Sub Sub</h6>


<a href=""
   title="The search engine that doesn't track you."
   <img src="DDG_Dax-01.svg"
        alt="DuckDuckGo Logo"


List types:

    Ordered Lists
      <li>Learn HTML</li>
      <li>Learn CSS</li>
      <li>Learn JavaScript</li>
    Unordered Lists
    Definition Lists
      <dt>HTML</dt><dd>HyperText Markup Language</dd>
      <dt>CSS</dt><dd>Cascading Style Sheets</dd>

Character Entities

Character entity references:

  <tr><th>Entity Code</th><th>Entity</th></tr>


<table cellspacing="5em" cellpadding="10em" summary="This summary will appear to screen readers. No representation visually.">
  <caption>The caption appears above the table</caption>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <td colspan="3">The footer must come before the body!</td>
      <td>This row</td>
      <td rowspan="2">three columns</td>
      <td colspan="2">Spanning columns!</td>


<form action="/submit-data-endpoint">
  <input type="text" placeholder="">
  <input type="password" placeholder="password" required>
  <button type="submit">Submit</button>

radio buttons

<label><input type="radio" name="this-is-the-key" checked> North</label>
<label><input type="radio" name="this-is-the-key"> South</label>
<label><input type="radio" name="whoa-different-key"> East</label>
<label><input type="radio" name="this-is-the-key"> West</label>


<label><input type="checkbox" name="personality"> Nice</label>
<label><input type="checkbox" name="personality"> Kind</label>
<label><input type="checkbox" name="personality"> Cheerful</label>
<label><input type="checkbox" name="personality"> Grouchy</label>
<label><input type="checkbox" name="terms" checked> Yes! Spam my inbox mercilessly with marketing materials!</label>


<meter min="0" max="100" value="72">72 out of 100</meter>


<progress max="0" value="50"></progress>


Use the pubdate attribute to indicate the publication date of an article. There can be many <time> elements on a page, but the pubdate attribute should be used on only one element on a given page.

<time datetime="2017-03-01T10:03:21-7:00" pubdate>March 1st, 2017</time>


<div style="width:200px; border: solid black 1px;">
author image
Josh Egan