Introduction
Every HTML webpage follows a basic document structure. Before creating websites, you should understand how an HTML Document Structure is organized. In this chapter, you’ll practice writing the basic HTML structure through 10 solved questions. These examples are beginner-friendly and will help you build a strong foundation.
Question 1
Problem Statement
Create a basic HTML webpage with the title My First Webpage and display the text Welcome to HTML inside the webpage.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>
Output
Welcome to HTML
Step-by-Step Explanation
<!DOCTYPE html>tells the browser that this is an HTML5 document.<html>is the root element of the webpage.<head>contains information about the webpage.<title>sets the page title shown in the browser tab.<body>contains the content displayed on the webpage.<h1>creates the main heading.
Question 2
Problem Statement
Create a webpage with the title Student Profile and display your name and class.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Student Profile</title>
</head>
<body>
<h1>Rohan Sharma</h1>
<p>Class: 10</p>
</body>
</html>
Output
Rohan Sharma
Class: 10
Step-by-Step Explanation
- The page title is Student Profile.
<h1>displays the student’s name.<p>creates a paragraph for the class.- All visible content is placed inside the
<body>tag.
Question 3
Problem Statement
Create a webpage titled My School and display the school name and a welcome message.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My School</title>
</head>
<body>
<h1>Green Valley Public School</h1>
<p>Welcome to our school website.</p>
</body>
</html>
Output
Green Valley Public School
Welcome to our school website.
Step-by-Step Explanation
- The webpage title appears in the browser tab.
<h1>displays the school name.<p>shows a short welcome message.- The document follows the standard HTML structure.
Question 4
Problem Statement
Create a webpage for a restaurant. Display the restaurant name as a heading and a short description below it.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Tasty Bites</title>
</head>
<body>
<h1>Tasty Bites Restaurant</h1>
<p>Fresh food served every day.</p>
</body>
</html>
Output
Tasty Bites Restaurant
Fresh food served every day.
Step-by-Step Explanation
- The browser tab displays Tasty Bites.
- The restaurant name is shown using
<h1>. - The description is written inside a paragraph.
- This example uses the basic HTML document structure correctly.
Question 5
Problem Statement
Create a webpage titled Travel Blog and display a heading and one paragraph about your favorite destination.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Travel Blog</title>
</head>
<body>
<h1>My Favorite Destination</h1>
<p>I love visiting the mountains because the weather is peaceful and refreshing.</p>
</body>
</html>
Output
My Favorite Destination
I love visiting the mountains because the weather is peaceful and refreshing.
Step-by-Step Explanation
<title>sets the browser tab title.<h1>displays the blog heading.<p>contains the travel description.- All content is placed inside the
<body>element.
Question 6
Problem Statement
Create a webpage for a bookstore. Display the bookstore name as the main heading and add a short description below it.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Book Store</title>
</head>
<body>
<h1>Knowledge Book Store</h1>
<p>Find books for students, professionals, and book lovers.</p>
</body>
</html>
Output
Knowledge Book Store
Find books for students, professionals, and book lovers.
Step-by-Step Explanation
<!DOCTYPE html>defines the document as HTML5.<title>displays Book Store in the browser tab.<h1>shows the bookstore name.<p>displays a short description.- Everything visible is written inside the
<body>tag.
Question 7
Problem Statement
Create a webpage for a personal portfolio. Display your name as the main heading and write a short introduction below it.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Rahul Verma</h1>
<p>Hello! I am learning HTML and building my first website.</p>
</body>
</html>
Output
Rahul Verma
Hello! I am learning HTML and building my first website.
Step-by-Step Explanation
- The webpage title is My Portfolio.
<h1>displays the person’s name.<p>is used to write a short introduction.- The HTML document follows the correct structure.
Question 8
Problem Statement
Create a webpage for a company. Display the company name and a welcome message.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>ABC Technologies</title>
</head>
<body>
<h1>ABC Technologies</h1>
<p>Welcome to our official company website.</p>
</body>
</html>
Output
ABC Technologies
Welcome to our official company website.
Step-by-Step Explanation
<title>sets the browser tab title.<h1>displays the company name.<p>displays a welcome message.- All webpage content is placed inside the
<body>tag.
Question 9
Problem Statement
Create a webpage for a gym. Display the gym name and a motivational sentence.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fitness Club</title>
</head>
<body>
<h1>Fitness Club</h1>
<p>Your fitness journey starts today.</p>
</body>
</html>
Output
Fitness Club
Your fitness journey starts today.
Step-by-Step Explanation
- The page title is Fitness Club.
<h1>displays the gym name.<p>displays a motivational message.- The document uses the standard HTML structure.
Question 10
Problem Statement
Create a webpage for an online course. Display the course name as the main heading and write a short course description.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Course</title>
</head>
<body>
<h1>Complete HTML Course</h1>
<p>Learn HTML from basic to advanced with solved practice questions.</p>
</body>
</html>
Output
Complete HTML Course
Learn HTML from basic to advanced with solved practice questions.
Step-by-Step Explanation
<!DOCTYPE html>tells the browser to use HTML5.<title>sets HTML Course as the browser tab title.<h1>displays the course name.<p>provides a short description of the course.- The webpage follows the correct HTML document structure.
Key Takeaways
- Every HTML page starts with
<!DOCTYPE html>. - The
<html>tag is the root element of the webpage. - The
<head>section stores page information like the title. - The
<title>tag changes the text shown in the browser tab. - The
<body>section contains everything visible on the webpage. - A well-structured HTML document is easier to read and maintain.
Frequently Asked Questions (FAQs)
1. Why do we use <!DOCTYPE html>?
It tells the browser that the webpage uses the HTML5 standard.
2. Which tag contains all the visible content?
The <body> tag contains all the content displayed on the webpage.
3. What is the purpose of the <head> tag?
The <head> tag stores information about the webpage, such as the title and metadata. It does not display content on the page.
4. What is the difference between <title> and <h1>?
<title> appears in the browser tab, while <h1> appears on the webpage as the main heading.
5. Is the <title> tag required?
Yes. Every webpage should have a meaningful title for better SEO and user experience.
6. Can a webpage have more than one <body> tag?
No. An HTML document should contain only one <body> element.
7. What is the root element of an HTML document?
The <html> tag is the root element because it contains all other HTML elements.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
