Global attributes in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the tabindex global attribute?

Which of the following best describes what the tabindex attribute does when added to an HTML element?

A It defines the order in which elements receive keyboard focus when pressing the Tab key.

B It sets the text color of the element.

C It hides the element from screen readers.

D It specifies the URL of a linked resource.

💡 Hint

Think about how keyboard users move through a webpage.

The tabindex attribute controls the order in which elements are focused when a user presses the Tab key. This helps improve keyboard navigation and accessibility.

📝 Syntax

intermediate

Which option correctly uses the aria-label global attribute?

Select the HTML snippet that correctly uses the aria-label attribute to provide an accessible name for a button.

A <button aria-label=''>Close menu</button>

B <button aria-label>Close menu</button>

C <button aria-label="Close menu">X</button>

D <button aria-label=Close menu>X</button>

💡 Hint

The attribute needs a value inside quotes.

The aria-label attribute must have a quoted string value that describes the element for screen readers. Option C correctly sets it.

❓ rendering

advanced

What is the visual effect of adding hidden attribute to an element?

Given this HTML snippet, what will you see in the browser?

HTML

<div>Visible text</div>
<div hidden>Hidden text</div>

A Both 'Visible text' and 'Hidden text' are visible.

B Only 'Hidden text' is visible; 'Visible text' is hidden.

C 'Hidden text' is visible but grayed out.

D Only 'Visible text' is shown; 'Hidden text' is not visible or takes space.

💡 Hint

The hidden attribute hides the element completely.

The hidden attribute hides the element from view and it does not take up space on the page.

❓ selector

advanced

Which CSS selector targets all elements with the global attribute contenteditable set to true?

Choose the correct CSS selector to style all elements where contenteditable is exactly true.

A .contenteditable-true { border: 1px solid blue; }

B [contenteditable="true"] { border: 1px solid blue; }

C [contenteditable] { border: 1px solid blue; }

D #contenteditable=true { border: 1px solid blue; }

💡 Hint

Attribute selectors use square brackets and quotes for exact matches.

The selector [contenteditable="true"] matches elements whose contenteditable attribute value is exactly true.

❓ accessibility

expert

What is the effect of using aria-hidden="true" on an element with visible content?

If an element has visible text but includes aria-hidden="true", what happens for screen reader users?

A Screen readers ignore the element and do not read its content.

B Screen readers read the element normally.

C Screen readers read the element twice.

D Screen readers highlight the element but do not read the text.

💡 Hint

Think about hiding content from assistive technologies but not visually.

The aria-hidden="true" attribute hides the element from screen readers, so they skip reading its content even if it is visible on screen.

Practice

1. Which of the following is a global attribute that can be used on any HTML element to give it a unique identifier?

easy

A. alt

B. src

C. id

D. href

Solution

1. Step 1: Understand what a global attribute is

   Global attributes can be used on any HTML element regardless of its type.

2. Step 2: Identify the attribute that uniquely identifies elements

   The id attribute assigns a unique identifier to an element, usable on all elements.

3. Final Answer:

   id -> Option C

4. Quick Check:

   Unique element identifier = id [OK]

Hint: Use id for unique element IDs on any tag [OK]

Common Mistakes:

• Confusing src as global (it's for images, scripts)
• Thinking href works on all elements (only links)
• Using alt outside images

2. Which is the correct way to add a tooltip text to an HTML element using a global attribute?

easy

A. tooltip="Info"

B. title="Info"

C. alt="Info"

D. data-tooltip="Info"

Solution

1. Step 1: Identify the attribute that shows tooltip text

   The title attribute is a global attribute that shows a tooltip on hover.

2. Step 2: Check the syntax correctness

   title="Info" is the correct syntax to add tooltip text.

3. Final Answer:

   title="Info" -> Option B

4. Quick Check:

   Tooltip attribute = title [OK]

Hint: Use title for tooltips on any element [OK]

Common Mistakes:

• Using non-existent tooltip attribute
• Confusing alt (only for images)
• Using custom data attributes for tooltips without scripts

3. What will be the visible effect of this HTML snippet in a browser?

<div hidden>Secret message</div><div>Visible message</div>

medium

A. Only 'Visible message' is visible

B. Both messages are visible

C. Only 'Secret message' is visible

D. No messages are visible

Solution

1. Step 1: Understand the hidden attribute effect

   The hidden global attribute hides the element from display in the browser.

2. Step 2: Analyze the snippet output

   The first <div> has hidden, so 'Secret message' is hidden. The second <div> is visible.

3. Final Answer:

   Only 'Visible message' is visible -> Option A

4. Quick Check:

   hidden hides element = Only visible message shown [OK]

Hint: hidden hides element from view instantly [OK]

Common Mistakes:

• Thinking hidden just makes element transparent
• Assuming hidden elements take space on page
• Confusing hidden with CSS display:none

4. Identify the error in this HTML snippet:

<button id="btn1" class="btn" hidden="false">Click me</button>

medium

A. The button element cannot have global attributes

B. The id attribute value is invalid

C. The class attribute cannot be used with hidden

D. The hidden attribute should not have a value

Solution

1. Step 1: Review the hidden attribute usage

   The hidden attribute is a boolean attribute and should not have a value like "false"; presence means true.

2. Step 2: Check other attributes for correctness

   id and class are valid global attributes on button. The error is only with hidden="false".

3. Final Answer:

   The hidden attribute should not have a value -> Option D

4. Quick Check:

   Boolean attributes have no value = hidden no value [OK]

Hint: Boolean global attributes never have values, just presence [OK]

Common Mistakes:

• Giving boolean attributes values like "true" or "false"
• Thinking hidden="false" means visible
• Believing class and hidden conflict

5. You want to store extra information about a product in an HTML element without affecting its display or behavior. Which global attribute should you use?

hard

A. data-product-info

B. title

C. hidden

D. class

Solution

1. Step 1: Understand storing extra info in HTML

   Custom data attributes starting with data- allow storing extra info without affecting display or behavior.

2. Step 2: Identify the correct attribute for product info

   data-product-info is a valid custom data attribute to hold product details invisibly.

3. Final Answer:

   data-product-info -> Option A

4. Quick Check:

   Extra info storage = data-* attributes [OK]

Hint: Use data-* attributes to store hidden info [OK]

Common Mistakes:

• Using title which shows visible tooltip
• Using hidden which hides element
• Using class which is for styling, not data