Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Document Structure

Example

Here’s an example of how a modern1 HTML document is typically structured:

<!doctype html>
<html lang="en">
  <head>
    <!-- document metadata specified here -->
  </head>
  <body>
    <!-- visible content specified here -->
  </body>
</html>

It begins with a document type declaration (DTD). This indicates to the browser that what follows is a standards-compliant HTML document, and it should adjust the way that it renders the document accordingly. Without a DTD, the browser will render content in so-called quirks mode, emulating the behaviour of older browsers in the days before web standards were followed properly.

After the DTD comes a single html element. This is known as the ‘root element’ of the document.

All elements in an HTML document are specified using tags. In some cases a single tag is used to specify an element, but in most cases, like this one, there is an opening tag and a closing tag. Closing tags are distinguished from opening tags by the use of the / character as a prefix.

The opening tag of the html element is <html>, and the closing tag is </html>.

Notice that, in this example, the opening tag also specifies an attribute. Attributes have a ‘key=value’ syntax, and they are often optional. In this case the lang attribute is used to declare that the document’s language is English.

Important

Specifying a language explicitly is necessary for accessibility.

The lang attribute declares to screen readers which language they should use when announcing the content of a document.

The html element encloses two elements: head, which supplies document metadata of various kinds; and body, which encloses the visible content of the document. The former is discussed in more detail below.

Document Head

Here’s an example of how a head element is typically defined:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/static/style.css">
  <title>Document Title</title>
</head>

meta

At a minimum, an HTML document should specify the character encoding using a meta element. UTF-8 is the most commonly-used encoding, but others may be more appropriate, depending on the language in which the document contents are written.

It is also common to use meta for viewport sizing. This is needed to ensure that a site is rendered appropriately on mobile devices.

The name and content attributes can be used to specify arbitrary document metadata. For example, you could identify the author of a document with

<meta name="author" content="John Smith">

Note that meta is specified using a single tag; it doesn’t have separate opening and closing tags. Single tags originally needed to end with />, but this is no longer required.

title

At a minimum, an HTML document should also provide a title for the document, using a title element. This title will be shown by the browser tab in which the document is displayed, and will be announced by screen readers.

Note

The contents of a title element will not be displayed within the document itself; for that, you will need to use the h1 element.

Often, HTML documents need to be linked with external resources that are needed in order to render them properly. Typically, link will be used to reference an external stylesheet containing the CSS rules that apply to the document2, as in the example above.

The link element can also be used to associate icons with a web page. These icons will be displayed in a browser tab, or on the home screen of a mobile device.

  1. by ‘modern’ here, we mean ‘compliant with the HTML living standard’. ↩

  2. It is also possible to embed CSS rules within the document itself, but putting them in a style element inside the head. This approach can even be combined with the use of an external stylsheet. ↩