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