HTML Document Structure Explained with Examples : Chapter 2: Basic HTML Course

HTML document structure showing head, title and body elements in a code editor

Introduction

Welcome to Chapter 2 of our Basic HTML Course on Focus360Blog. In Chapter 1, we learnt what HTML is and how it helps create webpages. In this chapter, we will explore the HTML document structure and understand how different elements work together to create a webpage.

Every properly structured HTML page follows a standard format. Learning this format will help you write cleaner code, organise content correctly and build a strong foundation for web development.

Learning Objectives

By the end of this chapter, you will be able to:

Understand the basic structure of an HTML document.
Identify the purpose of essential HTML tags.
Differentiate between the head and body sections.
Use metadata and the page title correctly.
Create a complete HTML document and view it in a browser.

What Is HTML Document Structure?

HTML document structure refers to the arrangement of elements that make up a webpage. These elements tell the browser what type of document it is processing, what information belongs in the page's metadata and what content should appear on the screen.

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

Basic HTML Document Structure

Consider the following example:

<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1.0">

<title>My First Website</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is my first HTML webpage.</p>

</body>

</html>

This is a basic HTML5 document. Let us understand each part step by step.

1. The DOCTYPE Declaration

<!DOCTYPE html>

The DOCTYPE declaration tells the browser to interpret the document using modern HTML standards. It should appear at the beginning of the document.

Without the correct declaration, some browsers may use quirks mode, which can cause differences in page rendering.

2. The HTML Root Element

</html>

The <html> element is the root element of the webpage. All other HTML elements, apart from the document type declaration, are contained within it.

The lang="en-GB" attribute identifies the page language as British English. Correct language information can help screen readers and other tools interpret the content appropriately.

3. The Head Section

The <head> element contains information about the document rather than the main content displayed on the page.

Example:

<head>

content="width=device-width, initial-scale=1.0">

<title>My First Website</title>

</head>

The head section can contain the following elements:

<meta charset="UTF-8">: Specifies the character encoding so that a wide range of characters can be displayed correctly.
<meta name="viewport">: Helps the page use the device's width on mobile devices.
<title>: Defines the page title shown in the browser tab and commonly used as the title link in search results.

Other elements, such as <link> and <script>, can be used to connect stylesheets and JavaScript files.

4. The Body Section

The <body> element contains the main content of the webpage that visitors see.

Example:

<body>

<h1>Learn HTML</h1>

<p>HTML is used to structure webpages.</p>

<a href="https://www.example.com">Focus360Blog</a>

</body>

In this example:

<h1> creates a main heading.
<p> creates a paragraph.
<a> creates a clickable hyperlink.

You can also include images, lists, tables, forms, videos and many other elements inside the body.

5. Understanding Opening and Closing Tags

Most HTML elements have an opening tag, content and a closing tag.

For example:

<p>This is a paragraph.</p>

Here, <p> is the opening tag, This is a paragraph. is the content, and </p> is the closing tag.

Some elements, such as <img> and <meta>, are void elements and do not have closing tags.

Correctly nesting elements makes your HTML easier to read and maintain.

Practical Example: Create a Complete HTML Webpage

Now let us create a simple webpage that brings the concepts together.

<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1.0">

<title>About Me</title>

</head>

<body>

<h1>About Me</h1>

<p>Hello! Welcome to my first webpage.</p>

<h2>My Interests</h2>

<p>I enjoy learning technology and web development.</p>

<p>I want to learn how to build websites using HTML.</p>

</body>

</html>

Expected Output

When you save this code as index.html and open it in a browser, the page will display:

About Me

Hello! Welcome to my first webpage.

My Interests

I enjoy learning technology and web development.

My Goal

I want to learn how to build websites using HTML.

The headings will appear larger and more prominent than the paragraphs. The browser tab will show the title About Me. The HTML tags themselves will not normally appear as visible text.

How to Run the Code

Open Notepad or another plain-text editor.
Copy and paste the complete HTML code.
Save the file as index.html, selecting an appropriate file type so it is not saved as a .txt file.
Locate the saved file on your computer.
Double-click it to open it in your web browser.

You can edit the text, save the file again and refresh the browser to see your changes.

Common HTML Structure Mistakes

Beginners should avoid these common mistakes:

Forgetting the <!DOCTYPE html> declaration.
Placing visible page content outside the <body> element.
Forgetting closing tags where they are required.
Using an unclear or missing page title.
Omitting the viewport metadata when creating a page intended to work well on mobile devices.
Nesting elements incorrectly.

Following the standard structure helps make webpages easier to understand and maintain.

Practice Exercise

Create a webpage about your favourite hobby.

Set the document title to My Favourite Hobby.
Add a main heading using <h1>.
Write two paragraphs using <p>.
Add a second-level heading using <h2>.
Include the correct DOCTYPE, HTML, head and body elements.
Save the file as hobby.html and open it in your browser.

Check whether the browser tab displays the correct title and the webpage shows all your headings and paragraphs.

Key Takeaways

An HTML document follows a standard structure.
<!DOCTYPE html> declares an HTML5 document.
The <html> element contains the webpage's HTML content.
The <head> section contains metadata and the page title.
The <body> section contains the main visible content.
Correctly nested elements make HTML easier to maintain.
You can create and test an HTML document using a text editor and a web browser.

Next Lesson: How to Create Your First HTML Webpage

In Chapter 3: How to Create Your First HTML Webpage, we will put our knowledge into practice by creating a webpage step by step, adding headings, paragraphs and other basic content.

Continue following the Basic HTML Course on Focus360Blog to develop your web development skills from the ground up.

Previous lesson: Chapter 1 – What Is HTML? A Beginner's Guide Chapter-1

Disclaimer

This article is intended for educational and informational purposes only. The HTML examples are provided to help beginners understand webpage structure and practise basic coding. Browser behaviour and development tools may vary. Readers should test their code in a suitable environment and consult official HTML documentation for further guidance.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML Document Structure Explained with Examples : Chapter 2: Basic HTML Course",
  "description": "Learn HTML document structure, essential tags, head and body sections, metadata, and how to create a complete HTML page.",
  "author": {
    "@type": "Person",
    "name": "Rajiv Dhiman"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Focus360Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.focus360blog.online/images/logo.png"
    }
  },
  "datePublished": "2026-10-24",
  "dateModified": "2026-10-24",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.focus360blog.online/2026/10/html-document-structure-explained-with.html"
  }
}