HTML Document Structure

Understand the standard structure of an HTML document and learn the purpose of each major HTML element.

What is HTML Document Structure?

An HTML document follows a standard structure that helps the browser understand how the web page is organized.

A typical HTML document contains a document type declaration, an HTML root element, a head section, and a body section.

Simple Definition: The HTML document structure is the basic arrangement of HTML elements used to create a web page.

Basic HTML Document Structure

<!DOCTYPE html>

<html>

<head>

    <title>My Web Page</title>

</head>

<body>

    <h1>Hello World</h1>

    <p>Welcome to my web page.</p>

</body>

</html>

Main Parts of an HTML Document

<!DOCTYPE html>

Declares that the document uses HTML and helps the browser render the page using standards mode.

<html>

This is the root element of the HTML document. All other HTML content is placed inside it.

<head>

Contains document information such as the title, metadata, linked CSS files, and other resources.

<body>

Contains the visible content of the web page such as headings, paragraphs, images, links, and forms.

1. DOCTYPE Declaration

The first line of a modern HTML document is usually:

<!DOCTYPE html>

This declaration tells the browser that the document should be interpreted as an HTML document using modern standards.

Important: The DOCTYPE declaration is not an HTML element. It is a declaration placed at the beginning of the document.

2. HTML Root Element

<html>

    ...

</html>

The <html> element is the root element of the page. All the other HTML elements are placed inside it.

A language attribute can also be specified.

<html lang="en">

The lang attribute identifies the primary language of the document.

3. Head Section

The <head> section contains information about the HTML document.

<head>

    <title>My Web Page</title>

</head>

Information inside the head is generally not displayed as normal page content.

Common Elements Inside Head

Element	Purpose
`<title>`	Defines the browser tab title.
`<meta>`	Provides metadata about the document.
`<link>`	Links external resources such as CSS.
`<style>`	Contains CSS styles.
`<script>`	Can contain or reference JavaScript.

4. Title Element

The <title> element defines the title displayed in the browser tab.

<title>CIIT Institute</title>

Browser Tab:

CIIT Institute

Tip: A meaningful page title helps users understand which page they are viewing.

5. Body Section

The <body> element contains the main visible content of the web page.

<body>

    <h1>Welcome to CIIT Institute</h1>

    <p>
        Learn HTML step-by-step.
    </p>

</body>

Common Body Elements

Headings
Paragraphs
Links
Images
Lists
Tables
Forms
Multimedia content

Complete HTML Document

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>My First Web Page</title>

</head>

<body>

    <h1>Welcome to CIIT Institute</h1>

    <p>
        Learn HTML step-by-step.
    </p>

</body>

</html>

Document Structure Flow

<!DOCTYPE html> → HTML Document Declaration

<html> → Root Element

<head> → Document Information

<body> → Visible Page Content

Practice Exercise

Create a file named index.html.
Add the <!DOCTYPE html> declaration.
Add the <html> element.
Create a <head> section.
Add a <title>.
Create a <body> section.
Add one heading and one paragraph.

Summary

A basic HTML document contains the DOCTYPE declaration, the HTML root element, the head section, and the body section. The head contains document information and resources, while the body contains the visible content of the web page.

← Previous: Introduction to HTML Next: How HTML Works →