HTML Basics
HTML Structure
Every web page on the internet follows a specific HTML structure.
This structure defines how a browser reads and displays the page’s content - from the title at the top to the last paragraph at the bottom.
In this article you will learn about the basic structure of HTML.
What Is the Basic Structure of an HTML Document?
An HTML document is made up of elements (tags) that tell the browser what to show and how to organize it.
Here’s the basic skeleton of every HTML page:
HTML Basic Structure
html
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML document structure.</p>
</body>
</html>Let’s break this down step by step
<!DOCTYPE html> - Document Type Declaration
This line tells the browser that the page uses HTML5, the latest version of HTML.
It must always appear at the very top of every HTML document.
html
<!DOCTYPE html>Without it, browsers might not interpret your page correctly.
<html> - Root Element
The <html> tag wraps all other elements and defines the start and end of the document
html
<html>
... all your content goes here ...
</html>Everything you want to display on the webpage lives inside this tag.
<head> - Head Section
The <head> contains metadata (information about the page that isn’t shown directly on the webpage).
It usually includes:
- The page title
- Meta tags (description, keywords, viewport)
- Links to CSS files or favicons
- Scripts to run before the page loads
html
<head>
<title>My First Page</title>
<meta charset="UTF-8">
<meta name="description" content="A simple HTML structure example">
</head><title> - Title Tag
The <title> tag sets the text that appears:
- On the browser tab
- As the page title in search results
html
<title>My Web Page</title><body> - Body Section
The <body> contains everything visible on your web page - like text, images, links, tables, and forms.
html
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>Complete Example with Explanation
Here’s how a simple, complete HTML document looks:
HTML Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to HTML Structure</h1>
<p>This example shows the essential building blocks of an HTML document.</p>
</body>
</html>- The
<!DOCTYPE html>ensures HTML5 compatibility. - The
<html>wraps the entire content. - The
<head>defines page info. - The
<body>holds the visible content.
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion
The structure of an HTML document forms the foundation of every web page.
Once you understand where each element belongs, building pages becomes much easier.
Always remember: the browser reads your HTML from top to bottom, so order matters!