Complete HTML Project - Solved Practice Questions

Introduction

A complete HTML project combines everything you’ve learned throughout this course, including headings, paragraphs, links, images, lists, tables, forms, semantic elements, multimedia, and responsive design. These practice questions help you build real-world webpages while reinforcing HTML fundamentals. By the end of this chapter, you’ll be able to create a complete static website using only HTML.

Question 1

Problem Statement

Create a simple personal portfolio homepage using HTML.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Portfolio</title>
</head>
<body>

<header>

    <h1>John Smith</h1>

    <p>Web Developer</p>

</header>

<main>

    <h2>About Me</h2>

    <p>I enjoy building websites using HTML.</p>

</main>

<footer>

    <p>© 2026 John Smith</p>

</footer>

</body>
</html>

Output

John Smith

Web Developer

About Me

I enjoy building websites using HTML.

© 2026 John Smith

Step-by-Step Explanation

<header> contains the website introduction.
<main> displays the primary content.
<footer> contains copyright information.

Question 2

Problem Statement

Create a basic company homepage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Company Website</title>
</head>
<body>

<header>

    <h1>ABC Technologies</h1>

</header>

<nav>

    <a href="#">Home</a> |
    <a href="#">Services</a> |
    <a href="#">Contact</a>

</nav>

<main>

    <h2>Welcome</h2>

    <p>We provide web development services.</p>

</main>

<footer>

    <p>Email: info@example.com</p>

</footer>

</body>
</html>

Output

ABC Technologies

Home | Services | Contact

Welcome

We provide web development services.

Email: info@example.com

Step-by-Step Explanation

Navigation links are grouped using <nav>.
<main> contains business information.
<footer> displays contact details.

Question 3

Problem Statement

Create a student profile webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Student Profile</title>
</head>
<body>

<h1>Student Profile</h1>

<img
src="student.jpg"
alt="Student"
width="150">

<h2>Name</h2>

<p>Rahul Sharma</p>

<h2>Course</h2>

<p>HTML & Web Development</p>

</body>
</html>

Output

Student Profile

[Student Image]

Name

Rahul Sharma

Course

HTML &amp; Web Development

Step-by-Step Explanation

The image is displayed using <img>.
Headings organize profile information.
Paragraphs display the details.

Question 4

Problem Statement

Create a restaurant menu webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Restaurant Menu</title>
</head>
<body>

<h1>Restaurant Menu</h1>

<ul>

<li>Pizza</li>

<li>Burger</li>

<li>Pasta</li>

<li>Cold Coffee</li>

</ul>

</body>
</html>

Output

Restaurant Menu

• Pizza

• Burger

• Pasta

• Cold Coffee

Step-by-Step Explanation

<ul> creates an unordered list.
<li> represents each menu item.
Lists are useful for displaying grouped information.

Question 5

Problem Statement

Create a product details webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Product Page</title>
</head>
<body>

<h1>Laptop</h1>

<img
src="laptop.jpg"
alt="Laptop"
width="250">

<p>Price: ₹55,000</p>

<p>Brand: ABC</p>

<p>Warranty: 1 Year</p>

</body>
</html>

Output

Laptop

[Laptop Image]

Price: ₹55,000

Brand: ABC

Warranty: 1 Year

Step-by-Step Explanation

Images display product photos.
Paragraphs show product details.
HTML provides a clean product layout.

Question 6

Problem Statement

Create a student registration webpage using an HTML form.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Student Registration</title>
</head>
<body>

<h1>Student Registration</h1>

<form>

<label>Name:</label>
<input type="text"><br><br>

<label>Email:</label>
<input type="email"><br><br>

<label>Course:</label>
<input type="text"><br><br>

<input type="submit" value="Register">

</form>

</body>
</html>

Output

Student Registration

Name:   __________

Email:  __________

Course: __________

[Register]

Step-by-Step Explanation

<form> creates a form.
<label> identifies each field.
<input> collects user information.
The submit button sends the form data.

Question 7

Problem Statement

Create a simple class timetable webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Class Timetable</title>
</head>
<body>

<h1>Class Timetable</h1>

<table border="1">

<tr>
<th>Day</th>
<th>Subject</th>
</tr>

<tr>
<td>Monday</td>
<td>HTML</td>
</tr>

<tr>
<td>Tuesday</td>
<td>CSS</td>
</tr>

<tr>
<td>Wednesday</td>
<td>JavaScript</td>
</tr>

</table>

</body>
</html>

Output

-------------------------
Day        Subject
-------------------------
Monday     HTML
Tuesday    CSS
Wednesday  JavaScript

Step-by-Step Explanation

<table> creates the timetable.
<tr> defines table rows.
<th> creates headings.
<td> stores table data.

Question 8

Problem Statement

Create a simple blog homepage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>

<header>

<h1>My Tech Blog</h1>

</header>

<article>

<h2>Introduction to HTML</h2>

<p>HTML is the foundation of every webpage.</p>

</article>

<footer>

<p>Thanks for reading!</p>

</footer>

</body>
</html>

Output

My Tech Blog

Introduction to HTML

HTML is the foundation of every webpage.

Thanks for reading!

Step-by-Step Explanation

<article> contains the blog post.
<header> displays the blog title.
<footer> provides additional information.

Question 9

Problem Statement

Create a course information webpage using semantic HTML.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Course Information</title>
</head>
<body>

<header>

<h1>HTML Course</h1>

</header>

<main>

<section>

<h2>Course Details</h2>

<p>Learn HTML from beginner to advanced level.</p>

</section>

<section>

<h2>Duration</h2>

<p>6 Weeks</p>

</section>

</main>

<footer>

<p>Enroll Today!</p>

</footer>

</body>
</html>

Output

HTML Course

Course Details

Learn HTML from beginner to advanced level.

Duration

6 Weeks

Enroll Today!

Step-by-Step Explanation

<header> introduces the course.
<main> contains the primary content.
<section> groups related information.
<footer> displays a call to action.

Question 10

Problem Statement

Create a complete mini website using the HTML concepts learned in this course.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width, initial-scale=1.0">

<title>Mini HTML Website</title>

</head>
<body>

<header>

<h1>Learn HTML</h1>

<nav>

<a href="#">Home</a> |
<a href="#">Courses</a> |
<a href="#">Gallery</a> |
<a href="#">Contact</a>

</nav>

</header>

<main>

<section>

<h2>About HTML</h2>

<p>HTML is the standard language for creating web pages.</p>

<img
src="html.jpg"
alt="HTML"
width="250">

</section>

<section>

<h2>Popular Topics</h2>

<ul>

<li>HTML Elements</li>

<li>HTML Forms</li>

<li>HTML Tables</li>

<li>HTML Semantic Tags</li>

</ul>

</section>

</main>

<footer>

<p>© 2026 Learn HTML</p>

</footer>

</body>
</html>

Output

Learn HTML

Home | Courses | Gallery | Contact

About HTML

HTML is the standard language for creating web pages.

[HTML Image]

Popular Topics

• HTML Elements
• HTML Forms
• HTML Tables
• HTML Semantic Tags

© 2026 Learn HTML

Step-by-Step Explanation

The webpage combines headings, navigation, images, lists, and semantic elements.
<header> contains the website title and navigation.
<main> organizes the primary content.
<section> groups related topics.
<footer> displays copyright information.
This example demonstrates a complete beginner-friendly HTML project.

Key Takeaways

A complete HTML project combines multiple HTML elements.
Semantic tags improve webpage structure and accessibility.
Navigation helps users move between pages.
Forms collect user input.
Tables organize structured data.
Images make webpages more engaging.
Lists present information clearly.
Meta tags improve responsiveness and SEO.
A well-structured layout improves readability and user experience.
Building projects is the best way to strengthen HTML skills.

Frequently Asked Questions (FAQs)

1. What is a complete HTML project?

A complete HTML project combines different HTML elements to build a functional static webpage.

2. Which HTML elements are commonly used in a project?

Headings, paragraphs, images, links, lists, tables, forms, and semantic elements.

3. Why should I use semantic HTML?

Semantic HTML improves accessibility, SEO, and code readability.

4. Do I need CSS to create an HTML project?

No. HTML alone creates the structure, while CSS is used to style the webpage.

5. Can I build a website using only HTML?

Yes. You can build a static website using only HTML, but CSS and JavaScript are needed for styling and interactivity.

6. Why are forms important?

Forms allow users to submit information such as names, emails, and feedback.

7. What is the purpose of the `<nav>` element?

It groups navigation links for easier website navigation.

8. Should every webpage have a `<header>` and `<footer>`?

Not every page must include them, but they are commonly used in modern website layouts.

9. What is the next step after learning HTML?

The next step is learning CSS for styling and JavaScript for interactivity.

10. How can I improve my HTML skills?

Practice regularly by creating real-world projects and experimenting with different HTML elements.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Introduction

Question 1

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 2

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 3

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 4

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 5

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 6

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 7

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 8

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 9

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 10

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Key Takeaways

Frequently Asked Questions (FAQs)

1. What is a complete HTML project?

2. Which HTML elements are commonly used in a project?

3. Why should I use semantic HTML?

4. Do I need CSS to create an HTML project?

5. Can I build a website using only HTML?

6. Why are forms important?

7. What is the purpose of the <nav> element?

8. Should every webpage have a <header> and <footer>?

9. What is the next step after learning HTML?

10. How can I improve my HTML skills?

Related Posts

7. What is the purpose of the `<nav>` element?

8. Should every webpage have a `<header>` and `<footer>`?