What Is HTML?
1. Introduction
HTML — HyperText Markup Language — is the standard language used to create and structure content on the web. Every webpage you visit is built on a foundation of HTML. In this lesson you will discover what HTML actually is, where it came from, and why it is the first skill every web developer must master.
2. Concept
What Does “HyperText Markup Language” Mean?
HyperText refers to text that contains links to other texts — the hyperlinks that let you jump between pages. Markup means annotating content with tags that describe its meaning. Language means it follows defined rules (syntax) that browsers understand.
How HTML Fits Into the Web Stack
| Technology | Role | Analogy |
|---|---|---|
| HTML | Structure & content | Skeleton of a building |
| CSS | Styling & layout | Paint and interior design |
| JavaScript | Behaviour & interactivity | Electricity and plumbing |
A Brief History of HTML
HTML was invented by Tim Berners-Lee in 1991 as a way to share scientific documents over the internet. Over the decades it evolved through versions 2, 3.2, 4.01, XHTML, and finally HTML5 (2014), which is the living standard maintained today by the WHATWG.
<!DOCTYPE html> at the top of every file. It tells the browser to use modern standards mode.3. Basic Example
<!-- A minimal but complete HTML5 page -->
<!DOCTYPE html> <!-- declares HTML5 -->
<html lang="en"> <!-- root element; lang helps screen readers -->
<head>
<meta charset="UTF-8"> <!-- character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title> <!-- tab title in the browser -->
</head>
<body>
<h1>Hello, World!</h1> <!-- largest heading -->
<p>Welcome to HTML.</p> <!-- a paragraph -->
</body>
</html>
4. How It Works
Step 1 — The DOCTYPE Declaration
<!DOCTYPE html> is not an HTML tag; it is an instruction to the browser. It must appear on the very first line and tells the browser to render the page in HTML5 standards mode.
Step 2 — The Root Element
<html lang="en"> wraps all page content. The lang attribute declares the document language, which assists search engines and screen readers.
Step 3 — The Head Section
The <head> element contains metadata — information about the page that is not displayed directly. The charset meta tag ensures special characters render correctly.
Step 4 — The Body Section
Everything inside <body> is visible in the browser window. Here you place headings, paragraphs, images, links, and all other visible content.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A personal portfolio home page.">
<title>Jane Doe | Web Developer</title>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<p>Front-End Web Developer based in London</p>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am a passionate developer with five years of experience building accessible, performant websites.</p>
</section>
<section>
<h2>Skills</h2>
<p>HTML, CSS, JavaScript, React, Node.js</p>
</section>
</main>
<footer>
<p>© 2025 Jane Doe</p>
</footer>
</body>
</html>
6. Common Mistakes
❌ Missing DOCTYPE
<html>
<head><title>Page</title></head>
<body><p>Hello</p></body>
</html>
✓ Always include DOCTYPE on line 1
<!DOCTYPE html>
<html lang="en">
<head><title>Page</title></head>
<body><p>Hello</p></body>
</html>
❌ Placing visible content inside <head>
<head>
<h1>My Heading</h1>
</head>
✓ Visible content belongs in <body>
<body>
<h1>My Heading</h1>
</body>
7. Try It Yourself
8. Quick Reference
| Element / Term | Purpose | Example |
|---|---|---|
<!DOCTYPE html> |
Declares HTML5 mode | First line of every file |
<html> |
Root element | <html lang="en"> |
<head> |
Metadata container | Contains title, meta, link |
<body> |
Visible content container | Contains all rendered content |
<title> |
Browser tab / SEO title | <title>My Page</title> |
<meta charset> |
Character encoding | <meta charset="UTF-8"> |
lang attribute |
Document language | lang="en" |