Introduction to HTML

The language that gives every web page its bones — before style, before interactivity, before anything else.

What Is HTML?

HTML stands for HyperText Markup Language. That sounds like a mouthful, so let's break it down word by word:

HyperText — text that can link to other text. A normal book's page can't take you somewhere else. A web page can. That's the "hyper" part.
Markup — a way of adding labels to content to say what each piece is. You are literally marking up text the same way an editor marks up a paper manuscript with red pen notes.
Language — a set of agreed-upon rules for writing those labels so browsers can understand them.

Put it together: HTML is a language for labelling content on a web page so a browser knows what to do with it.

📌 Important distinction

HTML is not a programming language. You can't add numbers together or make decisions with HTML alone. It is purely a description language — it describes content, not logic. That's completely fine; description is its whole job.

The Three Technologies of the Web

Every website you've ever visited is built on the same three technologies working together. Think of building a house:

Technology	Job	House analogy
HTML	Structure & content	The walls, floors, rooms, and doors
CSS	Visual style	The paint, wallpaper, furniture, and lighting
JavaScript	Behaviour & interactivity	The electricity — lights that switch on, a doorbell that rings

HTML always comes first. You can't paint walls that don't exist. You can't wire electricity through rooms you haven't built. HTML is the foundation everything else sits on.

What Does HTML Actually Look Like?

HTML uses tags. A tag is a keyword wrapped in angle brackets like this: <p>. Most tags come in pairs — an opening tag and a closing tag. The closing tag has a forward slash in it.

<p>This is a paragraph of text.</p>

<p> — the opening tag. This tells the browser "a paragraph starts here".
This is a paragraph of text. — the actual content the visitor sees.
</p> — the closing tag. The slash means "we're done with the paragraph now".

Together, the opening tag + content + closing tag is called an element. The tag is just the label; the element is the whole package.

📦 Analogy: tags are like packaging labels

Imagine a warehouse full of boxes. A worker sticks a label on a box that says "FRAGILE: GLASSWARE" on both the front and back. The label doesn't change what's inside — it tells the handler how to treat it. HTML tags work the same way. <h1> doesn't make text bigger by itself; it tells the browser "this is a top-level heading — treat it accordingly."

A Tiny Complete Example

Here is the smallest HTML page that actually works:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

<!DOCTYPE html> — not a tag, a declaration. It tells the browser "this file follows modern HTML rules".
<html> — the root element. Everything on the page lives inside here.
<head> — invisible metadata (title, links to CSS, etc). Not shown on screen.
<title> — the tab text you see in your browser.
<body> — everything the visitor actually sees goes in here.
<h1> — a top-level heading. The most important heading on the page.
<p> — a paragraph of normal text.

Don't worry about memorising all of this right now. By the time you finish this course, you'll type this structure from memory without thinking about it.

Why HTML Matters So Much

HTML is not just the starting point for web pages — it is the bedrock of almost everything on the internet:

Every web page, from Google's homepage to YouTube, starts with HTML.
Screen readers that blind users rely on read HTML to understand and speak a page aloud.
Search engines like Google read HTML to understand what a page is about and decide how to rank it.
Email clients render HTML to show formatted emails with images and buttons.
Mobile apps often use HTML inside them to display content.

Learning HTML isn't just a stepping stone to "real" programming. It is a genuinely useful skill that immediately lets you build things people can see and use.

What HTML Is Not Responsible For

Just as important as knowing what HTML does is knowing what it doesn't do:

HTML does not make text red or blue. That's CSS.
HTML does not make a button do something when clicked. That's JavaScript.
HTML does not talk to a database or save information. That's a server-side language like Python or Node.js.
HTML does not run calculations or make decisions. That's programming.

HTML just says: "here's a heading, here's a paragraph, here's an image, here's a link." That's it. And that's enough for now.

Common Mistakes Beginners Make

⚠ Watch out for these

Forgetting the closing tag — writing <p>Hello without </p>. Browsers are forgiving about some missing closing tags, but it leads to unpredictable layout bugs.
Confusing tags and elements — the tag is just the label (<p>). The element includes everything: opening tag + content + closing tag.
Thinking HTML controls design — beginners often look for "the HTML to make text bold." HTML can mark text as important with <strong>, but making it visually bold in a specific color and size is CSS's job.

How to Run HTML Right Now

You don't need to install anything to write and view HTML. Here's the simplest possible workflow:

Open any plain text editor — Notepad on Windows, TextEdit on Mac (in plain text mode), or better yet, download VS Code for free.
Type or paste some HTML.
Save the file with a .html extension, for example mypage.html.
Double-click the file. Your browser opens it and renders it instantly.

That's it. No servers, no uploads, no accounts. Just a file and a browser.

💡 Use VS Code

VS Code is a free code editor made by Microsoft. It gives you colour-coded HTML (called syntax highlighting), auto-completion, and a built-in file explorer. It's what most professional developers use and it's perfect for beginners too. Download it at code.visualstudio.com.

Interview Questions

What does HTML stand for, and what does each word mean?

HyperText Markup Language. HyperText means text that links to other text. Markup means labelling content with descriptive tags. Language means a system of rules for writing those labels consistently.

Is HTML a programming language?

No. HTML is a markup language — it describes and structures content but cannot perform logic, calculations, or decisions. Those require a programming language like JavaScript.

What is the difference between an HTML tag and an HTML element?

A tag is just the label itself, like <p> or </p>. An element is the complete unit: opening tag + content + closing tag. So <p>Hello</p> is an element, while <p> alone is a tag.

✏️ Exercise

Create a new file called index.html. Type the tiny example from above by hand (don't copy-paste — typing it builds muscle memory). Change the heading and paragraph text to something about yourself. Open it in your browser. You just built your first web page.

🧠 Quiz

1. What are the three core technologies of the web and what does each one do?

HTML structures content, CSS styles its appearance, and JavaScript adds interactivity and behaviour.

2. What does a closing tag look like, and how is it different from an opening tag?

A closing tag has a forward slash before the keyword: </p> instead of <p>. The slash signals the end of that element.

3. Where does visible content go — inside <head> or <body>?

Inside <body>. The <head> holds invisible metadata like the page title and links to stylesheets.

🚀 Mini Challenge

Add a second heading and two more paragraphs to your index.html file. Use <h2> for the second heading (not <h1> — a page should only have one <h1>). Reload the browser and see the result.

Summary

HTML stands for HyperText Markup Language — a language for labelling web content.
It is not a programming language. It describes structure, not logic.
HTML uses tags (like <p>) to mark up content. Tags + content = an element.
Every web page starts with HTML. CSS and JavaScript are added on top.
You can write and view HTML right now with just a text editor and a browser.