Attribute best practices in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using attributes in HTML elements?

Attributes provide additional information about an element, such as its behavior, appearance, or identity. They help browsers understand how to display or interact with the element.

beginner

Why should attribute values be enclosed in quotes?

Enclosing attribute values in quotes ensures the browser correctly reads the value, especially if it contains spaces or special characters. It also improves code readability and consistency.

intermediate

What is the best practice for boolean attributes like 'disabled' or 'checked'?

Boolean attributes should be written without a value or with the attribute name as the value (e.g., <input disabled> or <input disabled="disabled">). This clearly indicates the attribute is active.

intermediate

How can you improve accessibility using attributes?

Use attributes like aria-label, alt for images, and title to provide descriptive information. These help screen readers and assistive technologies understand content better.

beginner

Why avoid using inline styles as attributes like 'style' for layout?

Using inline styles mixes content with design, making code harder to maintain and less flexible. It's better to use CSS files or <style> blocks for styling.

Which of the following is the correct way to write an attribute with a value?

A All of the above

B <input type=text>

C <input type='text'>

D <input type="text">

All these are valid ways to write attribute values in HTML, but using quotes (double or single) is recommended for clarity.

What does the 'alt' attribute in an <img> tag do?

A Provides alternative text for screen readers

B Links the image to another page

C Adds a border around the image

D Specifies the image size

The 'alt' attribute gives descriptive text for images, helping users who cannot see the image.

How should you write a boolean attribute like 'checked' in a checkbox input?

A <input checked="true">

B <input checked>

C <input checked="checked">

D Both B and D

Both and are correct ways to indicate a boolean attribute.

Which attribute helps improve accessibility by labeling elements for screen readers?

A id

B class

C aria-label

D style

The 'aria-label' attribute provides accessible names for elements, improving screen reader support.

Why is it better to avoid using the 'style' attribute for layout?

A It makes the page load slower

B It mixes content with design, making maintenance harder

C It is not supported by browsers

D It disables accessibility features

Using 'style' inline mixes content and design, which is harder to maintain than using separate CSS.

Explain why enclosing attribute values in quotes is a good practice in HTML.

Think about how browsers read attribute values.

Describe how attributes can help make a webpage more accessible.

Consider users who rely on screen readers.