HTML Headings – Solved Practice Questions

By /

Introduction

HTML headings are used to create titles and subtitles on a webpage. HTML provides six heading tags, from <h1> to <h6>. In this chapter, you’ll practice using different heading levels through simple, real-world examples to understand when and where each heading should be used.

Question 1

Problem Statement

Create a webpage that displays “Welcome to HTML” as the main heading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Main Heading</title>
</head>
<body>

    <h1>Welcome to HTML</h1>

</body>
</html>

Output

Welcome to HTML

Step-by-Step Explanation

  • <h1> creates the largest heading.
  • It is usually used for the main title of a webpage.
  • The heading is displayed inside the <body> section.

Question 2

Problem Statement

Create a webpage that displays a website name using <h1> and a tagline using <h2>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Website Heading</title>
</head>
<body>

    <h1>Code Master</h1>

    <h2>Learn Programming the Easy Way</h2>

</body>
</html>

Output

Code Master

Learn Programming the Easy Way

Step-by-Step Explanation

  • <h1> displays the website name.
  • <h2> is used for the tagline.
  • <h2> is smaller than <h1>.
  • Different heading levels help organize content.

Question 3

Problem Statement

Create a student profile page that displays the student’s name as the main heading and the class as a subheading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Profile</title>
</head>
<body>

    <h1>Rahul Sharma</h1>

    <h2>Class 10</h2>

</body>
</html>

Output

Rahul Sharma

Class 10

Step-by-Step Explanation

  • <h1> displays the student’s name.
  • <h2> displays the class.
  • Headings make information easy to read.
  • The browser automatically styles heading tags.

Question 4

Problem Statement

Create a restaurant webpage that displays the restaurant name and a menu section heading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Restaurant</title>
</head>
<body>

    <h1>Food Corner</h1>

    <h2>Today's Menu</h2>

</body>
</html>

Output

Food Corner

Today's Menu

Step-by-Step Explanation

  • <h1> displays the restaurant name.
  • <h2> introduces the menu section.
  • Headings help divide a webpage into sections.
  • Larger headings should appear before smaller headings.

Question 5

Problem Statement

Create a news webpage with a main heading and two subheadings.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Daily News</title>
</head>
<body>

    <h1>Daily News</h1>

    <h2>National News</h2>

    <h2>Sports News</h2>

</body>
</html>

Output

Daily News

National News

Sports News

Step-by-Step Explanation

  • <h1> is used for the newspaper name.
  • Each <h2> represents a different news section.
  • Multiple headings of the same level can be used.
  • This structure makes the page organized.

Question 6

Problem Statement

Create a blog webpage that displays the blog name, article title, and article section using <h1>, <h2>, and <h3>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My Blog</title>
</head>
<body>

    <h1>Tech Learning Blog</h1>

    <h2>HTML Headings Explained</h2>

    <h3>Why Are Headings Important?</h3>

</body>
</html>

Output

Tech Learning Blog

HTML Headings Explained

Why Are Headings Important?

Step-by-Step Explanation

  • <h1> displays the blog name.
  • <h2> displays the article title.
  • <h3> displays a section inside the article.
  • Heading levels should follow a proper order.

Question 7

Problem Statement

Create a product page that displays the store name, product category, product name, and product model using four different heading tags.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Product Details</title>
</head>
<body>

    <h1>Tech Store</h1>

    <h2>Laptops</h2>

    <h3>Dell Inspiron</h3>

    <h4>Model: 15 3530</h4>

</body>
</html>

Output

Tech Store

Laptops

Dell Inspiron

Model: 15 3530

Step-by-Step Explanation

  • <h1> displays the store name.
  • <h2> displays the product category.
  • <h3> displays the product name.
  • <h4> displays additional product information.

Question 8

Problem Statement

Create a webpage that displays all six HTML heading tags from <h1> to <h6>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>All Heading Tags</title>
</head>
<body>

    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <h3>Heading 3</h3>

    <h4>Heading 4</h4>

    <h5>Heading 5</h5>

    <h6>Heading 6</h6>

</body>
</html>

Output

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Step-by-Step Explanation

  • HTML provides six heading levels.
  • <h1> is the largest heading.
  • <h6> is the smallest heading.
  • Choose the heading level based on the importance of the content.

Question 9

Problem Statement

Create an online course webpage that displays the course name, module name, lesson name, and topic name using heading tags.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Course</title>
</head>
<body>

    <h1>Complete HTML Course</h1>

    <h2>Module 1: HTML Basics</h2>

    <h3>Lesson 1: HTML Headings</h3>

    <h4>Topic: Using h1 to h6 Tags</h4>

</body>
</html>

Output

Complete HTML Course

Module 1: HTML Basics

Lesson 1: HTML Headings

Topic: Using h1 to h6 Tags

Step-by-Step Explanation

  • <h1> displays the course title.
  • <h2> displays the module name.
  • <h3> displays the lesson name.
  • <h4> displays the topic name.
  • Different heading levels create a clear content hierarchy.

Question 10

Problem Statement

Create a company webpage that displays the company name, department, team, project, and task using heading tags.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Company Structure</title>
</head>
<body>

    <h1>ABC Technologies</h1>

    <h2>Web Development Department</h2>

    <h3>Frontend Team</h3>

    <h4>E-Commerce Website</h4>

    <h5>Homepage Design</h5>

</body>
</html>

Output

ABC Technologies

Web Development Department

Frontend Team

E-Commerce Website

Homepage Design

Step-by-Step Explanation

  • <h1> displays the company name.
  • <h2> displays the department.
  • <h3> displays the team.
  • <h4> displays the project.
  • <h5> displays the task under the project.

Key Takeaways

  • HTML provides six heading tags: <h1> to <h6>.
  • <h1> is the most important heading.
  • <h6> is the smallest heading.
  • Headings help organize webpage content.
  • Use heading levels in the correct order whenever possible.
  • A well-structured heading hierarchy improves readability and SEO.

Frequently Asked Questions (FAQs)

1. How many heading tags are available in HTML?

HTML provides six heading tags: <h1> to <h6>.

2. Which is the largest heading tag?

<h1> is the largest and most important heading tag.

3. Which is the smallest heading tag?

<h6> is the smallest heading tag.

4. Can I use multiple <h2> tags on a webpage?

Yes. You can use multiple <h2> tags for different sections of a webpage.

5. Should every webpage have an <h1> tag?

Yes. It is recommended to use one main <h1> heading that describes the page content.

6. Do heading tags automatically make text bold?

Yes. Browsers display heading tags as bold text by default.

7. Why are heading tags important for SEO?

Heading tags help search engines understand the structure and main topics of a webpage.

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

Related Posts

Scroll to Top