HTML stands for HyperText Markup Language. It is the language that tells a web browser what each part of a page is: this line is a heading, this block is a paragraph, this is a picture, and that is a link.
Every website you have ever visited is built on HTML. Shops, news sites, YouTube and Google's search results all arrive in your browser as an HTML document first. Styling and interactivity are added on top, but the content itself always starts here.
In this lesson you will see what HTML actually looks like, how the browser reads it, and where it fits next to CSS and JavaScript. By the end you will have written a small web page and watched it appear on the screen.
HTML labels the content of a page
Imagine you have a plain text note:
My Pizza Recipe
You need dough, tomato sauce and cheese.A person can guess that the first line is a title. A browser can't guess anything. It needs to be told. HTML lets you label each piece of content:
<h1>My Pizza Recipe</h1>
<p>You need dough, tomato sauce and cheese.</p><h1>means "this is the main heading".<p>means "this is a paragraph".
These labels are called tags. A start tag, the content inside it and an end tag together make an element. A web page is simply a collection of elements, some of them placed inside others.
How a browser reads an HTML file
- You write HTML in a plain text file whose name ends in
.html. - The browser (Chrome, Firefox, Safari or Edge) opens the file and reads it from top to bottom.
- It builds the page from your tags: large bold text for headings, underlined text for links, and so on.
The tags themselves are never shown. Only the content between them appears on screen. If the browser finds a tag it doesn't know, it doesn't crash. It quietly skips the tag and shows the text inside it. That forgiving behaviour is useful, but it also means small mistakes can go unnoticed, so it pays to write tidy code from the start.
What "HyperText" and "Markup" mean
- HyperText is text that contains links to other text. Clicking a link and jumping to another page is the "hyper" part. Links are what turn millions of separate documents into one connected web.
- Markup means adding labels around content to describe it. You "mark up" your text much like a teacher marks up an essay with notes in the margin.
HTML, CSS and JavaScript: who does what
Web pages are made with three languages, and each one has a single job:
| Language | Job | Example |
|---|---|---|
| HTML | Structure and meaning | "This is a heading" |
| CSS | Appearance | "Make headings dark blue and centred" |
| JavaScript | Behaviour | "When the button is clicked, show a message" |
Keeping these jobs separate makes a site easier to change. You can restyle every page by editing one CSS file without touching the HTML, and a page still makes sense to search engines and screen readers even when the CSS fails to load.
HTML is not a programming language. It has no loops, maths or decisions. It describes content, which is why it is the easiest of the three to start with.
HTML5: the version you are learning
HTML has changed over the years. The current standard is usually called HTML5, and it is maintained as a "living standard" that browsers update continuously. You don't need to install or pick a version. Every modern browser understands the HTML in this course, and the <!DOCTYPE html> line at the top of a page tells the browser to use today's rules.
HTML Syntax
The shape of an HTML element
<tagname>Content goes here</tagname>The start tag opens the element, the end tag (with a /) closes it. Everything in between is the content.
HTML Summary
- HTML stands for HyperText Markup Language and describes the structure of a web page.
- Content is wrapped in tags such as
<h1>and<p>. A start tag, content and end tag form an element. - Browsers read HTML from top to bottom and display the content, never the tags.
- HTML handles structure, CSS handles appearance and JavaScript handles behaviour.
- You only need a text editor and a browser to write and view HTML.
HTML Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Your very first web page
Press Run to see it. Then change the words inside the tags and run it again.
<h1>Hello, I'm learning HTML!</h1>
<p>This is my first web page.</p>
<p>Tomorrow I will add a picture and a link.</p>Line-by-line explanation
- Line 1
<h1>creates the biggest, most important heading on the page. - Line 2
<p>creates a paragraph. Browsers add a little space above and below it automatically. - Line 3A second paragraph. You can have as many as you like.
A tiny page about your pet
HTML elements can sit inside other elements. Here a link sits inside a paragraph.
<h1>Biscuit the Dog</h1>
<p>Biscuit is a <strong>very good</strong> boy who loves tennis balls.</p>
<h2>Favourite things</h2>
<ul>
<li>Long walks</li>
<li>Belly rubs</li>
<li>Stealing socks</li>
</ul>
<p>Learn more about dogs on <a href="https://en.wikipedia.org/wiki/Dog">Wikipedia</a>.</p>Line-by-line explanation
- Line 1The main heading, which works as the title of the page.
- Line 2
<strong>makes "very good" bold and tells the browser it's important. - Line 3
<h2>is a smaller, second-level heading for a section. - Lines 4 to 8
<ul>starts a bullet list and each<li>is one list item. - Line 9
<a>makes a link. Thehrefsays where it goes.
Common HTML Mistakes
Forgetting the closing tag
<h1>Welcome to my site
<p>Thanks for visiting.</p><h1>Welcome to my site</h1>
<p>Thanks for visiting.</p>Without </h1>, the browser has to guess where the heading ends. Sometimes it guesses right, sometimes the whole page turns into a giant heading. Always close what you open.
Typing tags in a word processor
Writing HTML in Microsoft Word or Google Docs
and saving it as a .docx fileWriting HTML in a code editor (VS Code, or the
editor on this page) and saving it as page.htmlWord processors add hidden formatting and "smart quotes" that break HTML. Use a plain code editor instead. The HTML editors lesson shows you how to set one up.
HTML in Real Projects
Every site you use is HTML underneath
Right-click on any web page and choose View page source. You'll see the HTML that page is made of. Google search results, YouTube video pages and online shops are all HTML underneath. The skills in this course are exactly what professional developers use every day; they just combine more of them.
HTML Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Complete the code so the page shows a heading and a paragraph.
<>Cookie Club</h1>
<p>We meet every Friday to bake.</><h1> to match </h1>, and the paragraph closes with </p> to match <p>.What does HTML stand for?
This page should show a heading followed by a paragraph, but the whole page looks like a giant heading. Find the bug and fix it.
<h1>Space Facts
<p>A day on Venus is longer than a year on Venus.</p>- There is an
<h1>heading - The heading only contains "Space Facts"
- The paragraph is not inside the heading
<h1> was never closed, so the browser put everything after it inside the heading. Adding </h1> fixes it.HTML Quiz
4 questions to check what you learned.
Which of these is the correct way to write a paragraph?
<p>Hello<p><paragraph>Hello</paragraph></p>Hello<p><p>Hello</p>
HTML is a programming language.
- True
- False
Which file extension do HTML files usually use?
- .html
- .ht
- .txt
- .web
What does the browser show from
<h1>Welcome</h1>?<h1>Welcome</h1>exactly as written- Nothing, because tags hide content
- The word "Welcome" as a large heading
- An error message
HTML Challenge
Make a mini "About me" page
Build a tiny page about yourself (or a made-up character).
- Add one
<h1>with a name. - Add at least two paragraphs.
- Make one word bold with
<strong>.
A heading with a name, two short paragraphs, and one bold word.
<!-- Write your page below -->
- Page has exactly one
<h1> - The
<h1>is not empty - There are at least two paragraphs
- A
<strong>element is used inside a paragraph
<h1>Your Name</h1>, then write <p>…</p> twice.