HTML Example
html
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<p>I am learning HTML</p>
</body>
</html>Guided tutorial track
HTML Tutorial
Learn HTML from scratch with step-by-step lessons and practical examples covering HTML5, tags, attributes, forms, tables, media, and semantic HTML.
Tutorial overview
Start here, then move through the chapters
This tutorial is designed to be followed in order. Read the chapter, practice with the editor, test your understanding, and move toward completion.
Lessons
162
Sections
9
Access
Free
Level
beginner
Ready to begin?
Start with lesson one and follow the tutorial step by step.
This tutorial teaches HTML from the first tag to a finished page you can put online. Every chapter has a live editor, so you can change the code and watch the result immediately - no setup, no account, nothing to install.
A tag describes its content
html
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="/about/">This is a link</a>
<img src="cat.jpg" alt="A cat asleep on a keyboard">What is HTML?
HTML is the language that describes what is on a web page.
It is not a programming language. There are no variables, no conditions, no loops. You write tags, and the tags tell the browser what each piece of content is - this is a heading, this is a paragraph, this is an image, this is a link.
Look at the code beside this. You can read it without knowing anything about HTML, and that is deliberate. That is the whole idea. Everything else in HTML is detail.
Your first page
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>I am learning HTML.</p>
</body>
</html>Your first HTML file
You do not need to install anything. A text editor and a browser are enough - both are already on your computer.
Open Notepad on Windows, or TextEdit on a Mac, and type the code shown here.
Save it as index.html - not index.txt. In Notepad, set Save as type to All Files first, or Windows will add .txt without telling you. On a Mac, use Format → Make Plain Text before saving.
Now double-click the file. It opens in your browser, and you are looking at a web page you wrote.
What each part of that file does
<!DOCTYPE html>– tells the browser this is modern HTML. Without it, browsers fall back to an old compatibility mode and some things behave oddly.<html lang="en">– wraps the whole document. The lang attribute tells screen readers and search engines what language the page is in.<head>– information about the page. None of it appears on screen.<meta charset="UTF-8">– lets the page display any character correctly. Leave it out and accented letters and symbols turn into nonsense.<title>– the text in the browser tab, and the blue link in Google results.<body>– everything a visitor actually sees.
Those six lines are in almost every page on the internet. You will type them so many times that you stop noticing them.
What HTML does — and what it does not
Beginners lose a lot of time on this one, so it is worth being blunt about it.
- HTML decides what the content is. A heading, a list, a table, a form.
- CSS decides what it looks like. Colour, spacing, fonts, layout.
- JavaScript decides what it does. Reacting to a click, loading data, validating a form.
So if your page looks plain, that is not an HTML problem - HTML is doing its job. Styling comes next, in the CSS tutorial.
One more thing HTML does not do: it cannot store data, send email, or log a user in. Anything that needs to remember something happens on a server, not in HTML.
What you need before you start
- A browser. Chrome, Firefox, Edge or Safari - any of them.
- A text editor. Notepad works. When you get tired of it, VS Code is free and is what most developers use.
- Nothing else. No server, no framework, no build tool. Those come much later, and not in this tutorial.
If you would rather not leave this site at all, use the Try It Editor on any chapter. It runs the code in the page and shows the result beside it.
How long this takes
Honestly: the basics take an afternoon. Headings, paragraphs, links, images and lists are simple, and you will be writing them from memory within a few hours.
Forms, tables and semantic layout take longer - not because the syntax is hard, but because knowing which element to reach for is a judgement you build up over time. Accessibility is the same. That part is worth slowing down for.
The chapters below are grouped so you can see how much is left at each stage, with a rough time on every part.
Common questions
No. HTML5 is just the current version of HTML, and it is what this tutorial teaches. When you read "HTML" here, that is what it means.
HTML. CSS styles HTML, so there is nothing to style until you can write the structure. A day or two of HTML is enough before you start CSS alongside it.
Every website, every web app, every email template and every page a framework generates ends up as HTML in the browser. React, Vue and the rest produce it for you - and you cannot debug what they produce if you do not know what it should look like.
Some do, and that is the trap. <center>, <font> and <marquee> still render in most browsers, but they are obsolete and should not go into anything new. Where this tutorial documents an obsolete tag, it says so and shows the modern replacement.
The learning path
Work through these in order. Each part builds on the one before it, and every part lists what it covers and roughly how long it takes.
HTML Basics
9 lessons54 min
Introduction to HTML · HTML Editors · HTML Structure …
Start this partHTML Text and Links
4 lessons24 min
HTML Text Formatting · HTML Quotations & Citations · HTML Links …
Start this partHTML Lists and Tables
3 lessons18 min
HTML Lists · HTML Tables · Table Styling & Borders
Start this partHTML Images and Media
5 lessons30 min
HTML Images · HTML Picture Element · HTML Audio …
Start this partHTML Forms
6 lessons36 min
HTML Forms Overview · HTML Form Elements · HTML Input Types …
Start this partHTML Layout
4 lessons24 min
HTML Block vs Inline Elements · HTML Div & Span · HTML Semantic Layout Tags …
Start this partAdvanced HTML
5 lessons30 min
HTML Entities & Symbols · HTML Emojis · HTML Head Element Tags …
Start this partReference
Not part of the sequence. Look these up when you need them.
What You Will Learn
HTML Basics
HTML Text and Links
HTML Lists and Tables
HTML Images and Media
HTML Forms
HTML Layout
Advanced HTML
HTML References
HTML Tags
Practice Live
Read the lesson, edit code in the Try-It editor, and see the result instantly.
Tutorial Features
Code examples inside chapters
Each topic is supported with practical examples so the tutorial stays easy to follow.
Practice with the Try It Editor
Open the browser editor and test what you just learned without leaving the site.
Quiz for self-check
Use the assessment flow to test whether the chapters are really understood.
Certificate after completion
Complete the learning flow and move toward a verifiable completion certificate.
How to Use This Tutorial
Learn the chapter
Follow the lessons in order so each new concept builds on the previous one.
Practice the example
Open the Try It Editor and apply the idea immediately while it is fresh.
Test your understanding
Use the quiz and progress flow to confirm the topic is really understood.
Finish with proof
Complete the tutorial journey and move toward a verifiable certificate.
Complete the tutorial with confidence
Finish the lessons, take the assessment, and move toward a certificate that can be verified on the site. The structure is meant to help you learn, practice, and complete the topic properly.
Certificate verification
Publicly verifiable after successful completion.
Why Learn HTML
Easy to Learn
HTML is explained with beginner friendly chapters and examples.
Essential Skill
Understand the core building blocks before moving into advanced topics.
Build Real Websites
Use each lesson as a practical step toward real web development.