HTML Document Structure | Dev Notes

HTML Document Structure (Skeleton)

The structure of an HTML document is like the foundation of a building. You don’t always see it in the browser, but without it, nothing works correctly.

What is the HTML document structure?

Browsers need a clear structure to understand how to display a webpage. They need to know what type of document it is, where content starts, and how to process it.

HTML is written from top to bottom, and the browser reads it in the same order.

Basic structure of an HTML document

Every HTML page has a standard structure:

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata -->
  </head>
  <body>
    <!-- visible content -->
  </body>
</html>

This is the minimum required structure for any webpage.

DOCTYPE declaration

The <!DOCTYPE html> is not a tag. It tells the browser that the document uses modern HTML.

It must always be the first line in the document.

Root element <html>

The <html> element is the root of the document. All content must be inside this tag.

The lang attribute defines the language of the page, which helps search engines and accessibility tools.

Head section <head>

The <head> contains metadata (information about the page).

This data is not visible but is important for browsers and search engines.

Title <title>

The <title> defines the name of the page.

It appears in the browser tab and is used by search engines.

It should be short and clearly describe the page content.

Meta tag <meta>

Character encoding

The following tag defines how text is displayed:

<meta charset="utf-8">

UTF-8 supports most languages and prevents display errors.

Description

The meta description provides a short summary of the page:

<meta name="description" content="Page description">

It helps search engines understand the page.

Body section <body>

The <body> contains all visible content.

Everything you see on the page is placed inside this tag.

How the browser reads the page

Reads DOCTYPE
Processes <html>
Reads <head>
Displays <body>

This is why the correct order of elements is important.

Summary

Every HTML document must include:

<!DOCTYPE html>
<html>
<head>
<body>

Inside <head>:

<title>
<meta charset="utf-8">
<meta name="description">

Inside <body>:

All visible content of the webpage.

⬅ Back