Lesson 1
Tags and elements
What HTML is, and how tags wrap content.
What is HTML?
Every web page you’ve ever visited is made of HTML. It stands for HyperText Markup Language, but the important word is markup: you mark up text to say what each part is.
This is a heading. This is a paragraph. This is a link. The browser reads your HTML and draws the page.
HTML isn’t a programming language like JavaScript: it doesn’t do maths or make decisions. It describes what’s on the page. (CSS makes it look nice, and JavaScript makes it do things.)
Tags come in pairs
A tag is a word inside angle brackets: <p>. Most tags come in pairs:
- the opening tag
<p>says “a paragraph starts here”
- the closing tag
</p>(with a slash) says “it ends here”
The opening tag, the content and the closing tag together make an element. Try changing the words in the page below.
<h1>Hello, world!</h1>
<p>This is my very first web page.</p>Lesson 2
Headings and paragraphs
Six sizes of heading, paragraphs, and why the Enter key does nothing.
Six sizes of heading
Headings go from <h1> (the biggest, the main title of the page) down to <h6> (the smallest).
Use them like the headings in a book: one <h1> for the page title, <h2> for each section, <h3> for parts of a section. Search engines and screen readers use them to understand your page.
<h1>Cooking with Curly</h1>
<h2>Breakfast</h2>
<h3>Pancakes</h3>
<p>Mix, pour, flip, eat.</p>The browser ignores your Enter key
Here’s a surprise: browsers squash extra spaces and line breaks into a single space. Pressing Enter in your HTML doesn’t start a new line on the page.
To start a new paragraph, close the old <p> and open a new one. For a line break inside a paragraph (like in a poem or an address), use <br>. It has no closing tag, because it has nothing inside it.
<p>Roses are red,
violets are blue.</p>
<p>Roses are red,<br>violets are blue.</p>Lesson 3
The page skeleton
DOCTYPE, html, head, body and the title in the browser tab.
Every page has a skeleton
A complete HTML file has the same four parts every time:
<!DOCTYPE html>on the very first line tells the browser “this is modern HTML”
<html>wraps everything
<head>holds information about the page, which you don’t see on it: its title, its language settings
<body>holds everything you do see
The <title> inside the head is the text on the browser tab, and the name Google shows in search results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first page</title>
</head>
<body>
<h1>Hello!</h1>
<p>Everything you see goes in the body.</p>
</body>
</html>Tip: In the exercises here, you only write what goes inside <body>. The game adds the rest for you.
Nesting and indenting
Elements go inside other elements, like boxes in boxes: the <title> is inside the <head>, which is inside the <html>. This is called nesting.
Close them in the opposite order you opened them: <p><strong>Hi</strong></p>, not <p><strong>Hi</p></strong>.
Indenting the inner elements with a couple of spaces doesn’t change the page, but it makes the nesting easy to see.
Recap
What Level 1 covers, in a few lines.
- HTML describes what’s on a web page: headings, paragraphs, pictures, links. The browser reads it and draws the page.
- A tag is a word in angle brackets, like
<p>. Most come in pairs: an opening tag<p>and a closing tag</p>, with content in between. Together they make an element. <h1>to<h6>are headings, from the biggest to the smallest.<p>is a paragraph.- Every page has a skeleton:
<!DOCTYPE html>, then<html>holding a<head>(information about the page, like its<title>) and a<body>(everything you see). - Browsers ignore extra spaces and line breaks in your HTML. Use tags, not the Enter key, to make new paragraphs.
Now try it in HTML School
Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.