What are attributes in HTML - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an attribute that sets the image source.

HTML

<img [1]="image.jpg" alt="A photo">

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

Atitle

Bhref

Calt

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of src for images

Confusing alt with src

The src attribute tells the browser where to find the image file.

2fill in blank

medium

Complete the code to add an attribute that sets the link destination.

HTML

<a [1]="https://example.com">Visit site</a>

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

Ahref

Balt

Csrc

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using src instead of href in links

Leaving out the attribute entirely

The href attribute defines the URL the link points to.

3fill in blank

hard

Fix the error by choosing the correct attribute to describe the image.

HTML

<img src="photo.jpg" [1]="A beautiful sunset">

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

Aalt

Bhref

Ctitle

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of alt for image description

Using src twice

The alt attribute provides alternative text for the image, important for accessibility.

4fill in blank

hard

Fill both blanks to add attributes that set the input type and placeholder text.

HTML

<input [1]="text" [2]="Enter your name">

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

Atype

Bvalue

Cplaceholder

Dalt

Attempts:

3 left

💡 Hint

Common Mistakes

Using value instead of placeholder for hint text

Confusing alt with placeholder

The type attribute defines the input field type, and placeholder shows a hint inside the input box.

5fill in blank

hard

Fill all three blanks to create a button with a type, id, and accessible label.

HTML

<button [1]="submit" [2]="sendBtn" aria-label="[3]">Send</button>

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

Atype

Bid

CSend button

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id for unique identification

Leaving out aria-label for accessibility

The type attribute defines the button's action, id uniquely identifies it, and aria-label improves accessibility by describing the button.

Practice

1. What is the main purpose of attributes in HTML elements?

easy

A. To add extra information or settings to elements

B. To create new HTML elements

C. To write comments inside HTML

D. To link CSS files to the HTML

Solution

1. Step 1: Understand what attributes do

   Attributes provide extra details or settings inside an element's opening tag.

2. Step 2: Compare options with attribute purpose

   Only To add extra information or settings to elements correctly describes adding extra information or settings to elements.

3. Final Answer:

   To add extra information or settings to elements -> Option A

4. Quick Check:

   Attributes add details = B [OK]

Hint: Attributes add info inside tags, not create elements [OK]

Common Mistakes:

• Confusing attributes with creating elements
• Thinking attributes are for comments
• Mixing attributes with linking CSS

2. Which of the following is the correct way to add an attribute to an HTML element?

easy

A. Content

B. Content

C. Content

D.

Solution

1. Step 1: Check attribute syntax rules

   Attributes go inside the opening tag with name="value" or name='value'.

2. Step 2: Identify correct syntax among options

   <div id='main'>Content</div> uses correct syntax: <div id='main'>. Others have syntax errors.

3. Final Answer:

   <div id='main'>Content</div> -> Option C

4. Quick Check:

   Correct attribute syntax = C [OK]

Hint: Attributes need name='value' inside opening tag [OK]

Common Mistakes:

• Using dashes instead of equals sign
• Putting quotes around attribute name
• Missing quotes around attribute value

3. What will the following HTML code display in the browser?

<img src='flower.jpg' alt='A red flower'>

medium

A. An image of a red flower with alt text shown if image fails

B. Only the text 'A red flower' will show

C. Nothing will show because img needs a closing tag

D. An error message will appear in the browser

Solution

1. Step 1: Understand img tag and attributes

   The img tag shows an image from src attribute; alt text shows if image can't load.

2. Step 2: Predict browser behavior

   Browser displays the image if available; alt text only appears if image fails to load.

3. Final Answer:

   An image of a red flower with alt text shown if image fails -> Option A

4. Quick Check:

   img src shows image, alt is fallback text = A [OK]

Hint: img shows image; alt text is fallback description [OK]

Common Mistakes:

• Thinking alt text always shows
• Believing img needs closing tag
• Expecting error for missing closing tag

4. Find the error in this HTML snippet:

<a href='page.html' target='_blank>Visit page</a>

medium

A. href attribute is misspelled

B. Missing closing quote for target attribute value

C. Anchor tag cannot have attributes

D. The link text is missing

Solution

1. Step 1: Check attribute syntax carefully

   The target attribute value '_blank' is missing the closing quote before the >.

2. Step 2: Confirm other parts are correct

   href is spelled correctly, anchor tags can have attributes, and link text is present.

3. Final Answer:

   Missing closing quote for target attribute value -> Option B

4. Quick Check:

   Attribute values need quotes closed = A [OK]

Hint: Always close quotes around attribute values [OK]

Common Mistakes:

• Ignoring missing quotes
• Thinking attributes can't have quotes
• Confusing attribute names

5. You want to make a button that is disabled and has a tooltip saying 'Not clickable'. Which attributes should you add to the button element?

hard

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Identify correct attribute for disabling button

   The 'disabled' attribute disables the button when present without value or with value 'disabled'.

2. Step 2: Identify correct attribute for tooltip

   The 'title' attribute shows a tooltip on hover with the given text.

3. Final Answer:

   <button disabled title='Not clickable'>Click me</button> -> Option D

4. Quick Check:

   disabled disables, title shows tooltip = D [OK]

Hint: Use 'disabled' and 'title' attributes for button and tooltip [OK]

Common Mistakes:

• Using wrong attribute names like 'disable' or 'tooltip'
• Setting disabled='false' which does not disable
• Confusing alt with title attribute