Skip to main content

What does an HTML document consist of?

HTMLJunior~1 min read
Suggest an edit

An HTML document consists of a set of tags that describe the structure and content of a web page. Each tag tells the browser exactly what to display: a heading, text, an image, a link and so on.

The basic structure of an HTML document

Here is an example of a basic template:

html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page title</title> </head> <body> <h1>Hello, world!</h1> <p>This is my first HTML document.</p> </body> </html>

Let's break it down part by part:

1. <!DOCTYPE html>

This is the document type declaration. It tells the browser that the document is written in HTML5, the most current version of the language.

Without this line, the browser may interpret the page incorrectly.

2. <html>...</html>

This is the root tag, which contains all the HTML code. Everything displayed on the page is located inside it.

The lang="en" attribute can be added to specify the page language:

html
<html lang="en">

3. <head>...</head>

The section for service information (metadata), which is not displayed directly on the page.

Here you set:

  • the tab title (<title>);
  • the encoding (<meta charset="UTF-8">);
  • the stylesheet connection (<link rel="stylesheet" href="style.css">);
  • the connection of scripts, fonts and icons.

Example:

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

4. <body>...</body>

This is the main content of the page: what the user sees.

Here you place:

  • text (<p>),
  • headings (<h1>-<h6>),
  • images (<img>),
  • links (<a>),
  • lists, tables, forms and other elements.

Example:

html
<body> <h1>Welcome!</h1> <p>My first site will be here.</p> <img src="photo.jpg" alt="Photo"> </body>

Summary:

PartPurpose
<!DOCTYPE html>Indicates that HTML5 is used
<html>The root element of the document
<head>Metadata (title, styles, encoding)
<body>The main content of the page

Just remember: An HTML document is a skeleton made of three main parts: the declaration, the head, and the body. CSS and JavaScript already "dress up" and "bring to life" this skeleton.

Short Answer

Interview ready
Premium

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

Suggest an edit