ID attribute in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an ID attribute to the <div> element.

HTML

<div [1]="header">Welcome!</div>

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

Aid

Bclass

Cstyle

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id

Forgetting the attribute name

Using style or name attributes incorrectly

The ID attribute is added using id="value" inside the tag.

2fill in blank

medium

Complete the code to link a label to an input using the ID attribute.

HTML

<label for="[1]">Name:</label>
<input type="text" id="nameInput">

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

AuserName

BinputName

CnameInput

DtextInput

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching the for and id values

Using class instead of id

Leaving the for attribute empty

The label's for attribute must match the input's id exactly.

3fill in blank

hard

Fix the error in the code by completing the ID attribute correctly.

HTML

<section [1]="main-section">Content here</section>

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

Aname

Bclass

Cstyle

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the attribute value

Using class instead of id

Missing the attribute name

The id attribute value must be in quotes: id="main-section".

4fill in blank

hard

Fill both blanks to create a button with an ID and a label linked to it.

HTML

<label for="[1]">Click me</label>
<button [2]="btn1">Press</button>

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

Abtn1

Bbutton

Cid

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching for and id values

Using class instead of id

Leaving one attribute missing

The label's for attribute and button's id attribute must match.

5fill in blank

hard

Fill all three blanks to create a section with an ID, a heading with the same ID, and a paragraph.

HTML

<section [1]="intro">
  <h2 [2]="intro">Welcome</h2>
  <p>[3]</p>
</section>

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

Aid

CThis is the introduction paragraph.

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id

Not matching the id values

Leaving paragraph empty

Both section and h2 use id="intro"; paragraph has text content.