Lesson 1 of 8

Your first real HTML page

In the last course you made a page with just two lines of HTML, and the browser happily showed it. Browsers are very forgiving like that. But a proper HTML page has a bit more structure around the content, and that structure matters more than you'd think.

In this lesson you'll learn how HTML is put together and write a real, complete page from scratch.

Tags and elements

HTML works by wrapping content in tags. A tag is a word inside angle brackets, like <p>. Most tags come in pairs: an opening tag and a closing tag. The closing tag has a slash in it.

html

<p>This is a paragraph.</p>

<p> is the opening tag
</p> is the closing tag
This is a paragraph. is the content

The whole thing together, opening tag, content and closing tag, is called an element. The tag tells the browser what kind of thing the content is. Here, p means paragraph.

A few elements don't have any content, so they don't need a closing tag. These are called empty elements. An image is a good example, because there's nothing to wrap:

html

<img src="photo.jpg" alt="A cat sleeping in the sun">

Quick check

In <h1>Welcome</h1>, what is the closing tag?

Select one answer

Attributes

Look at the image example again. The src and alt parts inside the opening tag are attributes. Attributes give extra information about an element.

html

<a href="https://example.com">Visit example.com</a>

Attributes always go in the opening tag and follow the same pattern: a name, an equals sign and a value in quotes. In the example above, href is the name and https://example.com is the value. It tells the link where to go.

You'll meet lots of attributes in this course, but they always look like this.

Nesting elements

Elements can go inside other elements. That's called nesting, and it's how every page is built:

html

<p>This is <strong>really</strong> important.</p>

Here the strong element sits inside the p element. The rule is simple: close elements in the opposite order you opened them. Think of it like boxes inside boxes. You close the inner box before the outer one.

html

<!-- Correct -->
<p>This is <strong>really</strong> important.</p>

<!-- Wrong: strong is closed after p -->
<p>This is <strong>really important.</p></strong>

Indenting nested elements, adding a few spaces in front, makes it much easier to see what belongs inside what. Prettier does this for you every time you save.

Quick check

Which line is nested correctly?

Select one answer

The structure of every page

Every HTML page you build starts with the same basic structure. Here it is in full:

html

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

That might look like a lot, so let's go through it piece by piece:

<!DOCTYPE html> tells the browser this is a modern HTML page. It always goes first.
<html lang="en"> wraps everything. The lang attribute says which language the page is written in. Use sv for Swedish, de for German and so on.
<head> holds information about the page. Nothing in here shows up on the page itself.
<meta charset="UTF-8"> makes sure special characters like å, é and emojis display correctly.
The viewport meta tag makes the page work properly on phones. Without it, phones show a tiny zoomed out version of the page.
<title> is the text in the browser tab. It's also what shows up in search results and bookmarks.
<body> holds everything you actually see on the page.

You don't need to memorize this. Nobody types it from scratch. In VS Code, create an empty .html file, type ! and press Tab. VS Code fills in the whole structure for you. It's called the exclamation mark shortcut, and you'll use it constantly.

Quick check

You want to change the text in the browser tab. Which element do you edit?

Select one answer

Head versus body

This is the one thing worth really remembering from this lesson. Content you want people to see goes in the body. Information about the page goes in the head.

If you ever put a heading in the head by accident, the browser will try to fix it for you, but it's better to get it right yourself. When something on your page isn't showing up, checking that it's inside the body is a good first step.

Try it yourself

Open your my-website folder from the first course in VS Code.

Open index.html and delete everything in it
Type ! and press Tab to get the full page structure
Change the text inside <title> to your name
Inside the body, add a heading with your name and a paragraph about yourself, just like before
Click Go Live and check that the browser tab now shows your name

Then try breaking it on purpose: remove a closing </p> tag and see what happens. Browsers are forgiving, so it might still look fine. Put it back afterwards.