Learn HTML: build your first page

August 1, 2021

I wanted to teach people how to make a website like this one. Here is a starting point: a text editor, a browser, and a little HTML.

What is HTML?

HTML stands for HyperText Markup Language. It describes a page’s structure. Tags mark headings, paragraphs, links, images, and other content. CSS handles appearance, and JavaScript can add interactions.

Your first file

Create a file named index.html, paste in this example, and open it in your browser. Make sure the filename ends in .html rather than .txt.

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

The doctype identifies modern HTML. The html element contains the document. The head holds metadata and the browser-tab title; the body holds visible content.

Headings and paragraphs

Use h1 for the main heading, h2 for sections, and p for paragraphs. Choose heading levels for structure. Most elements have opening and closing tags.

<h2>About me</h2>
<p>I enjoy building websites and games.</p>

Links and images

Attributes add details inside an opening tag. A link’s href gives its destination. An image’s src gives its file location, and alt describes its meaning for people who cannot see it. The img element has no closing tag.

<a href="https://example.com">Visit an example website</a>
<img src="my-photo.jpg" alt="Me working on my first website">

Put my-photo.jpg in the same folder as your HTML file, or update the path to match your image.

Make a list

Use ul for bullets or ol for numbers. Each item goes inside li.

<ul>
  <li>Learn HTML</li>
  <li>Build a page</li>
  <li>Share it with a friend</li>
</ul>

Try it yourself

Change the title, write a paragraph about yourself, add a link, and list three things you enjoy. Save and refresh your browser after each change. Close nested tags in the right order: <p><strong>Hello!</strong></p>.

This lesson expands on my original HTML course announcement.