Terms, versions, flashcards, a live sandbox, a quiz, and badges — everything you need to go from zero to confident in HTML.
Every essential HTML term explained in plain English — with clickable code examples and category filters.
HTML 1.0 through HTML5 — the complete evolution with code examples showing how each version changed the web.
Boilerplate, text, links, images, tables, forms, and semantic layout — step by step with copyable code.
Flip-to-reveal cards covering all key terms. Mark what you know, shuffle the deck, track your progress.
Write real HTML and see it rendered instantly. Experiment freely — nothing breaks, everything teaches.
Complete lessons, ace the quiz, master flashcards — unlock real achievement badges as you progress.
Terms, versions, and how to actually write HTML — all in one interactive guide with a live code sandbox.
30+ essential terms every beginner must know. Click any card to see a code example.
From 1991 to today. Click each version to see what changed.
HTML was invented by Tim Berners-Lee in 1991 to share scientific documents over the internet. What started as 18 simple tags has grown into a powerful language with hundreds of elements, semantic structure, built-in multimedia, and accessibility support. Here's how it evolved:
The world's first hypertext markup language
<h1>My Research Paper</h1>
<p>Abstract goes here.</p>
<a href="paper2.html">Next Paper</a>The first official standard — users could finally type and submit data
<form action="/submit">
<input type="text" name="username">
<input type="submit">
</form>
<img src="photo.gif" alt="A photo">Browsers added their own tags — chaos, creativity, and the Browser Wars
<!-- Old way — mixing style into HTML (not good!) -->
<font color="red" size="5">Big Red Text</font>
<table border="1">
<!-- Tables used for entire page layout -->
</table>HTML for structure, CSS for style — the modern way begins
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">Content</div>
</body>
</html>The version we use today — semantic, multimedia-native, and mobile-first
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>My HTML5 Page</title>
</head>
<body>
<header><nav>...</nav></header>
<main><article>...</article></main>
<footer>...</footer>
</body>
</html>6 lessons from zero to a complete webpage. Click each lesson to expand it.
Every HTML file starts with the same skeleton. This is the minimum code needed for a valid webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<!-- Your visible content goes here -->
<h1>Hello, World!</h1>
</body>
</html>! and press Tab to auto-generate this entire boilerplate in one keystroke.Structure your content with headings, paragraphs, bold, italic, and lists.
<!-- Headings — h1 is biggest, h6 is smallest -->
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<p>This is a paragraph of text.</p>
<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>Connect pages with hyperlinks and embed images with alt text.
<a href="https://github.com">Visit GitHub</a>
<a href="https://github.com" target="_blank">Open in new tab</a>
<a href="about.html">About Us</a>
<a href="#contact">Jump to Contact</a>
<img src="photo.jpg" alt="A mountain landscape" width="500">
<a href="https://github.com">
<img src="logo.png" alt="GitHub Logo">
</a>Organise data in rows and columns using HTML tables.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>21</td>
<td>Architecture</td>
</tr>
<tr>
<td>John</td>
<td>20</td>
<td>Computer Science</td>
</tr>
</tbody>
</table>Build contact forms, sign-up pages, and input fields users can fill in.
<form action="/submit" method="POST">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Jane Doe">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<label for="course">Your Course</label>
<select id="course">
<option value="arch">Architecture</option>
<option value="cs">Computer Science</option>
</select>
<label for="msg">Message</label>
<textarea id="msg" rows="4" placeholder="Type here..."></textarea>
<input type="checkbox" id="agree">
<label for="agree">I agree to the terms</label>
<button type="submit">Send Message</button>
</form>Structure a complete webpage using semantic HTML5 elements the right way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>Jane Nyandika</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Architecture student and web developer.</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<article>
<h3>Git Guide</h3>
<p>Interactive Git learning platform.</p>
</article>
</section>
</main>
<footer>
<p>© 2025 Jane Nyandika</p>
</footer>
</body>
</html>You now know HTML terms, its history, and how to build real webpages. Try the sandbox next!
Write HTML on the left — see it rendered live on the right. Experiment freely!
8 questions — test everything you've learned. Good luck!
20 cards — tap to flip. Mark what you know to track your mastery.
Complete activities to earn badges. Your progress is tracked automatically.
Badges are automatically awarded as you progress through the guide. Complete lessons, flip flashcards, ace the quiz, and explore every section to unlock them all.