HTML Basics

HTML Document Structure: DOCTYPE, html, head and body

Every page is built from the same four parts. Learn what the doctype actually does, why html carries the lang attribute, and the rule that decides whether content belongs in head or body.

On this page (13)

Concept

Every HTML file, from a one line test page to a large application, has the same skeleton: a doctype, a single html root element, a head for information about the page, and a body for the page itself.

Diagram of an HTML document: a doctype line at the top, an html root element containing a head element with charset, viewport, title and description, and a body element with header, main and footer regions. — The four structural parts, and what belongs inside each one.

Syntax

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- information about the page -->
  </head>
  <body>
    <!-- the page itself -->
  </body>
</html>

What each part is for

The doctype

<!DOCTYPE html> is not an element and not a tag. It is a single instruction that must be the first thing in the file, before any blank line or comment. Its only job today is to switch the browser into standards mode.

Leave it out and the browser falls into quirks mode, where it deliberately reproduces the layout bugs of browsers from the late nineteen nineties so that very old pages still work. In quirks mode box sizing, table cell heights, inline block alignment and several inherited properties all behave differently. Nothing announces this. The page simply lays out wrongly and every hour you spend on the stylesheet is wasted.

The doctype is case insensitive and takes no attributes. Older doctypes were long strings pointing at a document type definition; modern HTML needs only the short form.

The html element

The root of the tree. There is exactly one of these per document and everything else lives inside it. It carries the lang attribute, which is far more useful than it looks:

Screen readers pick the correct pronunciation rules and voice.
Browsers offer the right translation, and apply the right hyphenation and quotation marks.
Search engines use it as one signal of who the page is for.

<html lang="en">      <!-- English -->
<html lang="en-IN">   <!-- English as written in India -->
<html lang="hi">      <!-- Hindi -->

The head element

The head holds information about the document rather than the document itself. Nothing in it is painted on the page. It is where the character encoding, the viewport rule, the page title, the search description, the stylesheet links and the favicon go.

One entry in the head is genuinely urgent. The browser has to know the character encoding before it can decode the bytes it is reading, so <meta charset="utf-8"> should be the first thing inside the head. If it appears too late, the browser has already guessed, and a wrong guess is what produces the familiar row of mangled symbols where an accented letter or a rupee sign should be.

The body element

Everything a reader sees. Headings, paragraphs, images, links, lists, tables, forms and the layout regions that group them. Markup order in the body is reading order: it is the order a screen reader announces, the order the keyboard moves through, and the order the page paints in.

Example

<!DOCTYPE html>
<html lang="en-IN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kavya Rao - Front End Developer</title>
  <meta name="description" content="Portfolio of Kavya Rao, a front end developer working on accessible interfaces.">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/styles/site.css">
</head>
<body>
  <header>
    <p>Kavya Rao</p>
    <nav>
      <a href="/work">Work</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <h1>Front end developer, Bengaluru</h1>
    <p>I build interfaces that stay usable on a slow connection.</p>
  </main>

  <footer>
    <p>Written in 2026.</p>
  </footer>

  <script src="/scripts/site.js" defer></script>
</body>
</html>

Explanation

The head answers four questions before a single pixel is drawn: how are these bytes encoded, how wide should the page consider the screen to be, what is this page called, and what does it cover. The body then answers a fifth: what is actually here, and in what order.

The stylesheet is linked in the head because the browser needs it before painting; a stylesheet discovered late causes a flash of unstyled content. The script sits at the end of the body with defer, so it never delays the parser and it runs once the document is complete.

Important rules

The doctype comes first. Not after a comment, not after a blank line, not after a stray space.
One html, one head, one body per document, in that order, never overlapping.
<meta charset="utf-8"> belongs in the first bytes of the head.
The head and body tags are technically optional - the parser invents them - but writing them is the only way to be sure the split lands where you intended.
Anything the parser finds in the head that does not belong there ends the head early and silently starts the body.

Common mistakes

Copying an old four line doctype from a tutorial. Modern HTML needs the short form and nothing else.
Omitting lang, which is a one word fix and an accessibility failure that automated audits will always flag.
Putting visible content such as a heading inside the head. It ends the head, and the page renders in a way that will confuse you for an hour.
Declaring the encoding halfway down the head, after a title containing a non ASCII character. The damage is already done by then.
Writing two body elements after copying a template into an existing page. The parser merges them and the result is rarely what you wanted.

Best practices

Keep the head in a fixed order: charset, viewport, title, description, canonical, icons, stylesheets. It makes reviews fast and mistakes obvious.
Set lang on the root, and set it again on any element whose text is in a different language.
Load scripts with defer so parsing is never blocked.
Indent by nesting level. The structure of the file should be visible from ten feet away.

Practice

Delete the doctype from a page you have styled and reload it. Note every layout difference you can see, then put it back.
Move <title> into the body and open the page. Where does the text appear, and what happened to the browser tab?
Write the skeleton of a page in Hindi. Which single attribute changes, and what does that change for a screen reader?

Useful resources

Hand picked references for this topic

W3C Standards

Official web platform standards.

WHATWG HTML Living Standard

The specification that defines every HTML element and attribute.

Topics #Beginner #HTML #Metadata #Web

Written by Lorens Mishra

Default administrator account created by the installer.