By the end of this lesson you will be able to
- write headings and paragraphs with opening and closing tags
- explain how the browser treats spaces and line breaks in your HTML
- add comments that the browser ignores
- recognise and fix the four mistakes beginners make most often
Every box on this page holds real HTML that you can change. The page it makes is drawn underneath, and it is redrawn a moment after you stop typing. Show page redraws it straight away; Reset puts back the original code. If the page spots a common mistake in your code, a yellow box under the page lists it.
On a phone: the angle brackets < > and the slash / are on the symbols keyboard (the ?123 key, and sometimes a second page of symbols marked =\<).
On a computer: press Ctrl + Enter (⌘ + Enter on a Mac) to redraw. Inside a box the Tab key adds spaces; to move out of the box with the keyboard, press Esc and then Tab.
Your first element
Here is a complete, tiny web page: one heading. Change the words between the tags to something of your own, and watch the page change.
That one line is an element: a single part of a page. Let us look at it piece by piece.
<h1>opening tag: “a main heading starts here”Hello, world!the content: what the page shows</h1>closing tag: “the heading ends here”- The opening tag
<h1>is the element's name between angle brackets.h1means “heading, level 1”: the main heading of the page. - The closing tag
</h1>is the same, with a slash/before the name. It marks where the element ends. - Everything between the two tags is the element's content. The browser shows the content, styled as a main heading, and never shows the tags themselves.
Tag names are not case-sensitive, so <H1> works too, but everyone writes them in small letters today, and so does this course.
Headings and paragraphs
A page is mostly headings and paragraphs. A paragraph is written with the p element. Below the main heading, smaller headings use h2, then h3, and so on down to h6; you will use them properly in Lesson 2.1.
The browser draws the elements in the order you wrote them, from top to bottom. Each heading and each paragraph starts on a new line, with a little space above and below it. That space comes from the browser's own default styles; with CSS you will be able to change it.
Spaces and line breaks are squeezed
Here is a surprise for most beginners. Look closely at this code and at the page it makes:
The browser treats any run of spaces and line breaks in your text as a single space. The line breaks in your code do not appear on the page, and neither do the extra spaces. This is useful: it means you can lay out your code neatly, over as many lines as you like, without changing the page. To make separate paragraphs, you use separate p elements, never empty lines. (Lesson 2.2 shows how to force a line break inside a paragraph when you really need one, such as in an address.)
Comments
Text between <!-- and --> is a comment: a note for people reading the code. The browser ignores it completely, so it never appears on the page.
Comments are handy for leaving yourself reminders, and for temporarily hiding a part of a page without deleting it.
Four common mistakes and how to fix them
HTML is forgiving: the browser almost never refuses to show a page. Instead, it quietly guesses what you meant, and its guess is often not what you wanted. That is why this course checks your code for you. Each box below contains a mistake. Look at the page, read the yellow box underneath, and then fix the code.
1. A missing closing tag
Without </h1>, the browser does not know where the heading ends, so the paragraph is swallowed into it and appears in large bold type as well. Add </h1> at the end of the first line.
2. A forgotten slash
This looks closed, but the second tag has no slash, so it is a second opening tag: the browser starts a second heading, and the paragraph ends up inside it, drawn in large bold type. Change the second <h1> to </h1>.
3. A misspelt tag
There is no element called heading, so the browser does not know what it means and shows the words as ordinary text, with no heading style. HTML has a fixed list of element names, and a heading is h1 to h6. Change both tags to h1.
4. A missing angle bracket
The closing tag </h1 has lost its >. The browser then reads on, looking for the end of that tag, and swallows the next tag, <p>, as if it were part of it. The words are still shown, but they are no longer a paragraph, so they lose a paragraph's spacing and style. Add the missing >.
Exercises
Now it is your turn. Each exercise shows the expected page. Type your HTML in the box and press Check my answer: the page is checked for the elements and text the task asks for. The words must match exactly, including capital letters and punctuation. If you get stuck, Show solution becomes available after your first check. Try on your own first, because that is how the learning happens.
Exercise 1 · A main heading
Write a page whose only content is a main heading (h1) with the words My First Page.
Exercise 2 · Two paragraphs
The heading is written for you. Under it, add two paragraphs: the first says We teach English and Mathematics. and the second says Classes start in June.
Exercise 3 · Headings at two levels
Write a page with a main heading Simla Walking Club, then a paragraph Walks every Sunday., then a second-level heading (h2) How to join, then a paragraph Write to the secretary.
Exercise 4 · A comment
Write a page with a main heading Alleppey Boat Races and a paragraph Held every August. Between the two, add a comment (it can say anything you like). Remember that a comment does not appear on the page.
Exercise 5 · Find and fix the mistakes
This page should show a main heading Poona Music Society followed by two paragraphs, Concerts every month. and New members are welcome. The code has three mistakes. Fix them all. The yellow box under the page will help you find them.
Quick check
Four questions to confirm the main ideas. Choose an answer to see the explanation.
1. Which is a correct closing tag for a paragraph?
A closing tag has a forward slash straight after the <. <p> without a slash would open a new paragraph, and a backslash is not part of HTML at all.
2. You type a paragraph over three lines in your code, with several spaces between some words. How does the browser show it?
The browser squeezes any run of spaces and line breaks into one space. Line breaks in your code never become line breaks on the page; to start a new paragraph, use a new p element.
3. What does the browser do with <!-- Check the prices -->?
Everything between <!-- and --> is a comment, which the browser ignores. It is there only for people reading the code.
4. You forget to write </h1> after a heading. What usually happens?
Browsers almost never refuse to show a page. They guess where the element ends, and the guess is often wrong: here the following paragraph becomes part of the heading. That is why the course checks your code for unclosed tags.
Summary
- An element is written as an opening tag, the content, and a closing tag:
<p>Hello</p>. The closing tag has a slash. h1is the main heading,h2toh6are smaller headings, andpis a paragraph.- The browser draws elements in the order you write them, and never shows the tags.
- Runs of spaces and line breaks in your code become a single space on the page.
<!-- … -->is a comment, which the browser ignores.- Browsers guess when your HTML has a mistake, so check that every tag is spelt correctly and closed.
Found a mistake on this page, or something unclear? Report a problem and mention “HTML Lesson 1.2”.