HTML Basic Structure — The Web Page Skeleton
In the previous lesson we learned what HTML is. Now it is time to write your first real HTML page and understand every part of it precisely. This lesson is the most important lesson in the whole course — because every web page you will build in your life has this same basic structure.
What Does a Complete HTML Page Look Like?
Here is the complete model of any HTML page — look at it calmly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title goes here</title>
</head>
<body>
<h1>Hello! This is the main page heading</h1>
<p>And this is a normal text paragraph.</p>
</body>
</html>
That is all you need! Now we will explain what each line means.
Explaining Each Part — Line by Line
| Tag | What does it do? |
|---|---|
<!DOCTYPE html> |
Always the first line in any page. It tells the browser: "This is a modern HTML5 file — read it the correct way." |
<html> |
The outer wrapper for everything. All page tags go inside it. It is closed at the end of the page with </html>. |
<head> |
The hidden information section. The visitor does not see it directly, but it is very important. It contains the page title, description, and CSS files. |
<meta charset="UTF-8"> |
Tells the browser the text encoding. This is necessary to display characters correctly. |
<title> |
The title shown in the browser tab (and in Google results too). |
<body> |
Everything the visitor sees on the page: text, headings, images, buttons — all go here. |
Only Two Main Sections — head and body
The easiest way to remember HTML structure: imagine the page as a human.
<head>= head: contains the brain and information — not visible from the outside, but it controls everything.<body>= body: what people see — your face, your hands, everything visible to the world.
The golden rule: Anything you want the visitor to see → put it in<body>. Anything related to page settings → put it in<head>.
The lang Attribute — Why Write lang="en"?
You noticed in the example we wrote <html lang="en">.
This attribute tells the browser and search engines that the page language is English.
This is important for three reasons:
- It improves how your page appears in Google search for that language
- It helps screen readers (for visually impaired users) pronounce the text correctly
- It enables correct text direction automatically in some browsers
lang="ar". If it is in French, write lang="fr", and in English lang="en". Not writing it will not break the page, but it is the correct professional practice.
The <meta charset> Tag — The Secret to Correct Text Display
If you ever opened an HTML page and saw strange characters instead of readable text — the problem is most likely the absence of the charset tag.
<!-- ✅ Correct — displays text properly -->
<meta charset="UTF-8">
<!-- ❌ Without this tag you might see ??? or □□□ instead of the text -->
UTF-8 is a universal encoding that supports Arabic, English, Chinese, and all world languages at the same time. Always use it.
Where Do You Write HTML Code?
All you need to start is:
- A text editor: like VS Code (the best and free), or Notepad++, or even plain Notepad
- A browser: Chrome, Firefox, Edge, or any other browser
You write the code in the editor, save the file with a .html extension (for example index.html), then open it in the browser. The result appears instantly.
index.html, copy the first example from this lesson, then open it in the browser. You will see your first page working!
Does the Order Matter? — Absolutely!
The basic HTML structure never changes. The correct order is:
<!DOCTYPE html> ← always first
<html> ← contains everything
<head> ← information and settings
<title>...</title>
</head>
<body> ← content the visitor sees
...
</body>
</html> ← final closing tag
<body> or write <body> before <head>. The browser may tolerate this, but it causes SEO and layout issues. Always stick to the correct order.
Full Practical Example — A Simple Profile Page
Here is a complete HTML page that introduces a person:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bilal's Page — Beginner Web Developer</title>
</head>
<body>
<h1>Hello, I'm Bilal!</h1>
<p>I'm a beginner in web development and I'm learning HTML now.</p>
<p>My goal: build my first site within one month.</p>
</body>
</html>
This page may be simple, but it is 100% correct and will work in any browser. The content grows and evolves with the next lessons — but the structure always stays the same.
Frequently Asked Questions — FAQ
Do I have to write <!DOCTYPE html> in every page?
Yes. This line is required at the top of every HTML file. Without it, the browser may enter an old "compatibility mode" and render the page incorrectly.
Are tags case-sensitive (uppercase/lowercase)?
HTML does not differentiate between <HTML> and <html>. But the agreed rule among developers is to write all tags in lowercase — and that is also what HTML5 standards recommend.
What is the difference between <head> and <header>?
<head> is part of the basic HTML structure and contains hidden information about the page.
<header> is a semantic tag used inside <body> to represent the visible page header (like a logo and menu). We will learn it later.
Do I need to close the <!DOCTYPE html> tag?
No. This tag is an exception — it does not need a closing tag at all. It is just a declaration read once at the beginning.
What does <head> usually contain in real sites?
In professional real sites, <head> contains dozens of lines: CSS files, page description for Google, preview image when sharing, the favicon, and more. We will learn this gradually in the coming lessons.