Home / Programming / HTML basics
Programming · Web
HTML in 10 Minutes
Every website is built on HTML. In four short lessons you'll write a real web page, and see it update live as you type.
~10 min4 lessonsLive editor5-question quiz
01
Tags: labels around content
HTML marks up text with tags so the browser knows what each part is. Most tags come in pairs: an opening tag and a closing tag with a slash.
<p>This is a paragraph.</p>Some tags have attributes: extra settings inside the opening tag, written as name="value".
<a href="https://example.com">A link</a>Close what you open. Tags nest like boxes inside boxes: <p><b>bold</b></p> is right; <p><b>bold</p></b> is not.
02
Headings, paragraphs and emphasis
| Tag | What it's for |
|---|---|
<h1> … <h6> | Headings, from most to least important. Use one h1 per page. |
<p> | A paragraph |
<strong> | Important text (shown bold) |
<em> | Emphasis (shown in italics) |
<br> | A line break. It has no closing tag. |
Headings are for structure, not size. Search engines and screen readers use them to understand your page. Change sizes with CSS instead.
03
Links, images and lists
<a href="https://shortutorial.com">Visit Shortutorial</a>
<img src="cat.jpg" alt="A grey cat asleep on a sofa">
<ul>
<li>Bullet point</li>
<li>Another one</li>
</ul>- href is where the link goes; src is the image file.
- alt describes the image for people who can't see it. Always include it.
- Use
<ol>instead of<ul>for a numbered list.
04
A complete page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first page</title> <!-- shown on the browser tab -->
</head>
<body>
<h1>Hello!</h1> <!-- everything visible goes here -->
</body>
</html>Save this as index.html, double-click it, and it opens in your browser. That's a real web page.
Try it · live editor
Your page