The Skeleton of
Human Knowledge
HyperText Markup Language is not a programming language; it is the universal scaffolding for the web. It defines the meaning and structure of web content.
Every button you click, every video you watch, and every word you read on the internet exists within an HTML element.
History & Evolution
In 1989, Tim Berners-Lee, a physicist at CERN, proposed a system based on "hypertext" to allow researchers to share documents. This proposal became the World Wide Web.
The Markup Concept: The word "Markup" comes from the traditional practice of "marking up" a manuscript -putting instructions for the printer in the margins. HTML does this for the browser.
HTML has evolved from a simple set of 18 tags to the powerful HTML5 standard we use today, which supports native video, complex graphics (Canvas/SVG), and offline capabilities.
1991
HTML 1.0 released (18 tags).
1999
HTML 4.01: The golden standard.
2014
HTML5: The Modern Web Era.
The Anatomy of a Document
An HTML document is like an envelope. The outside (the
<html> tag) contains everything. The <head> is the
metadata (like the stamp and return address), and the <body> is the actual
letter inside.
<!-- The Document Type Declaration -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Tag Reference with Live Previews
Every tag below shows its code on the left and how the browser renders it on the right.
Headings
<h1>Heading 1</h1>
Heading 1
<h2>Heading 2</h2>
Heading 2
<h3>Heading 3</h3>
Heading 3
<h4>Heading 4</h4>
Heading 4
Text & Inline
<p>Paragraph text</p>
Paragraph text
<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted</mark>
<del>Deleted text</del>
<ins>Inserted text</ins>
<small>Fine print</small>
<code>inline code</code>
inline code
<blockquote>A quote</blockquote>
A quote
<abbr title="HyperText">HTML</abbr>
Links & Media
<a href="#">A hyperlink</a>
<img src="…" alt="An image">
<hr>
<br> (line break)
Line two
Lists
<ul><li>Item</li></ul>
- Apple
- Banana
<ol><li>Item</li></ol>
- First
- Second
<dl><dt>…</dt><dd>…</dd></dl>
- HTML
- Markup language
Form Elements
<input type="text">
<input type="checkbox">
<input type="range">
<select><option>…</option></select>
<button>Click me</button>
<textarea></textarea>
Table
<table> <tr> <th> <td>
| Name | Role |
|---|---|
| Tim | Inventor |
Void / Self-Closing Tags
These tags don't need a closing tag — they cannot have children.
<img>Image
<br>Line Break
<hr>Horizontal
Rule
<input>Input
Field
<meta>Metadata
<link>External
Resource
Giving Meaning to Content
A Semantic tag tells the browser and search engines exactly what its content is. Hover over each region below to explore.
<header>
Introductory content or navigation links.
<nav>
Section containing navigation menus.
<main>
Dominant unique content of the document.
<article>
Independent, self-contained content.
<section>
A thematic grouping with its own heading.
<aside>
Sidebar content tangentially related to main.
<footer>
Footer for its nearest sectioning content.
<figure>
Figure with optional figcaption.
Why Semantics Matter?
1. Accessibility
Screen readers use these tags to navigate the page for visually impaired users.
2. SEO
Search engines understand the importance of different sections, helping with ranking.
Forms in Depth
Forms are the primary way users send data to a server. They wrap inputs,
labels, and a submit button inside a
<form> element.
Form Anatomy
<form action="/submit"
method="POST">
<!-- Label + Input pair -->
<label for="email">Email</label>
<input type="email"
id="email"
name="email"
required>
<button type="submit">Send</button>
</form><form>
action — URL where
data is sent.
method — GET (data in URL) or POST (data
in body).
<label>
Links to an input via the for attribute matching the input's id. Clicking the label focuses the input.
<input>
name is the key sent to the server. id connects to the label. required blocks submit if empty.
<button type="submit">
Triggers form submission. You can also
use <input type="submit">.
All Input Types — Live
type="text"
type="password"
type="email"
type="number"
type="range"
type="date"
type="color"
type="checkbox"
type="radio"
type="file"
<select>
<textarea>
Key Input Attributes
| Attribute | What it does | Example |
|---|---|---|
name |
Key sent to the server |
name="username"
|
placeholder |
Ghost text when empty |
placeholder="Search…"
|
required |
Blocks submit if empty | required
|
disabled |
Greyed out, not submitted | disabled
|
min / max |
Range for number / date |
min="1" max="100"
|
maxlength |
Character limit |
maxlength="140"
|
autocomplete |
Browser autofill hint |
autocomplete="email"
|
Fieldset & Legend
Use
<fieldset> to group related inputs and
<legend> to give the group a title.
<fieldset>
<legend>Preferred Contact</legend>
<label><input type="radio"> Email</label>
</fieldset>Live Sample Form
Live HTML Previewer
Key Definitions
HTML
HyperText Markup Language. The standard language for describing the structure of web pages.
Element
A complete HTML unit: an opening tag, its content, and
a closing tag. E.g. <p>Hello</p>.
Tag
The markup syntax that defines an element, enclosed in
angle brackets, e.g. <div>.
Attribute
Extra information placed inside an opening tag. E.g.
href, class, id, src.
Void Element
An element with no content and no closing tag.
Examples: <br>, <img>, <input>.
Semantic HTML
Using elements that carry meaning about the content
inside, like <article>, <nav>, and <footer>.
DOM
Document Object Model. The browser's live, tree-like representation of a parsed HTML document.
DOCTYPE
A declaration at the top of an HTML file (<!DOCTYPE html>) that tells the browser which
version of HTML to use.
Metadata
Data about the document that is not displayed to users.
Lives in <head> via tags like <meta> and <title>.
Hyperlink
A reference to another resource, created with <a href="...">. The core of the "Hyper" in
HyperText.
Form
An HTML structure that collects user input and submits it to a server via GET or POST.
Viewport
The visible area of a web page in the browser window.
Controlled for mobile via the <meta name="viewport"> tag.