HTML5 Starter: The Skeleton of Every Page

Contents10 sections

Every web page starts the same way. A handful of lines form a skeleton, and everything else hangs off it. Learn this skeleton once, and every page you ever build will make sense.

HTML stands for HyperText Markup Language. It is the language that describes the structure of a web page. A page is a document. The skeleton says where the document starts, where its hidden information lives, and where its visible content goes.

Here is the whole skeleton. Copy it exactly. Each part is explained below.

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

1. The doctype

The first line is the doctype:

<!DOCTYPE html>

A doctype is not an HTML element. It is a short instruction that comes before everything else. It tells the browser to use standards mode, the modern set of rendering rules. Leave it out, and browsers fall back to quirks mode, an older, inconsistent way of displaying pages. Always start with it.

2. The html element

<html lang="en">

The html element is the root of the document. It is the parent of everything else. It contains exactly two things: the head and the body.

The lang attribute says what language the page is written in. en is the ISO language code for English. It helps screen readers pronounce the page correctly, and it helps search engines and translation tools identify the language. Use the code for your page’s language.

3. The head

<head>

The head holds metadata. Metadata is information about the page, rather than the page’s content. Search engines read it. Social media cards read it. Browsers read it to decide how to display the page. Nothing in the head is visible on the page itself, but the page does not work properly without it.

4. The character encoding, first

<meta charset="utf-8">

This line should be the very first thing inside the head, before the title. It declares the character encoding: the system the browser uses to turn bytes into letters. UTF-8 is the only valid encoding for HTML5 documents, and it covers the characters of almost every language. Placing it first means the browser can correctly read the title and everything after it.

A meta element is a piece of metadata. The charset part is its attribute, a named setting attached to the element.

5. The title

<title>My first page</title>

Every page should have a unique title. The title shows in the browser tab, in the list of open windows, in the history, and in search results. It is the first thing a visitor reads about your page, and often the only thing a search result shows. Give each page its own title, and make it say what the page is about.

6. The viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

This line makes the page responsive. In plain English, it tells the browser to make the content as wide as the screen it is shown on. Without it, phones display pages shrunk down to desktop width, and visitors have to pinch and zoom.

Some older skeletons leave this line out. Modern ones always include it. Include it in every page you build.

7. The body

<body>
  <h1>Hello, world!</h1>
  <p>This is my first web page.</p>
</body>

The body holds the visible content of the page. Everything a visitor sees and reads goes here. In this skeleton there are two elements:

• h1 is the top heading of the page. There is one h1 per page, and it says what the page is about.
• p is a paragraph of text.

One rule for all of it: nesting

Elements must nest properly. Each element must sit completely inside the element that contains it. Tags must close in the opposite order to the order they opened.

This is wrong:

<p>This is <em>very <strong>wrong</em>!</strong></p>

This is right:

<p>This <em>is <strong>correct</strong>.</em></p>

The wrong version overlaps. The right version nests. Browsers will try to fix bad nesting for you, but they guess, and guesses differ. Nest properly, and the page behaves the same everywhere.

Try it yourself

1. Open a plain text editor. Not a word processor. A plain text editor.
2. Copy the skeleton at the top of this article, exactly as written.
3. Save the file with a name ending in .html, for example first-page.html.
4. Open that file in a web browser. You will see your heading and your paragraph.

Change the heading text. Save. Reload the browser. You just edited a web page.

Keep going

You know the skeleton now. Next, learn the three things every page is made of: links, images, and lists, done properly.