HTML Attributes & Selectors

Exercise 1: Build a Profile Section

Create a section with a unique ID and a reusable class. Inside it, include a heading, a paragraph, and a button that shares a class with another button on the page.

Exercise 2: Build a Product Card

Create two product cards. Give both the same class, but assign different data attributes for product ID, category, and price. Use JavaScript to read the values from one card.

Exercise 3: Create an Editable Note

Create a contenteditable region and a button that reads its text into a separate paragraph. Display the text using textContent rather than inserting it as HTML.

Exercise 4: Experiment with Global Attributes

Build examples using:

• lang to identify content written in a different language.
• dir to set the direction of text.
• hidden to show and hide a message.
• tabindex to explore keyboard focus.
• spellcheck to test text-editing behavior.

Exercise 5: Create a Course Catalogue

Build three course cards with shared classes and distinct data attributes. Add a button to each card. When a button is clicked, display the selected course name and ID in a message area.

12. Quiz: Global Attributes, IDs, Classes, Data Attributes and Contenteditable

Test your knowledge with these 10 questions. Each question has four options and an expandable explanation that identifies the correct answer and explains every option.

Suggested passing score: 8 out of 10. The answers are displayed using native HTML details elements; automatic scoring and saved progress require additional course-platform or JavaScript functionality.

Question 1: What is the primary purpose of the id attribute?

1. To group many elements under one reusable name
2. To uniquely identify an element within a document
3. To store a database password securely
4. To automatically style every element in the page

Correct answer: B

• A — Incorrect: Classes are commonly used to group elements for reusable styling and behavior.
• B — Correct: An ID identifies a particular element and should be unique within the document.
• C — Incorrect: An ID is not a secure storage mechanism.
• D — Incorrect: An ID does not automatically apply styles; CSS or JavaScript must use it.

Question 2: Which CSS selector targets elements with class="card"?

1. #card
2. .card
3. card()
4. @card

Correct answer: B — .card

• A — Incorrect: The hash symbol selects an element by ID.
• B — Correct: The period followed by a class name selects elements with that class.
• C — Incorrect: card() is not the CSS syntax for a class selector.
• D — Incorrect: @card is not the CSS syntax for a class selector.

Question 3: Which statement about class attributes is correct?