Introduction
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses elements — building blocks enclosed in angle-bracket tags — to describe the structure and meaning of web content.
HTML is not a programming language. Its role is purely structural and semantic: telling the browser what each piece of content is, not what it should look like (that is CSS's job).
HTML is not a programming language. Its role is purely structural and semantic: telling the browser what each piece of content is, not what it should look like (that is CSS's job).
Document Structure
Anatomy of an HTML Document
Complete HTML document skeletonHTML5
1234567891011121314
<!-- DOCTYPE: tells browser this is HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
Semantic HTML
Semantic HTML5 Elements
Semantic elements tell the browser what a section means. Click any element to learn about it:
Click any tag to reveal its purpose
<!-- Semantic Document Structure -->
<header>
<nav> ... </nav>
</header>
<main>
<article>
<section> ... </section>
</article>
<aside> ... </aside>
</main>
<footer> ... </footer>
<header>
<nav> ... </nav>
</header>
<main>
<article>
<section> ... </section>
</article>
<aside> ... </aside>
</main>
<footer> ... </footer>
Tag Reference
Common HTML Tags
Hover any tag for description and example
Hover a tag above to see its description and example
Playground
Interactive HTML Playground
Edit HTML on the left — the preview updates live on the right.
Live Editor
Forms
HTML Forms
Forms are how users send data to servers. Each
<input> has a type attribute that defines what kind of data it accepts. HTML5 added new input types with built-in validation.
HTML Form ExampleHTML5
123456789
<form action="register.php" method="POST">
<label for="email">Email</label>
<input type="email" id="email" required>
<label for="age">Age</label>
<input type="number" id="age" min="18" max="120">
<label for="dob">Date of Birth</label>
<input type="date" id="dob">
<button type="submit">Register</button>
</form>
Reference Table
HTML5 Input Types
| Type | Example Value | Validation | Notes |
|---|---|---|---|
text | John Smith | None | Plain text, most common |
email | a@b.com | ✓ Email format | Email keyboard on mobile |
password | hidden | None | Masks input visually |
number | 42 | ✓ Numeric | Supports min/max/step |
date | 2025-06-15 | ✓ Date picker | Returns YYYY-MM-DD |
color | #ff6600 | ✓ Color picker | Returns hex value |
range | 0-100 | ✓ Slider | Visual slider control |
file | photo.jpg | None | Supports multiple/accept |
HTML5 Features
What HTML5 Added
Native Media
Built-in video and audio tags. No Flash required. Supports MP4, WebM, OGG.
Canvas and SVG
canvas gives a JS-powered pixel drawing surface. SVG puts vector graphics in the DOM.
Local Storage
localStorage and sessionStorage store key-value data in the browser with no server needed.
Geolocation API
navigator.geolocation.getCurrentPosition() gets the user GPS coordinates with permission.