HTML Attributes & Selectors

1. A class can only be used once in a document
2. An element can have only one class
3. An element can have multiple classes separated by whitespace
4. Classes are only available on paragraph elements

Correct answer: C

• A — Incorrect: Class names can be reused on many elements.
• B — Incorrect: An element can have multiple class names in a single class attribute.
• C — Correct: Whitespace separates class tokens, such as class="card featured large".
• D — Incorrect: The class attribute can be used on many kinds of HTML elements.

Question 4: What does data-product-id="101" become in the JavaScript dataset property?

1. dataset.data-product-id
2. dataset.productId
3. dataset.product-id
4. dataset.id.product

Correct answer: B — dataset.productId

• A — Incorrect: The data- prefix is omitted from the dataset property, and hyphens are converted to camelCase.
• B — Correct: The attribute data-product-id is accessed through dataset.productId.
• C — Incorrect: The hyphenated form is not the normal dot-notation property name.
• D — Incorrect: dataset does not create nested objects from hyphen-separated names.

Question 5: What type of value does element.dataset.price normally return?

1. A number automatically converted from the attribute
2. A Boolean value in every case
3. A string
4. A database record

Correct answer: C — A string

• A — Incorrect: Numeric strings must be explicitly converted when arithmetic is required.
• B — Incorrect: Values such as "true" remain strings unless your code converts them.
• C — Correct: Data attribute values exposed through dataset are strings.
• D — Incorrect: A data attribute stores markup-level data, not a database record.

Question 6: What does contenteditable="true" do?

1. Automatically saves the content to a database
2. Allows the user to edit the element's content in the browser
3. Prevents all JavaScript changes to the element
4. Encrypts the element's content

Correct answer: B

• A — Incorrect: Saving content requires a separate persistence mechanism.
• B — Correct: The attribute enables editing of the element's content.
• C — Incorrect: JavaScript can still modify the element.
• D — Incorrect: contenteditable does not encrypt content.

Question 7: Which value makes an editable region request plain-text-only editing behavior?

1. contenteditable="disabled"
2. contenteditable="plaintext-only"
3. contenteditable="secure"
4. contenteditable="database"

Correct answer: B

• A — Incorrect: disabled is not the defined value for disabling editing; use false.
• B — Correct: plaintext-only requests editing without rich-text formatting, including plain-text handling of pasted content in supporting browsers.
• C — Incorrect: secure is not a defined contenteditable value.
• D — Incorrect: database is not a defined contenteditable value.

Question 8: What does the hidden attribute do?

1. Encrypts the element
2. Indicates that the element is not currently relevant and should not be rendered normally
3. Deletes the element permanently from the HTML document
4. Prevents a developer from accessing the element with JavaScript

Correct answer: B

• A — Incorrect: hidden has no encryption behavior.
• B — Correct: The attribute indicates that the element should not be rendered normally while hidden.
• C — Incorrect: The element remains in the DOM and can be shown again.
• D — Incorrect: JavaScript can still find and modify a hidden element.

Question 9: What is a good reason to use tabindex="0"?