Now we fill the <body> — what the visitor sees. Three elements: a heading, a paragraph and a link. Type them between <body> and </body>, as in the code column.

• <h1> — the page's main heading. There is one per page.
• <p> — a paragraph.
• <a href="…"> — a link; href is the address it points to.

Serve the folder and reload. The page now has content — unstyled, but real: a heading, a sentence, and a working link to NASA. No JavaScript, no CSS. Just HTML, and it already means something.

Break it twice

The best way to understand what a line is for is to remove it and see what breaks. Do it now; both times, put the line back afterwards.

1. Remove the charset. First change the heading to Lithuanian, so there's something to break:

<h1>Tyrinėk visatą</h1>

Reload — fine. Now delete the line <meta charset="UTF-8"> from the <head> and reload again. ė, ą turn into garbage: TyrinÄ—k visatÄ…. There's your first encoding bug — and it will be someone's whole afternoon at some point in their career. One line prevents it. Put <meta charset> back and reload — the text is correct again.

2. Remove the viewport. Delete the <meta name="viewport" …> line. Open the dev tools (F12) and turn on the device toolbar (the phone icon at the top). The page is tiny, zoomed out, unusable — exactly how a phone would see it. Most of your visitors are on a phone. That line is not optional and it is not a mobile feature you add later. Put it back.

Next. The page is correct — and it looks like 1995. Next lesson: CSS, and the two ideas — the cascade and inheritance — that explain every styling problem you will ever have.