Class attribute in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a class named "highlight" to the paragraph.

HTML

<p [1]>This is a paragraph.</p>

Drag options to blanks, or click blank then click option'

Aname="highlight"

Bid="highlight"

Cstyle="highlight"

Dclass="highlight"

Attempts:

3 left

💡 Hint

Common Mistakes

Using id instead of class

Using style or name attributes incorrectly

The class attribute is used to assign a class name to an HTML element. Here, class="highlight" adds the class highlight to the paragraph.

2fill in blank

medium

Complete the code to add two classes "btn" and "primary" to the button.

HTML

<button [1]>Click me</button>

Drag options to blanks, or click blank then click option'

Aclass="btn, primary"

Bclass="btn primary"

Cclass="btn; primary"

Dclass="btn-primary"

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas or semicolons between class names

Using hyphens instead of spaces to separate classes

Multiple classes are added by listing them separated by spaces inside the class attribute. So class="btn primary" adds both classes.

3fill in blank

hard

Fix the error in the code to correctly add a class "menu" to the nav element.

HTML

<nav [1]>Main menu</nav>

Drag options to blanks, or click blank then click option'

Aclass=menu

Bclass='menu'

Cclass="menu"

Dclass=menu"

Attempts:

3 left

💡 Hint

Common Mistakes

Missing quotes around the class name

Mismatched or incomplete quotes

The class attribute value must be inside quotes. The correct syntax is class="menu".

4fill in blank

hard

Fill both blanks to add a class "container" to the div and a class "title" to the h1.

HTML

<div [1]>
  <h1 [2]>Welcome</h1>
</div>

Drag options to blanks, or click blank then click option'

Aclass="container"

Bid="container"

Cclass="title"

Did="title"

Attempts:

3 left

💡 Hint

Common Mistakes

Using id instead of class

Mixing up class names between elements

Use the class attribute to add classes. The div gets class="container" and the h1 gets class="title".

5fill in blank

hard

Fill all three blanks to add classes "nav", "active", and "link" to the elements respectively.

HTML

<nav [1]>
  <ul>
    <li class="item"><a [2] href="#">Home</a></li>
    <li><a [3] href="#">About</a></li>
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

Aclass="nav"

Bclass="active"

Cclass="link"

Did="nav"

Attempts:

3 left

💡 Hint

Common Mistakes

Using id instead of class

Forgetting quotes around class names

The nav element gets class="nav", the first a tag gets class="active", and the second a tag gets class="link".