HTML Classes – Solved Practice Questions

By /

Introduction

HTML Classes – The class attribute is used to group multiple HTML elements under the same name. It allows you to apply the same CSS styles or JavaScript functionality to many elements at once. A single class can be reused multiple times on the same webpage.

Question 1

Problem Statement

Create a webpage that assigns the class title to a heading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Class Example</title>
</head>
<body>

    <h1 class="title">Welcome to HTML</h1>

</body>
</html>

Output

Welcome to HTML

Step-by-Step Explanation

  • class="title" assigns the class name title.
  • Classes help identify HTML elements.
  • The same class can be reused on multiple elements.

Question 2

Problem Statement

Create a webpage that assigns the same class to three paragraphs.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Class Example</title>
</head>
<body>

    <p class="info">HTML is easy to learn.</p>

    <p class="info">Practice every day.</p>

    <p class="info">Build small projects regularly.</p>

</body>
</html>

Output

HTML is easy to learn.

Practice every day.

Build small projects regularly.

Step-by-Step Explanation

  • All paragraphs use the same class.
  • One class can be assigned to many elements.
  • This reduces repeated code.

Question 3

Problem Statement

Create a webpage that assigns different classes to two headings.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Different Classes</title>
</head>
<body>

    <h1 class="main-title">HTML Course</h1>

    <h2 class="sub-title">Chapter 15</h2>

</body>
</html>

Output

HTML Course

Chapter 15

Step-by-Step Explanation

  • Different elements can have different class names.
  • Every class can receive different styles later.
  • Class names should describe the purpose of the element.

Question 4

Problem Statement

Create a webpage that assigns the class product to two product names.

HTML Code

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

    <h2 class="product">Laptop</h2>

    <h2 class="product">Keyboard</h2>

</body>
</html>

Output

Laptop

Keyboard

Step-by-Step Explanation

  • Both headings use the same class.
  • The class can later be styled using CSS.
  • This keeps the design consistent.

Question 5

Problem Statement

Create a webpage that assigns the class menu-item to three navigation links.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Navigation Menu</title>
</head>
<body>

    <a href="#" class="menu-item">Home</a><br>

    <a href="#" class="menu-item">About</a><br>

    <a href="#" class="menu-item">Contact</a>

</body>
</html>

Output

Home

About

Contact

Step-by-Step Explanation

  • All navigation links use the same class.
  • The class helps style every menu item together.
  • This is common in website navigation menus.

Question 6

Problem Statement

Create a webpage that assigns the class student to three student names.

HTML Code

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

    <p class="student">Rahul</p>

    <p class="student">Priya</p>

    <p class="student">Ankit</p>

</body>
</html>

Output

Rahul

Priya

Ankit

Step-by-Step Explanation

  • All three paragraphs share the same class.
  • A single class can be reused many times.
  • This keeps similar elements organized.

Question 7

Problem Statement

Create a webpage that assigns the class city to three city names.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>City List</title>
</head>
<body>

    <h2 class="city">Delhi</h2>

    <h2 class="city">Mumbai</h2>

    <h2 class="city">Jaipur</h2>

</body>
</html>

Output

Delhi

Mumbai

Jaipur

Step-by-Step Explanation

  • Every heading uses the same class name.
  • Classes make it easy to identify similar elements.
  • The same class can be applied to unlimited elements.

Question 8

Problem Statement

Create a webpage that assigns two classes (box and highlight) to the same paragraph.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Classes</title>
</head>
<body>

    <p class="box highlight">
        HTML is fun to learn.
    </p>

</body>
</html>

Output

HTML is fun to learn.

Step-by-Step Explanation

  • An element can have more than one class.
  • Multiple class names are separated by a space.
  • Both classes can be styled independently using CSS.

Question 9

Problem Statement

Create a webpage that assigns the class news to two news articles.

HTML Code

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

    <div class="news">
        <h2>Technology News</h2>
        <p>HTML6 is under discussion.</p>
    </div>

    <div class="news">
        <h2>Sports News</h2>
        <p>The local team won the championship.</p>
    </div>

</body>
</html>

Output

Technology News

HTML6 is under discussion.

Sports News

The local team won the championship.

Step-by-Step Explanation

  • Both <div> elements use the same class.
  • The class groups similar sections together.
  • This is useful for blogs, news sites, and cards.

Question 10

Problem Statement

Create a webpage that uses the class course for three course cards.

HTML Code

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

    <div class="course">
        <h2>HTML</h2>
        <p>Beginner Level</p>
    </div>

    <div class="course">
        <h2>CSS</h2>
        <p>Intermediate Level</p>
    </div>

    <div class="course">
        <h2>JavaScript</h2>
        <p>Advanced Level</p>
    </div>

</body>
</html>

Output

HTML

Beginner Level

CSS

Intermediate Level

JavaScript

Advanced Level

Step-by-Step Explanation

  • Each course card uses the same class name.
  • The class helps apply the same design to all cards.
  • This approach is widely used in modern websites.

Key Takeaways

  • The class attribute groups similar HTML elements.
  • A class can be used on multiple elements.
  • An element can have one or more classes.
  • Multiple class names are separated by spaces.
  • Classes are mainly used with CSS and JavaScript.
  • Meaningful class names make code easier to understand and maintain.

Frequently Asked Questions (FAQs)

1. What is the class attribute in HTML?

The class attribute is used to group one or more HTML elements under the same name.

2. Can multiple elements have the same class?

Yes. A class can be reused on any number of elements.

3. Can one element have multiple classes?

Yes. Separate multiple class names with a space.

Example:

class="box highlight"

4. Is the class attribute case-sensitive?

Yes. title and Title are treated as different class names.

5. Why is the class attribute used?

It helps apply the same CSS styles or JavaScript functionality to multiple elements.

6. Can different HTML tags use the same class?

Yes. For example, <h1>, <p>, and <div> can all use the same class name.

7. What are some good practices for naming classes?

Use short, meaningful names such as header, menu, product, card, or footer.

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

Related Posts

Scroll to Top