Page structure

2 min read 2 runnable examples Quiz included

Every HTML document follows the same basic structure. Learn it once and you'll recognise it in every page on the web.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
  </head>
  <body>
    <h1>Visible content goes here</h1>
    <p>Everything inside the body is shown on the page.</p>
  </body>
</html>

The parts

Part	Job
`<!DOCTYPE html>`	tells the browser this is modern HTML (HTML5)
`<html lang="en">`	the root element that wraps everything; `lang` helps screen readers and search engines
`<head>`	information about the page: title, character set, links to CSS. Not shown on the page itself
`<meta charset="UTF-8">`	lets the page display any language and emoji correctly
`<meta name="viewport" ...>`	makes the page scale properly on phones
`<title>`	the text in the browser tab and in search results
`<body>`	everything that appears on the page

Every page is a box inside a box: html holds head (about the page) and body (what the visitor sees).

Nesting

Elements live inside other elements, forming a tree. The <html> element contains <head> and <body>; the body contains headings, paragraphs and so on. Indenting nested elements makes the structure easy to see.

Tags must close in the reverse order they opened:

HTML

<p>This is <strong>correct</strong>.</p>
<p>This is <strong>wrong</p></strong>

Comments

Comments are notes for developers and are not displayed:

HTML

<!-- This is a comment. The browser ignores it. -->
<p>Only this paragraph is visible.</p>

Finished this lesson?Mark it complete to earn +20 XP and move your progress on.