Skip to main content

What are the main sections of an HTML document?

HTMLJunior~1 min read
Suggest an edit

An HTML document consists of three main sections that form its logical and technical structure. Each of them plays its own role when the page is displayed in the browser:

1. <!DOCTYPE html> - the document type declaration

This is a service line that comes first in the file. It tells the browser that the document is written in HTML5 (the current standard).

Example:

html
<!DOCTYPE html>

Without this declaration, the browser may switch to "compatibility mode" and display the page incorrectly.

2. <html>...</html> - the root section

All the content of the HTML document is located inside this tag. This is the root of the page: the element hierarchy (the DOM tree) starts right here.

Example:

html
<html lang="en"> ... </html>

The lang attribute specifies the page language (important for search engines and screen readers).

3. <head>...</head> - the service part (metadata)

This section is not displayed on the page, but it contains important information for the browser and search engines:

  • page encoding (<meta charset="UTF-8">);
  • tab title (<title>);
  • connecting CSS files (<link rel="stylesheet" href="style.css">);
  • connecting icons, fonts, meta tags for SEO and social media.

Example:

html
<head> <meta charset="UTF-8"> <title>My site</title> <link rel="stylesheet" href="style.css"> </head>

4. <body>...</body> - the main part (content)

This is the main section, where everything the user sees is located:

  • text (<p>, <h1> and others),
  • images (<img>),
  • links (<a>),
  • tables (<table>),
  • forms, video, buttons and so on.

Example:

html
<body> <h1>Welcome!</h1> <p>This is my first site.</p> <img src="photo.jpg" alt="Photo"> </body>

Summary:

SectionPurpose
<!DOCTYPE html>Indicates that the document is HTML5
<html>The root container of the whole page
<head>Metadata (title, encoding, styles, scripts)
<body>The main content visible to the user

In simple terms: An HTML document is a three-level skeleton: the declaration (DOCTYPE), the settings (head), the content (body). The browser reads them top to bottom and builds the visual page based on that.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit