Attribute best practices in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use semantic attributes in HTML?

Which of the following is the main benefit of using semantic attributes like alt on images?

A They improve accessibility by describing images for screen readers.

B They allow images to be draggable by default.

C They change the image color automatically based on user preference.

D They make images load faster by compressing them.

💡 Hint

Think about users who cannot see images.

The alt attribute provides a text description of an image. This helps screen readers read the description aloud for users who cannot see the image, improving accessibility.

📝 Syntax

intermediate

Correct syntax for boolean attributes

Which option shows the correct way to write the boolean attribute disabled on a button in HTML5?

A <button disabled="">Click me</button>

B <button disabled="false">Click me</button>

C <button disabled>Click me</button>

D <button disabled="true">Click me</button>

💡 Hint

Boolean attributes do not need a value to be true.

In HTML5, boolean attributes like disabled are true if present, regardless of value. The correct way is just disabled without a value.

❓ rendering

advanced

Effect of missing required attribute

What will happen if the src attribute is missing from an <img> tag?

HTML

<img alt="A cat">

A The browser automatically loads a default image.

B The browser shows a broken image icon or nothing.

C The browser displays the alt text as an image.

D The browser crashes or stops rendering the page.

💡 Hint

Think about what the browser needs to show an image.

The src attribute tells the browser where to find the image file. Without it, the browser cannot load the image and usually shows a broken image icon or nothing.

❓ selector

advanced

Selecting elements by attribute in CSS

Which CSS selector targets all <input> elements with a type attribute equal to "checkbox"?

A All of the above

B input[type="checkbox"]

C input[type='checkbox']

D input[type=checkbox]

💡 Hint

Attribute selectors can use quotes or no quotes around values.

CSS attribute selectors can use quotes or no quotes around the attribute value. All three selectors correctly select inputs with type checkbox.

❓ accessibility

expert

Best practice for ARIA attributes

Which statement about ARIA attributes is correct?

A ARIA attributes are only needed for visual styling purposes.

B ARIA attributes can replace native HTML elements for better accessibility.

C ARIA attributes should be added to all elements regardless of their role.

D ARIA attributes should be used to add semantic meaning only when native HTML elements do not provide it.

💡 Hint

Think about when ARIA is necessary versus native HTML.

ARIA attributes enhance accessibility when native HTML elements lack the needed semantic meaning. They should not replace native elements or be used unnecessarily.