What are attributes in HTML - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding HTML Attributes

Which of the following best describes what an attribute in an HTML tag does?

A It provides extra information about an element, like its ID or style.

B It creates a new HTML element inside the tag.

C It removes the element from the page.

D It changes the browser's default font.

💡 Hint

Think about how you add details to an HTML tag to change its behavior or appearance.

Attributes add extra details to HTML elements, such as id, class, or href. They do not create or remove elements or change browser defaults directly.

📝 Syntax

intermediate

Correct Attribute Syntax

Which option shows the correct way to add a class attribute to a <div> element?

HTML

<div ???>Content</div>

A class=container

B class='container'

C class:"container"

D class-container

💡 Hint

Attributes need an equals sign and quotes around the value.

The correct syntax for attributes is attribute="value" or attribute='value'. Missing quotes or wrong separators cause errors.

❓ rendering

advanced

Effect of the alt Attribute on Images

What will the browser display if an image has a broken link but includes an alt attribute like alt="Logo"?

HTML

<img src="broken-link.jpg" alt="Logo">

A The browser will crash.

B Nothing will show; the image area will be blank.

C The broken image icon with no text.

D The text 'Logo' will be shown in place of the image.

💡 Hint

Alt text helps when images cannot load.

The alt attribute provides alternative text that browsers show if the image cannot load. This helps users understand what was meant to be there.

❓ selector

advanced

Selecting Elements by Attribute in CSS

Which CSS selector will style all <a> elements that have a title attribute?

A a[title] { color: blue; }

B a.title { color: blue; }

C a#title { color: blue; }

D a(title) { color: blue; }

💡 Hint

Attribute selectors use square brackets.

The selector a[title] targets all <a> tags with a title attribute, regardless of its value.

❓ accessibility

expert

Role of ARIA Attributes

What is the main purpose of ARIA attributes like aria-label in HTML?

A To add animations to elements.

B To change the visual style of elements.

C To improve accessibility by providing extra information to screen readers.

D To make elements draggable.

💡 Hint

ARIA helps people who use assistive technology.

ARIA attributes give screen readers and other assistive tools extra details about elements, improving accessibility for users with disabilities.