The structure of an HTML document

HTML gives a document structure and meaning; it is not a programming language that prints to a terminal.

What you will learn

Recognize the main document elements
Separate metadata from visible content
Use matching opening and closing tags

Start with a document declaration

The doctype tells the browser to use modern HTML parsing rather than an older compatibility mode. It is not an element and does not need a closing tag. The html element contains the document, and its lang attribute identifies the primary language so assistive technologies and search tools can interpret the page more appropriately.

Separate head and body

The head contains information about the document, such as its character encoding and title. The body contains the content people see and interact with. A title in the head appears in the browser tab and may be used as a search result title; it is not a visible heading inside the page.

Understand elements and attributes

An element usually has an opening tag, content, and a closing tag. Attributes provide extra information, such as a language or a destination address. Some elements, including meta and img, are void elements and do not wrap content. Use quotes around attribute values and keep nesting in the same order that it was opened.

Check what the browser receives

Save the page with an .html extension and open it in a browser. If text appears but formatting is unexpected, inspect the tags and nesting before adding styles. A browser's developer tools can show the parsed document, which is useful when the source and rendered result seem different.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Study notes</title>
  </head>
  <body>
    <h1>Study notes</h1>
    <p>One idea at a time.</p>
  </body>
</html>

Practice exercise

Create a page with a meaningful title, one main heading, and a paragraph about a topic you are learning.

Show a hint

Put the title in head and the heading and paragraph in body.

Show one possible solution

Use the document outline from the example, replace its title and visible text, and keep the heading inside the body.

Quick check

Where does the visible page content belong? Inside body Inside the title element

Frequently asked questions

Is HTML case-sensitive?

<p>HTML tag names are parsed case-insensitively, but lowercase tags and attributes are the common readable convention. Attribute values can have their own rules, so do not assume every value is interchangeable.</p>