HTML Document Structure
When you write any HTML page, it's
important to follow a proper structure so that browsers (like Chrome, Firefox,
or Safari) can correctly interpret and display your content. Think of it like
the skeleton of a house – it provides the framework that holds everything
together.
Here’s a breakdown of the basic HTML
document structure and what each part does:
1.
<!DOCTYPE html>
This is the Document Type
Declaration. It tells the web browser that you are writing an HTML5 document
(the latest version of HTML).
It's always the first line in your HTML file.
<!DOCTYPE
html>
2.
<html> Tag
This is the root element of
the entire HTML document. Every other HTML element should be written inside
this tag.
<html>
<!-- All HTML content goes here -->
</html>
3.
<head> Section
The <head> contains meta-information about the webpage. It
doesn't display anything on the page itself, but it tells the browser how to
handle and render the page.
Here are some common tags inside the
<head> section:
<head>
<meta charset="UTF-8"> <!--
Sets character encoding -->
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <!-- Makes the site responsive -->
<title>My First Web Page</title> <!--
Title shown on browser tab -->
<link rel="stylesheet" href="styles.css">
<!-- Link to CSS file -->
</head>
4.
<body> Section
This is where the visible content
of the webpage goes – headings, paragraphs, images, buttons, etc. Everything
you want users to see must be placed inside the <body>.
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage structure
using HTML.</p>
</body>
5.
Complete Example
Here’s how the complete structure
looks when everything is put together:
<!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>Hello, World!</h1>
<p>This is my first webpage using
proper HTML structure.</p>
</body>
</html>
✅
Tips for Beginners
- Always use proper indentation to make your code easier
to read.
- Make sure every opening tag has a corresponding closing
tag (except self-closing tags like <img> and <br>).
- Keep practicing by creating small HTML pages with
headings, lists, and links.