Build a complete HTML document

Learning objectives

Use a doctype; separate metadata from visible content; declare language and character encoding.

Prerequisites

Complete the HTML introduction and be able to save a text file.

Understand the markup

A complete HTML document gives the parser an explicit starting point. Begin with <!doctype html> to request standards mode. It is a declaration, not an element with an end tag. Standards mode avoids historical layout behavior that exists for compatibility with old websites.

The html element contains the head and body. Put document metadata in head: a character encoding, a meaningful title, and a viewport instruction. Put the content readers use in body. The title appears in a browser tab and can identify a bookmark; it does not replace the visible h1 heading.

Declare UTF-8 near the beginning of head so punctuation and writing systems decode correctly. The encoding declaration must be entirely within the first 1024 bytes of the document. Match it to the encoding used to save the file. The lang attribute on html identifies the primary language; it helps speech software choose pronunciation.

Browsers can infer some omitted tags, but explicit structure is easier for a beginner to inspect and maintain. View source shows the text that was delivered; the developer tools Elements panel shows the parsed document tree, which may include browser repairs. When the two differ unexpectedly, check invalid nesting before assuming the browser ignored your file.

Try a working example

<main>
  <h1>Neighborhood library</h1>
  <p>Open Tuesday to Saturday.</p>
</main>

Expected output

The output panel shows the library heading and opening information. Metadata belongs to the containing document and is not displayed as a paragraph.

Another example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Library opening hours</title>
</head>
<body>
  <h1>Neighborhood library</h1>
  <p>Open Tuesday to Saturday.</p>
</body>
</html>

Common mistakes

Do not place visible headings inside head. Avoid disabling zoom in the viewport declaration. A second body element does not create a second page.

Accessibility and browser notes

Use a specific page title and the correct language. If a passage uses a different language, add lang to that passage.

Check your work

Check the browser tab title separately from the visible page heading. Open developer tools and look for document.compatMode in the console: CSS1Compat indicates standards mode. This is an inspection command, not code that your page needs. If accented characters appear corrupted, check both the editor encoding and the meta charset declaration rather than replacing each character with an entity.

Practice

Save a complete document called library.html. Give its tab the title Library membership and its visible page a heading Join the library.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Library membership</title></head>
<body><h1>Join the library</h1><p>Bring proof of your address.</p></body>
</html>

Related lesson

Create meaningful links and fragment targets

Specifications and further reading

WHATWG HTML Living Standard

The document boundary affects more than appearance

The server normally sends a Content-Type response header describing the resource. A page delivered as text/html follows HTML parsing rules. XHTML delivered with an XML media type follows XML rules instead; merely adding a slash to a void tag does not switch parsing modes. In ordinary HTML, <input /> is not a distinct self-closing form of a normal element, and <script /> does not safely close a script element.

Metadata also has a timing dimension. Put the character encoding early so the browser does not discover it after parsing much of the file. Reserve head for appropriate metadata rather than relying on the browser to move misplaced content into body. An explicit document scaffold makes these choices visible to a reviewer.

When a template system renders your page, inspect the actual response rather than only the component source. A component can accidentally produce a second title, duplicate viewport declarations, or content outside the intended main region after composition. Validation belongs on the complete assembled document. Check the final document title and primary language after server rendering, and repeat the check after client-side navigation if your application changes them.