pagehaus

Learn HTML · Lesson 1 of 8 · about 10 minutes

Your first web page

By the end of this lesson you'll have a web page on your computer that opens in your browser, and you'll know what every line of it does.

What HTML is

A web page is a text file. Its text is marked up with tags that tell the browser what each part is: this is a heading, this is a paragraph, this is a link. That's what HTML stands for: HyperText Markup Language. The browser reads the tags and decides how to show each part; the tags themselves don't appear on the page.

You don't need special software to write it. Any program that saves plain text will do.

Set up your text editor

Use a plain text editor, not a word processor: Word and Pages add their own formatting to the file, and the browser can't read it.

Make a folder for your site

Create a new folder somewhere easy to find, such as your Desktop or Documents, and call it my-site. Every file of your website goes in here. Over the next lessons you'll add pages, images and a stylesheet; at the end you'll put the whole folder online.

Write the page

Open a new, empty file in your editor and type this (or copy it):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my first web page.</p>
</body>
</html>

Save it in your my-site folder as index.html. The name matters: lesson 4 explains why the first page of a site is always called index.html.

Notepad: in the Save dialog, set Save as type to All files, or you'll get index.html.txt. TextEdit: if it asks, choose Use .html.

Open it in your browser

Double-click index.html in your folder. It opens in your browser, and you should see:

That's a web page. The address bar starts with file://, which means the page is coming from your own computer, so only you can see it for now. Lesson 8 puts it online.

What each line means

Most of HTML is elements: an opening tag, some content, and a closing tag with a slash.

<p>This is my first web page.</p>

<p> opens a paragraph, </p> closes it, and the text in between is what you see. Now the whole page, from the top:

<!DOCTYPE html>
Tells the browser this is a modern HTML page. It's always the first line, and it's the same on every page.
<html lang="en">
Wraps the whole page. lang="en" says it's in English, which helps screen readers and translation tools. Use fr for French, es for Spanish, and so on.
<head>
Information about the page, which isn't shown on it.
<meta charset="utf-8">
Makes accented letters, other alphabets and emoji display correctly. Without it, café can turn into café.
<meta name="viewport" …>
Makes the page fit phone screens instead of showing a tiny desktop version.
<title>
The name on the browser tab, and the blue link people click in search results. Give every page its own.
<body>
Everything that appears on the page goes in here.
<h1> and <p>
A main heading and a paragraph. Lesson 2 covers these and their relatives.

The <meta> tags have no closing tag: they have no content, so there's nothing to close. A few other elements are like that, such as images.

The spaces at the start of some lines are only there to make the code easier to read. The browser ignores them.

Try it

Here's the body of your page. Change the words, add another paragraph, or delete a closing tag and see what happens. Nothing you do here can break anything.

Try it: change the code

What the browser shows

If it doesn't work

Check your work

In the next lesson, you'll turn this page into a real home page with headings, paragraphs and lists.