Practice HTML right here — no installs, no signups.
HTML is the structure of every web page. This in-browser HTML editor renders your markup live in a sandboxed preview, so you can see headings, lists, tables, forms and images take shape as you type — and you can include a <style> or <script> block to experiment with CSS and JavaScript in the same file.
Focus on semantic elements: header, nav, main, section, article and footer instead of a pile of divs. Semantic markup is easier to read, better for accessibility, and it is what search engines use to understand a page.
Copy any snippet into the editor above and press Run. Each one is short on purpose — retype it from memory afterwards.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>My Page</title></head>
<body>
<header><h1>My first page</h1></header>
<main>
<section>
<h2>About</h2>
<p>Built with <strong>Play with Coding</strong>.</p>
</section>
</main>
<footer><small>2026</small></footer>
</body>
</html>One h1 per page, then h2 for each section — that hierarchy is what screen readers and crawlers follow.
<form>
<label for="email">Email</label>
<input id="email" type="email" required>
<button type="submit">Sign up</button>
</form>Linking label to input with for/id makes the label clickable and readable by assistive technology.
The preview is blank
Why: A tag was never closed, so the browser swallowed the rest of the document.
Fix: Check that every <div>, <section> and <p> has a matching closing tag.
My CSS has no effect
Why: The style block sits outside <head>/<body> or a selector does not match.
Fix: Put <style> inside <head> and confirm the class name matches exactly, including case.
Images do not load
Why: The src path points nowhere from the sandbox.
Fix: Use a full https:// image URL rather than a local file path.
| Concept | Syntax |
|---|---|
| Heading | <h1>Title</h1> |
| Link | <a href="/games">Games</a> |
| Image | <img src="url" alt="description"> |
| List | <ul><li>Item</li></ul> |
| Table row | <tr><td>Cell</td></tr> |
| Inline style block | <style>h1 { color: teal }</style> |
Yes — add a <script> block and it executes inside the sandboxed preview.
Yes. Your markup renders in an isolated frame, so nothing it does can affect the rest of the site.
Running snippets builds speed; the 17-chapter course builds understanding. Work through the HTML chapters, take the quiz, then claim your certificate.
Other compilers: JavaScript compiler, TypeScript compiler, Python 3 compiler, Java compiler, C compiler, C++ compiler, Go compiler, Rust compiler, CSS compiler, SQLite compiler
After this walkthrough you can hand-write a valid page: document structure, semantic sectioning, links and images with proper alt text, lists and tables, and an accessible form.
Every page needs a doctype, an html element with a lang attribute, a head for metadata and a body for content. The title is what search results and browser tabs show.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>header, nav, main, article, section and footer describe what a region is. Screen readers and search engines use them to navigate, and there is exactly one main per page.
<header><nav><a href="/">Home</a></nav></header>
<main>
<article>
<h1>Learning HTML</h1>
<p>Structure first, styling later.</p>
</article>
</main>
<footer>© 2026</footer>Go h1, h2, h3 in order without skipping levels. Headings are the table of contents of your page — never pick one for its font size.
<h1>Python course</h1>
<h2>Chapter 1 — Variables</h2>
<h3>Naming rules</h3>
<h2>Chapter 2 — Loops</h2>Link text should make sense out of context — "read the Python course", not "click here". Every meaningful image needs alt text describing it; purely decorative images get alt="".
<a href="/languages/python">Read the Python course</a>
<img src="/logo.png" alt="Play with Coding logo" width="120" height="120" />Each input needs a label tied to it by id, a sensible type so mobile keyboards adapt, and required where relevant. Labels are what make a form accessible.
<form>
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<button type="submit">Subscribe</button>
</form>Try each one in the editor above before opening the solution — the struggle is where the learning happens.
Hint: ul with three li children.
<h1>My learning plan</h1>
<p>Three languages this year:</p>
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>C++</li>
</ul>Hint: thead with th cells, tbody with td cells.
<table>
<thead><tr><th>Subject</th><th>Marks</th></tr></thead>
<tbody>
<tr><td>Math</td><td>91</td></tr>
<tr><td>Code</td><td>78</td></tr>
</tbody>
</table>Hint: Wrap related fields in a fieldset with a legend.
<form>
<fieldset>
<legend>Contact us</legend>
<label for="n">Name</label>
<input id="n" name="name" required />
<label for="e">Email</label>
<input id="e" name="email" type="email" required />
<label for="m">Message</label>
<textarea id="m" name="message" rows="4"></textarea>
</fieldset>
<button type="submit">Send</button>
</form>HTML is the structure every website is built on: CSS and JavaScript both act on the elements you write here.
Good HTML is also most of accessibility and technical SEO — correct elements give assistive technology and crawlers the meaning they need for free.
Ready for structured practice? The 17-chapter HTML course takes these ideas one at a time, with a quiz and a certificate at the end.