HTML Playground📄 Document → HTML Document StructureHTML Document Structure
Every HTML page has the same basic skeleton. The <!DOCTYPE html> declaration tells the browser this is an HTML5 document. The <html> tag wraps everything. Inside it, <head> holds invisible metadata and <body> holds the visible content.
The <head> contains things like the page title (shown in the browser tab), character encoding, viewport settings, and links to CSS files.
Explore the document skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Page content goes here.</p>
</body>
</html>Related Tools
UI Snippets LibraryCopy-paste HTML, CSS & JS components
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live preview
React PlaygroundLearn React with a live code editor
HTML → JSX ConverterConvert HTML to ReactHTML Playground — Learn HTML Visually, No Typing Required
A free interactive HTML tutorial with 42 click-based lessons across 13 chapters — from your first tag to forms, semantic HTML, responsive images, native components, performance hints, and SEO metadata.
What's included
Features
About this tool
Learn HTML Online Without Memorising Syntax — 42 Lessons, Live Preview
Most people struggle to learn HTML because they stare at code without seeing what it actually does. You read that <h1> makes a heading, but you do not feel the difference between <h1> and <h3> until you see both on screen. You read that forms use <input type="email">, but you do not understand the validation behaviour until you try submitting one. This HTML Playground fixes that by making every concept visual and immediate: click a button, see the result render in the preview, read the exact lines of HTML that produced it.
No typing is required to start. No install, no account, no terminal. Open the page and 42 lessons are ready — click-based demos that teach you what HTML does by showing you, not telling you.
Document Structure and Basics — what every HTML file starts with
The first chapter walks through the HTML boilerplate that every webpage is built on: <!DOCTYPE html>, <html lang>, <head>, <meta charset>, <meta name="viewport">, <title>, and <body>. A Meta Tags lesson shows which <meta> elements browsers and search engines actually read. The Basics chapter answers the foundational questions — what is HTML, how do tags and elements work, what are id and class attributes for, and how do attributes pass information to elements.
Text — headings, paragraphs, formatting, links, quotes, and more
Six text lessons covering the elements you will type in every HTML document. Headings demonstrates all six levels (<h1> through <h6>) so you can see the visual and semantic hierarchy — and understand why page structure matters for SEO and screen readers. Paragraphs & Line Breaks shows the difference between <p> and <br> in practice. Text Formatting lets you toggle <strong>, <em>, <mark>, <del>, and <ins> individually and in combination. Links covers href, target="_blank", relative paths, anchor links within the same page, and the download attribute. Quotes & Code demonstrates <blockquote>, <q>, <cite>, <code>, <kbd>, and <pre> — elements that give meaning to quoted text and code samples. Superscript & Subscript shows <sup> and <sub> with footnote and chemical formula examples.
Lists, Structure, and Semantic HTML — how pages are organised
Lists covers unordered (<ul>) and ordered (<ol>) lists, list item nesting, and the different type attribute values for numbered lists. The Structure chapter is where the mental model of how HTML organises a page becomes concrete: Block vs Inline shows why a <div> takes up the full width while a <span> sits inline with text. Div & Span demonstrates their roles as unsemantic wrappers. Semantic HTML is one of the most important lessons in the curriculum — it shows <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> side by side with equivalent <div> soup, making the meaning difference impossible to miss. Search engines and screen readers both rely on these tags, so understanding them is essential for anyone building real web pages.
Media — images, video, iFrames, and audio
Four media lessons. Images covers <img> with src, alt, width, height, and loading attributes — and why the alt attribute is not optional when the image carries meaning. Video demonstrates the <video> element with multiple source formats, controls, autoplay, muted, and loop. iFrame Embeds shows embedding a YouTube video, a map, and a web page with sandbox and allow attributes. Audio covers the <audio> element with controls and multiple source fallbacks.
Forms — six lessons covering every form pattern
Forms are the most complex chapter and get six lessons. Input Types covers all common <input> types: text, email, password, number, tel, checkbox, radio, date, range, and colour — each rendered live so you can see the browser's native UI for each type. Form Structure builds complete layouts including a contact form, login form, and search bar. Select & Textarea covers <select> with option groups and <textarea> with rows and cols. Fieldset & Legend shows how to group related inputs with an accessible label. Form Validation demonstrates HTML5 built-in attributes — required, minlength, maxlength, min, max, step, and pattern — that validate user input in the browser without any JavaScript. Button Types covers the three <button> type values: submit, reset, and button — and why mixing them up breaks forms.
Tables — structure and spanning
Two table lessons. Table Structure builds a data table from scratch: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> — with scope for accessibility. Spanning Cells demonstrates colspan and rowspan with a visual calendar-style example so you can see exactly which cells merge and how the HTML describes that.
Advanced, Responsive Images, Native Components — modern HTML
Three advanced chapters covering features that rarely appear in beginner tutorials but are used constantly in real-world HTML. The Advanced chapter covers <details> and <summary> for native accordions, data-* attributes for embedding custom data in elements, and <abbr> with title for accessible tooltips. Responsive Images teaches <picture> with multiple <source> elements for art direction and srcset with sizes for resolution switching — the correct way to serve different images at different screen sizes. The Lazy Loading lesson shows loading="lazy" on images and iFrames. Native Components covers the HTML <dialog> element with showModal() and close(), inline SVG shapes and icons embedded directly in HTML, and ARIA role attributes and landmark roles for screen reader navigation.
Performance & Loading — resource hints, script strategies, priority hints
Three lessons that explain how HTML controls browser loading behaviour. Resource Hints covers <link rel="dns-prefetch">, rel="preconnect", rel="preload", and rel="prefetch" — each shown with a concrete use case. Script Loading Strategies demonstrates the difference between a render-blocking <script>, defer, and async — with a visual timeline showing when each strategy executes relative to HTML parsing. Priority Hints covers the fetchpriority attribute on images, scripts, and link elements — the mechanism behind Core Web Vitals LCP optimisation.
SEO Essentials — Open Graph and structured data
Two lessons on the HTML that affects how your pages appear in search results and social media. Open Graph & Social Meta covers the og:title, og:description, og:image, and og:url meta tags used by Facebook, LinkedIn, and Slack, plus the Twitter/X twitter:card meta tags. Structured Data — JSON-LD demonstrates embedding a <script type="application/ld+json"> schema in a page and explains how Google uses it to generate rich results.
Progress is saved to localStorage automatically. Quick Check questions appear on key lessons for active recall. A sandbox mode on selected lessons lets you write any HTML and see it render live. All code runs fully in your browser — no data is uploaded.
Step by step
How to Use
- 1Open the playground — no install requiredNavigate to the HTML Playground. No Node.js, no npm, no editor install. The first lesson is already loaded in the preview. Start from Document Structure if you are new to HTML, or click any lesson in the sidebar to jump directly to a topic.
- 2Read the short concept explanationEvery lesson starts with a plain-English explanation — what the HTML element does, when to use it, and why it matters. Written without jargon and without assumed knowledge. Read it once, then move to the interactive demo.
- 3Click the picker options and watch the preview updateThe Interactive Demo section shows clickable option buttons. Click one to load that HTML into the preview instantly. Use the ← → arrow keys to cycle through options without clicking. Callout notes (💡) on individual options explain specific details or browser behaviour for that variant.
- 4Study the split preview and code panelThe left pane shows exactly what the browser renders. The right pane shows the HTML with syntax highlighting — tags in orange, attributes in blue, values in green. When you switch options, changed lines flash briefly so your eye goes straight to what moved. Drag the divider to resize the panes. Click Copy to copy the current HTML to your clipboard.
- 5Answer the Quick Check challengeOn key lessons a 🎯 Quick Check appears after you interact with the demo. Click the answer you think is correct — green means right, red means wrong with the correct answer shown. These challenges use active recall to move knowledge from short-term to long-term memory.
- 6Use sandbox mode to experiment freelySandbox lessons provide a free-form text area where you can write any HTML and see it render live. Combine tags you have just learned, try something new, or paste in code from another source to see what it produces. Sandbox mode is the bridge from guided lessons to writing HTML yourself.
- 7Work through the advanced chapters at your own paceResponsive Images, Native Components, Performance & Loading, and SEO Essentials are standalone chapters you can visit in any order. Each teaches a specific area of modern HTML that beginners often miss — picture/srcset, dialog, ARIA roles, resource hints, and JSON-LD structured data.
- 8Track chapter completions and your overall progressThe sidebar progress bar and lesson counter update as you finish lessons. Completing the last lesson in any chapter triggers a confetti celebration. Your progress and current position are saved automatically — close the tab and return later to pick up exactly where you left off.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
None whatsoever. The playground is designed for people who have never written HTML before. You start by clicking buttons and watching things appear in the preview pane — no typing required for most lessons. The concept explanations avoid jargon and assume no prior knowledge.
Reading a tutorial tells you what HTML does. This playground shows you. When you click a button and see a form appear in the preview, then look at the five lines of HTML that produced it, your brain makes a direct connection between code and outcome. The changed-line flash and Quick Check challenges add active recall on top of the visual feedback, which doubles retention compared to passive reading.
13 chapters: Document Structure (boilerplate, meta tags), Basics (tags, id/class, attributes), Text (headings, paragraphs, formatting, links, quotes, superscript/subscript), Lists (unordered, ordered), Structure (block vs inline, div/span, semantic HTML), Media (images, video, iFrames, audio), Forms (input types, form structure, select/textarea, fieldset/legend, validation, button types), Tables (structure, spanning cells), Advanced (details/summary, data-* attributes, abbreviations/tooltips), Responsive Images (picture/srcset, lazy loading), Native Components (dialog, inline SVG, ARIA roles), Performance & Loading (resource hints, script strategies, priority hints), and SEO Essentials (Open Graph meta, JSON-LD structured data).
Yes. Completed lessons and your current position are saved to your browser's localStorage. When you return you will be placed on the exact lesson you were viewing, with all completed lessons still marked done. No account or login is required. Clearing your browser's local storage or using a different browser will reset progress.
Yes. Several lessons include a sandbox mode — a free-form text area where you can write any HTML and watch it render live. This is available alongside the guided picker lessons, so you can experiment beyond the curated examples without leaving the tool.
Semantic HTML means using tags that describe the meaning of their content — header, nav, main, article, section, aside, footer — instead of generic divs. Search engines use these tags to understand page structure, which helps SEO. Screen readers use them to help visually impaired users navigate. The Structure chapter has a live lesson where you can see how semantic tags differ from div soup.
Yes — forms get six lessons. Input Types shows all common input types. Form Structure builds complete form layouts. Select & Textarea covers dropdowns and multi-line inputs. Fieldset & Legend groups related inputs accessibly. Form Validation demonstrates HTML5 built-in attributes — required, minlength, min, max, step, and pattern — that validate user input without JavaScript. Button Types covers submit, reset, and button roles.
Resource hints are HTML link elements that tell the browser how to prioritise loading: dns-prefetch resolves a domain early, preconnect opens a connection in advance, preload fetches a critical resource immediately. They live in HTML — not CSS or JavaScript — so they are part of learning modern HTML. The Performance & Loading chapter shows all three with concrete use cases and explains how they affect loading waterfalls.
Quick Check challenges appear after the interactive demo on selected lessons. They present a multiple-choice question about the concept you just explored. Click the answer — green means right, red shows the correct answer if you were wrong. They use active recall, one of the most effective techniques for moving knowledge into long-term memory.
Yes. The layout is fully responsive — on smaller screens the sidebar collapses and the full width is used for the lesson content and preview. The playground is perfectly usable on mobile, though a larger screen is more comfortable for the split preview layout.