Understand the idea

HTML describes the meaning and structure of a page. Start with a small complete document so that every later change has a predictable place.

The doctype requests standards mode. The html element contains the document and declares its language. The head holds metadata; the body contains the content people read. UTF-8 supports international characters, while the viewport declaration lets mobile browsers use the device width.

Read the example

This is a complete HTML document. Save it as index.html with UTF-8 encoding.

HTML · EXAMPLE
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, web.</h1>
  <p>A small page with a solid foundation.</p>
</body>
</html>

A small mistake, explained

What goes wrong

Putting visible content inside head, or forgetting a closing quote in an attribute, can cause the browser to repair your document in surprising ways.

How to fix it. Inspect the Elements panel, which shows the parsed document, and compare it with your source. Check the first unexpected element and the markup immediately before it.

Try it yourself

Save the example as index.html and open it in a browser. Change the title, then the h1. Notice that they appear in different places.

Further reading

HTML Living Standard — syntax

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.

  • HTML · Guide
    Headings & paragraphs

    Build a readable outline instead of choosing tags by their default size.

  • HTML · Guide
    Links & file paths

    Understand where a link goes, and why one missing slash matters.