Introduction
HTML elements are the building blocks of every webpage. An HTML element usually consists of a start tag, content, and an end tag. In this chapter, you’ll practice creating different HTML elements through simple solved questions. These examples will help you understand how HTML elements work in real webpages.
Question 1
Problem Statement
Create a webpage that displays a main heading and a paragraph introducing HTML.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>HTML is the standard language used to create web pages.</p>
</body>
</html>
Output
Learn HTML
HTML is the standard language used to create web pages.
Step-by-Step Explanation
<h1>creates the main heading.<p>creates a paragraph.- Both are HTML elements.
- The browser displays them inside the
<body>section.
Question 2
Problem Statement
Create a webpage that displays two headings and one paragraph.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Multiple Elements</title>
</head>
<body>
<h1>My Website</h1>
<h2>About Us</h2>
<p>We provide free HTML learning resources.</p>
</body>
</html>
Output
My Website
About Us
We provide free HTML learning resources.
Step-by-Step Explanation
<h1>displays the main heading.<h2>creates a subheading.<p>displays the paragraph.- HTML elements are displayed in the order they are written.
Question 3
Problem Statement
Create a webpage that displays your name, your city, and your favorite hobby using HTML elements.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
</head>
<body>
<h1>Rahul Sharma</h1>
<p>City: Delhi</p>
<p>Hobby: Playing Cricket</p>
</body>
</html>
Output
Rahul Sharma
City: Delhi
Hobby: Playing Cricket
Step-by-Step Explanation
<h1>displays the person’s name.- The first
<p>displays the city. - The second
<p>displays the hobby. - Multiple paragraph elements can be used on the same webpage.
Question 4
Problem Statement
Create a webpage for a restaurant that displays the restaurant name and two menu items.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<h1>Food Corner</h1>
<p>Pizza</p>
<p>Burger</p>
</body>
</html>
Output
Food Corner
Pizza
Burger
Step-by-Step Explanation
<h1>displays the restaurant name.- Each menu item is written using a separate
<p>element. - HTML elements help organize webpage content.
- The browser displays each paragraph on a new line.
Question 5
Problem Statement
Create a webpage that displays a book title and its author.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Book Details</title>
</head>
<body>
<h1>Atomic Habits</h1>
<p>Author: James Clear</p>
</body>
</html>
Output
Atomic Habits
Author: James Clear
Step-by-Step Explanation
<h1>displays the book title.<p>displays the author’s name.- Both are common HTML elements.
- The content appears inside the webpage body.
Question 6
Problem Statement
Create a webpage that displays your school name, class, and section using HTML elements.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>School Details</title>
</head>
<body>
<h1>Green Valley Public School</h1>
<p>Class: 10</p>
<p>Section: A</p>
</body>
</html>
Output
Green Valley Public School
Class: 10
Section: A
Step-by-Step Explanation
<h1>displays the school name.- The first
<p>element shows the class. - The second
<p>element shows the section. - Each piece of information is placed inside its own HTML element.
Question 7
Problem Statement
Create a webpage that displays the name of a mobile phone and its price.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Mobile Details</title>
</head>
<body>
<h1>Samsung Galaxy S25</h1>
<p>Price: ₹74,999</p>
</body>
</html>
Output
Samsung Galaxy S25
Price: ₹74,999
Step-by-Step Explanation
<h1>displays the product name.<p>displays the product price.- Both are separate HTML elements.
- The browser shows them in the same order as the code.
Question 8
Problem Statement
Create a webpage that displays a movie name and its release year.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Movie Information</title>
</head>
<body>
<h1>3 Idiots</h1>
<p>Release Year: 2009</p>
</body>
</html>
Output
3 Idiots
Release Year: 2009
Step-by-Step Explanation
<h1>displays the movie name.<p>displays the release year.- HTML elements help organize information neatly.
- Everything visible is inside the
<body>element.
Question 9
Problem Statement
Create a webpage that displays the name of a course and its duration.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Course Details</title>
</head>
<body>
<h1>Complete HTML Course</h1>
<p>Duration: 2 Months</p>
</body>
</html>
Output
Complete HTML Course
Duration: 2 Months
Step-by-Step Explanation
<h1>displays the course name.<p>displays the course duration.- Both are commonly used HTML elements.
- The browser renders them inside the webpage body.
Question 10
Problem Statement
Create a webpage that displays your favorite sport and your favorite player.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Favorite Sport</title>
</head>
<body>
<h1>Cricket</h1>
<p>Favorite Player: Virat Kohli</p>
</body>
</html>
Output
Cricket
Favorite Player: Virat Kohli
Step-by-Step Explanation
<h1>displays the sport name.<p>displays the player’s name.- Different HTML elements are used to organize webpage content.
- The webpage follows the correct HTML document structure.
Key Takeaways
- HTML elements are the building blocks of every webpage.
- Most HTML elements have an opening tag and a closing tag.
<h1>is commonly used for the main heading.<p>is used to display paragraphs.- Multiple HTML elements can be used on the same webpage.
- Elements are displayed in the order they are written in the HTML document.
Frequently Asked Questions (FAQs)
1. What is an HTML element?
An HTML element is a complete piece of HTML that usually includes an opening tag, content, and a closing tag.
2. Are HTML tags and HTML elements the same?
No. A tag is part of an element. An HTML element includes the opening tag, content, and closing tag.
3. Which HTML element displays the main heading?
The <h1> element displays the main heading of a webpage.
4. Which HTML element is used for paragraphs?
The <p> element is used to display paragraphs.
5. Can I use multiple paragraph elements on one page?
Yes. You can use as many <p> elements as needed.
6. Do all HTML elements have a closing tag?
No. Some elements, such as <br> and <hr>, do not require a closing tag.
7. Can I place one HTML element inside another?
Yes. For example, you can place <h1> and <p> elements inside the <body> element.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
