Global attributes in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a global attribute that sets the language of the page to English.

HTML

<html [1]="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

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

Alang

Bclass

Cid

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' or 'id' instead of 'lang' for language setting.

Forgetting to add the attribute to the tag.

The lang attribute is a global attribute used to specify the language of the document. Here, lang="en" means English.

2fill in blank

medium

Complete the code to add a global attribute that provides a tooltip text when hovering over the button.

HTML

<button [1]="Click me to submit">Submit</button>

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

Atitle

Balt

Cplaceholder

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alt' which is for images, not buttons.

Using 'placeholder' which is for input fields.

The title attribute is a global attribute that shows extra information as a tooltip when the user hovers over the element.

3fill in blank

hard

Fix the error in the code by choosing the correct global attribute to make the div focusable by keyboard.

HTML

<div [1]="0">Focusable content</div>

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

Aaccesskey

Bdraggable

Ccontenteditable

Dtabindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'accesskey' which sets a shortcut key but does not make element focusable.

Using 'contenteditable' which allows editing but not focus control.

The tabindex attribute is a global attribute that allows elements to receive keyboard focus. Setting it to "0" makes the element focusable in the natural tab order.

4fill in blank

hard

Fill both blanks to add global attributes that make the paragraph text unselectable and give it a unique identifier.

HTML

<p [1]="on" [2]="intro-text">This text cannot be selected.</p>

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

Aunselectable

Bclass

Cid

Dcontenteditable

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' instead of 'id' for unique identification.

Using 'contenteditable' which allows editing, not preventing selection.

The unselectable attribute (though not standard, supported in some browsers) can prevent text selection. The id attribute gives the element a unique identifier.

5fill in blank

hard

Fill all three blanks to add global attributes that set the element's language, add a tooltip, and make it draggable.

HTML

<section [1]="fr" [2]="Drag me" [3]="true">
  <p>Bonjour!</p>
</section>

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

Alang

Btitle

Cdraggable

Dspellcheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'spellcheck' instead of 'draggable' for dragging.

Mixing up 'title' and 'alt' attributes.

The lang attribute sets the language to French. The title attribute adds a tooltip. The draggable attribute makes the element draggable.

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