Skip to main content
← HTML and CSS

Lesson 1 of 7

Your First Page

Make a web page from nothing. One key press writes the skeleton. You write the words.

What you will learn

  • ! then Tab
  • <!DOCTYPE html>
  • <head> and <body>
  • <title>
  • <h1> and <h2>
  • <p>
  • Opening and closing tags

Before you start

Nothing at all. This is the first lesson of the first course. You do not need to have seen code before.

What this page does

  1. It shows a heading, a smaller heading, and three paragraphs.
  2. That is all. There is no colour, no layout, and no picture.
  3. Everything you see is the browser's own styling. Nobody chose those sizes. The browser draws the heading big because you wrote <h1>. The tag <h1> means heading.

One key press writes the skeleton

Every HTML page starts with the same nine lines. Nobody types them. In Visual Studio Code you type one character and press Tab.

index.html

A new file called index.html. Nothing in it yet.

In Visual Studio Code, open an empty .html file. Type ! and press Tab. Visual Studio Code writes everything from <!DOCTYPE html> to </html> for you.

That shortcut is called Emmet. It is built into Visual Studio Code. You do not install anything.

  • Make a new file and save it as index.html. The .html ending is what matters.
  • Type a single ! on the first line.
  • Press Tab.

The two halves of a page

Everything inside <html> sits in one of two boxes. The difference between those two boxes is the first real idea in this course.

PartWhat it is forDoes it show on screen?
<!DOCTYPE html>Tells the browser this is modern HTMLNo
<html lang="en">The root. Everything else lives inside itNo
<head>Facts about the page. Its settingsNo
<title>The name of the pageOn the browser tab
<body>Everything a visitor actually seesYes

Change the <title> in your copy. Watch the tab of your browser, not the page. Students look for the title on the page every time. It is not there. That is the point of <head>.

Tags come in pairs

An opening tag, some text, a closing tag
<p>Hello</p>
  • <p> is the opening tag. It says a paragraph starts here.
  • </p> is the closing tag. The slash is what makes it a closing tag.
  • The text goes between them.

A few tags have no closing half. They wrap no text, so they do not need one. Those tags are <meta>, <img>, <br>, and <hr>. You meet them in lesson 2. Every other tag in this course opens and closes.

Build it step by step

Do this in your own editor as well as in the copy beside this guide. The point of lesson 1 is that you can make a page on your own computer.

  1. Make the file

    Make a folder for this lesson. Inside it, make a file called index.html. Open it in Visual Studio Code.

  2. Get the skeleton

    Type ! and press Tab. Nine lines appear. Read them once, from top to bottom. Find <head> and <body>.

  3. Name the page

    Change the text inside <title> to your own title. Save the file. Open it in a browser by double-clicking it. The tab shows your title. The page is still blank. That is because <body> is still empty.

  4. Write a heading

    Inside <body>, add an <h1> with your name in it. Save the file. Reload the page.

    <body>
    <h1>My First Page</h1>
</body>

  5. Write a paragraph

    Under the heading, add a <p> with one sentence about yourself. Save and reload. Add a second <p> and reload again.

  6. Add a section

    Add an <h2> and a <p> under it. The <h2> is smaller than the <h1>. You did nothing to make that happen.

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Do the ! and Tab trick live on a projector, before anyone touches a keyboard. It takes four seconds. That is the moment the room decides this is doable.
  • Make everyone save the file as index.html before typing anything. Emmet does nothing in a file the editor thinks is plain text. That is the most common reason a student's Tab key seems broken.
  • Have them change the <title>. Then ask where it appeared. Let them hunt for it on the page for a moment. Then point at the tab. That confusion is the lesson.
  • Break a tag on purpose in front of them and reload. Say out loud that HTML never shows an error message. Saying it now saves a lot of panic later.
  • Do not mention CSS, colours, or fonts. Someone will ask. Tell them CSS is lesson 3. Today is about what the page is.