Every HTML page follows a basic structure. Understanding this structure is important because it tells the browser how to read and display your content.
In this tutorial, you'll learn how an HTML document is organized and where different parts of a webpage belong.
HTML structure helps the browser understand:
A properly structured HTML page:
Before adding text, images, or links, you need to understand the layout of an HTML document.
Tells the browser this is an HTML document. It appears at the very top.
Wraps everything on the page. All content lives inside this container.
Contains page information (title, description, encoding) - not visible to users.
Contains all visible content (headings, paragraphs, images, links).
An HTML document is divided into three main parts:
Each part has a specific role.
The document type tells the browser:
It appears at the very top of the file.
Beginners don't need to memorize it right now — just know that it helps the browser understand the page correctly.
The HTML container wraps everything on the page.
It tells the browser:
"Everything inside belongs to this webpage."
All visible and invisible content lives inside this main container.
The head section contains information about the page, not visible content.
It is used for:
The head helps browsers, search engines, and devices understand what the page is about. Even though users don't see it, the head section is very important.
The body section contains everything visible on the page.
This includes:
When you write content that users should see, it belongs in the body section.
The browser reads HTML in this order:
If the structure is missing or confusing, the browser may still try to display the page, but results can be unpredictable.
As a beginner, you don't always need to write the full structure.
Many learning tools (like the HTML Live Preview Tool) automatically handle the full structure for you.
You can focus on writing:
The tool wraps them correctly so you can practice without worrying about mistakes in the document structure.
It's normal to:
These mistakes are part of learning. Understanding structure early helps avoid them later.
Without a clean structure, styling becomes harder.
That's why learning document structure early is important.
After reading this tutorial:
Use the HTML Live Preview Tool to practice without worrying about mistakes.
Now that you understand the structure of an HTML document, the next step is learning HTML tags.
Tags are what actually define headings, paragraphs, links, and more.
Next Tutorial: HTML Tags Explained