0
0
HTMLmarkup~10 mins

Global attributes in HTML - Interactive Code Practice

Choose your learning style9 modes available
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.