Complete Web Designing Course for Beginners

🏗️ Lesson 1.2 – Structure of an HTML Document

🌐 Understanding Every Part of an HTML Web Page

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand the complete structure of an HTML document

✅ Understand the purpose of every HTML section

✅ Explain the role of DOCTYPE

✅ Understand <html>, <head>, <title>, and <body> tags

✅ Create a properly structured HTML page

✅ Follow professional HTML coding standards

📖 Introduction

In the previous lesson, we learned:

✅ What HTML is

✅ Why HTML was created

✅ How browsers read HTML

✅ HTML Tags and Elements

Now it’s time to learn something very important.

Before building a webpage, every HTML file must follow a proper structure.

Think of it like building a house.

Every house has:

Foundation
Walls
Roof
Rooms

Similarly, every HTML page has:

DOCTYPE
HTML Tag
Head Section
Body Section

Without proper structure, a webpage may not work correctly.

Therefore, understanding HTML structure is one of the most important skills for every web designer.

🏠 Real Life Example

Imagine writing a letter.

A professional letter contains:

Sender Information

Date

Subject

Message

Signature

Everything follows a proper structure.

Similarly:

Every HTML webpage follows a standard structure.

🌐 Basic Structure of an HTML Document

Every webpage starts with:

<!DOCTYPE html>

<html>

<head>

<title>My First Website</title>

</head>

<body>

<h1>Welcome Students</h1>

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

</body>

</html>

At first glance, this may look confusing.

Don’t worry.

We will understand every line one by one.

🔍 Understanding the Complete Structure

Let’s break the document into parts.

<!DOCTYPE html>

↓

<html>

↓

<head>

↓

<title>

↓

<body>

↓

Visible Content

↓

</body>

↓

</html>

📌 Part 1 – DOCTYPE Declaration

The first line is:

<!DOCTYPE html>

What is DOCTYPE?

DOCTYPE stands for:

Document Type Declaration

It tells the browser:

This webpage is written using HTML5.

Why Is DOCTYPE Important?

Without DOCTYPE:

Different browsers may display webpages differently.

DOCTYPE helps browsers understand:

Use modern HTML standards.

Example

Correct:

<!DOCTYPE html>

Wrong:

<html>

Without DOCTYPE.

Important Note

Every HTML document should start with:

<!DOCTYPE html>

📌 Part 2 – HTML Tag

The second part is:

<html>

</html>

What is the HTML Tag?

The HTML tag is the root element of the webpage.

Everything inside the webpage must be placed between:

<html>

</html>

Think of It As

A container holding the entire webpage.

Example

<html>

All webpage content

</html>

Everything belongs inside this tag.

📌 Part 3 – Head Section

The next section is:

<head>

</head>

What is the Head Section?

The Head Section contains information about the webpage.

Most information inside the head is not directly visible on the webpage.

Examples of Information Stored in Head

Page Title

CSS Links

Meta Tags

Character Encoding

SEO Information

JavaScript Links

Important Point

The Head Section contains information FOR the browser.

Not for the user.

Example

<head>

<title>My Website</title>

</head>

📌 Part 4 – Title Tag

Inside the head section:

<title>My Website</title>

What is the Title Tag?

The Title Tag defines the webpage title.

Where Does It Appear?

Look at the browser tab.

Example:

My Website

appears at the top of the browser.

Example

<title>NextGen Dev Hub</title>

Browser Tab:

NextGen Dev Hub

Why Is Title Important?

It helps:

✅ Identify webpages

✅ Improve SEO

✅ Improve user experience

📌 Part 5 – Body Section

The most important part:

<body>

</body>

What is the Body Section?

Everything visible on the webpage is placed inside the body.

Examples

Visible content:

Headings

Paragraphs

Images

Videos

Buttons

Forms

Tables

Menus

All these go inside the body section.

Example

<body>

<h1>Welcome</h1>

<p>Hello Students</p>

</body>

Browser Output

Welcome

Hello Students

🎯 Simple Analogy

Imagine a Human Body.

HTML = Entire Body

Head = Brain Information

Body = Visible Parts

The user mainly sees the body section.

📦 Complete Structure Visualization

DOCTYPE

↓

HTML

├── HEAD

│   └── TITLE

│
└── BODY

    ├── Headings

    ├── Paragraphs

    ├── Images

    ├── Buttons

    └── Forms

🏗️ Creating a Proper HTML Document

Let’s create a complete webpage.

<!DOCTYPE html>

<html>

<head>

<title>Student Profile</title>

</head>

<body>

<h1>Student Information</h1>

<p>Name: Rahul Kumar</p>

<p>College: XYZ Polytechnic</p>

<p>Branch: Computer Science</p>

</body>

</html>

Output

Student Information

Name: Rahul Kumar

College: XYZ Polytechnic

Branch: Computer Science

🔄 Opening and Closing Tags

Most HTML tags require:

Opening Tag

<body>

Closing Tag

</body>

Example

<p>Hello</p>

Breakdown:

Opening:

<p>

Content:

Hello

Closing:

</p>

⚠️ Common Beginner Mistakes

Mistake 1

Missing Closing Tags

Wrong:

<h1>Welcome

Correct:

<h1>Welcome</h1>

Mistake 2

Writing Content Outside Body

Wrong:

<html>

Hello Students

</html>

Correct:

<body>

Hello Students

</body>

Mistake 3

Forgetting DOCTYPE

Wrong:

<html>

Correct:

<!DOCTYPE html>
<html>

Mistake 4

Placing Visible Content Inside Head

Wrong:

<head>

<h1>Welcome</h1>

</head>

Correct:

<body>

<h1>Welcome</h1>

</body>

🌟 Professional HTML Template

Professional developers often start with:

<!DOCTYPE html>

<html>

<head>

<title>My Website</title>

</head>

<body>

</body>

</html>

This acts as a foundation for every webpage.

🚀 VS Code Shortcut

Inside VS Code:

Type:

and press:

Tab

VS Code automatically generates a complete HTML structure.

This saves time and improves productivity.

📝 Practical Activity

Activity 1

Create a file:

structure.html

Write a complete HTML document.

Add:

Title
One Heading
Two Paragraphs

Run it in Chrome.

Activity 2

Change the title and observe changes in the browser tab.

📋 Assignment

Assignment 1.2

Answer the following questions:

What is DOCTYPE?
Why is DOCTYPE important?
What is the purpose of the HTML tag?
What is the purpose of the Head section?
What is the purpose of the Body section?
Where does the Title Tag appear?
Explain the complete structure of an HTML document.

🧠 Quiz

Q1. Which line should appear first in an HTML document?

A. <body>

B. <head>

C. <!DOCTYPE html>

D. <title>

✅ Answer: C

Q2. Which section contains visible webpage content?

A. Head

B. Title

C. Body

D. HTML

✅ Answer: C

Q3. Which tag defines the webpage title?

A. <body>

B. <title>

C. <html>

D. <p>

✅ Answer: B

Q4. What is the root element of an HTML page?

A. <head>

B. <body>

C. <html>

D. <title>

✅ Answer: C

Q5. Which section mainly contains browser information?

A. Body

B. Head

C. Paragraph

D. Heading

✅ Answer: B

📌 Lesson Summary

✅ Every HTML page follows a standard structure.

✅ <!DOCTYPE html> tells browsers to use HTML5.

✅ <html> is the root element.

✅ <head> contains webpage information.

✅ <title> defines the browser tab title.

✅ <body> contains all visible webpage content.

✅ Proper structure is essential for professional web development.

✅ Understanding HTML structure is the foundation for all future HTML learning.