Understand an HTML document

Read the page from the outside in

The example below is a complete document. Save it as index.html and open it in a browser. You will see the main heading, a short introduction, a second heading and an MDN link. The tab shows “Student coding notes”. The doctype and metadata do not appear as visible paragraphs, but they influence how the browser interprets the page.

Start with the outside pair, <html> and </html>, then look at its two children: head for document information and body for page content. Inside body, main groups the central content. Reading the tree this way helps you spot elements placed in the wrong parent.

DOCTYPE and standards mode

<!doctype html> is a declaration at the top of the file, not an element with a closing tag. In modern documents it tells the browser to use standards mode instead of older compatibility behaviour known as quirks mode. Capitalisation is not significant here; the example uses the common lowercase spelling.

Leaving it out may change layout behaviour even when your headings still appear. Keep it at the very start of a normal HTML document. It is not an instruction to install HTML or choose a numbered HTML release.

• DOCTYPE and standards mode in detail

The html element and page language

<html lang="en"> begins the root element, and </html> closes it. Everything else in this document belongs inside that root. The lang attribute identifies the human language of the page’s content as English; use a different valid language tag for a page written in another language.

The opening tag is <html lang="en">, the closing tag is </html>, and the material between them is the element’s content. lang="en" is an attribute: a name and quoted value on the opening tag. Attributes configure or describe an element; they are not separate visible text.

• Choosing a document language

The head contains information about the document

<head> holds metadata, not the article people read. <meta charset="UTF-8"> declares the character encoding so letters and symbols are decoded correctly. Put a character-encoding declaration near the start of head. The meta element is void: it has one tag and cannot wrap content, so do not add </meta>.

<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to use the device width for the layout viewport and start at a normal scale. It does not make an oversized layout responsive by itself; CSS and flexible layouts still matter. <title>Student coding notes</title> names the document in the browser tab and often in bookmarks or search results. The title is different from the visible h1 heading.

• The head element
• Metadata
• The title element

The body contains page content

<body> wraps content that appears in the webpage. <main> identifies its primary content. <h1> is the page’s main heading; <h2> starts a section under it. <p> marks each paragraph. <a href="…"> creates a link: href gives the destination and the words between <a> and </a> are the link text people can read and activate.

A browser gives these elements default appearance, but their main value is meaning and structure. A person can follow the MDN link without JavaScript. Headings and a main region also help people using assistive technology navigate the page.

• Headings
• Paragraphs
• Links
• Main content

Nesting, closing tags and indentation

Most elements have an opening tag, content and a closing tag. Nested tags must close in reverse order: <p>Read <strong>carefully</strong>.</p> is valid nesting; closing p before strong would overlap the elements. By contrast, void elements such as meta and img have no closing tag and cannot contain child text or elements.

Indent each child level consistently, as in the example. Indentation helps humans see that head and body are inside html and that the headings are inside main; for ordinary text, extra spaces and line breaks in source do not produce matching visual indentation. The browser may repair badly nested markup, but the result can differ from what you meant.

Common mistakes include putting a visible heading in head, treating title as the on-page heading, forgetting a closing tag, writing </meta>, and leaving lang or viewport metadata out. Inspect the browser’s DOM and use an HTML checker when the output surprises you. Next, try changing the headings and link, then move on to CSS and JavaScript.

• Debug and validate your page
• Add CSS and JavaScript

Syntax

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Student coding notes</title>
  </head>
  <body>
    <main>
      <h1>Student coding notes</h1>
      <p>Small explanations make new ideas easier to revisit.</p>
      <h2>Start with the basics</h2>
      <p>Read the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML reference on MDN</a>.</p>
    </main>
  </body>
</html>

Examples

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Student coding notes</title>
  </head>
  <body>
    <main>
      <h1>Student coding notes</h1>
      <p>Small explanations make new ideas easier to revisit.</p>
      <h2>Start with the basics</h2>
      <p>Read the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML reference on MDN</a>.</p>
    </main>
  </body>
</html>

Best practices

• Include a doctype, document language, encoding, viewport and meaningful title.
• Keep visible content in body and metadata in head.
• Close non-void elements in reverse nesting order and indent consistently.

Browser compatibility

Related HTML documentation

Specifications & further reading

• WHATWG HTML Standard: syntax
• MDN: Basic HTML syntax
• W3C WAI: Page structure tutorial