Document structure

So far we have written separate pieces of markup. A real page is a file with the .html extension, and it has a required skeleton: a few tags that tell the browser what kind of document it is and how to read it.

The page skeleton

Here is a minimal valid page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Only the content of <body> shows up in the preview: everything else is service information for the browser.

What it consists of

The lang attribute on <html> sets the language of the page. The browser uses it to choose hyphenation rules, and screen readers use it to choose pronunciation.

What goes into head

Inside <head> you write metadata — data about the page itself:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Bean coffee shop</title>
  </head>
  <body>
    <p>The page title appears on the browser tab, not here.</p>
  </body>
</html>

<meta charset="utf-8"> sets the encoding — the way letters are stored in the file. <meta name="viewport"> tells phones to show the page at its natural width instead of a shrunken copy of the desktop version. <title> is the text on the tab and in search results.

Your first file

Create a folder for the project and a file named index.html inside it:

my-site/
└── index.html

Open the file in any code editor (VS Code, for example), paste the skeleton and save. Then open the file in a browser with a double click. The name index.html is special: a server returns this file when an address ends with a folder.

Indentation and case

The browser does not care about indentation and line breaks between tags — they are there for people. Nested elements are usually indented by two spaces. Tags are written in lowercase: <body>, not <BODY>.

Common mistake

If you leave out <meta charset="utf-8">, the browser may read non-English letters in the wrong encoding and show garbage like é instead of é. Put this line first inside <head> — before <title> and everything else. And do not put visible content into <head>: headings and paragraphs belong only in <body>.