MCQs on Attributes and Global Attributes | HTML

Enhance your HTML skills with these 30 MCQs focused on Attributes and Global Attributes. Explore Common Attributes like id, class, and title, Accessibility Attributes like aria-label, and Data Attributes (data-*), perfect for improving web accessibility and structure!

---

MCQs on Attributes and Global Attributes

Common Attributes: id, class, title, style

1. What is the purpose of the id attribute in HTML?
   • a) To apply styles to an element
   • b) To create a unique identifier for an element
   • c) To group elements together
   • d) To define the element’s content
2. Which of the following is true about the class attribute in HTML?
   • a) It assigns a unique identifier to an element
   • b) It is used for styling elements
   • c) It can only be used once per page
   • d) It defines the title of the page
3. What does the title attribute provide for an element in HTML?
   • a) A description shown when the user hovers over the element
   • b) The style of the element
   • c) The unique identifier of the element
   • d) The name of the element
4. The style attribute in HTML is used for:
   • a) Adding metadata to the document
   • b) Defining the background image
   • c) Adding inline CSS to an element
   • d) Specifying the font family of the page
5. Which of the following attributes is used to uniquely identify an HTML element?
   • a) class
   • b) id
   • c) title
   • d) style
6. How can multiple elements share the same styling in HTML?
   • a) By using the id attribute
   • b) By using the style attribute
   • c) By using the class attribute
   • d) By using the title attribute
7. Which of the following attributes can be used to provide a tooltip when hovering over an element?
   • a) id
   • b) class
   • c) style
   • d) title
8. In which of the following situations is the style attribute used in HTML?
   • a) To give a document a title
   • b) To apply inline styles to an element
   • c) To reference external scripts
   • d) To create hyperlinks
9. What is the main difference between the id and class attributes in HTML?
   • a) id can be reused across multiple elements, while class cannot
   • b) class can be reused across multiple elements, while id cannot
   • c) id defines the title, and class defines the style
   • d) There is no difference
10. How can an element be styled uniquely within a page?
    • a) By using the title attribute
    • b) By using the style attribute
    • c) By using the id attribute
    • d) By using the class attribute

---

Accessibility Attributes: aria-label, aria-hidden

11. What does the aria-label attribute provide for an element?
    • a) A brief description for assistive technologies
    • b) A visual label for the element
    • c) A tooltip for the element
    • d) A unique identifier for the element
12. Which attribute is used to hide an element from screen readers while keeping it visible on the page?
    • a) aria-hidden=”true”
    • b) aria-label=”hidden”
    • c) hidden=”true”
    • d) display=”none”
13. When should the aria-label attribute be used?
    • a) To give an element a unique style
    • b) To provide a description for elements that have no visible label
    • c) To make an element visible to screen readers
    • d) To make an element hidden
14. Which of the following attributes helps improve web accessibility for screen readers?
    • a) class
    • b) aria-label
    • c) style
    • d) title
15. What is the function of the aria-hidden attribute in HTML?
    • a) It hides an element visually from the user
    • b) It makes an element hidden to screen readers
    • c) It adds a tooltip to an element
    • d) It hides an element from search engines
16. How does aria-label="close" assist with accessibility?
    • a) It provides a tooltip for users
    • b) It labels the element for screen readers
    • c) It hides the element from screen readers
    • d) It changes the style of the element
17. Which HTML tag could benefit from an aria-hidden="true" attribute?
    • a) A heading for better navigation
    • b) A decorative image that does not convey meaningful information
    • c) A button with a visible label
    • d) A link with an accessible description
18. What does the aria-label attribute help assistive technologies like screen readers to do?
    • a) Provide a text description for an element
    • b) Display the element in a different color
    • c) Show the element’s background image
    • d) Increase the element’s size
19. What does setting aria-hidden="true" on an element do for screen readers?
    • a) It hides the element from all users
    • b) It makes the element readable by screen readers
    • c) It prevents the element from being read aloud by screen readers
    • d) It allows the element to be interacted with by assistive technologies
20. When should you use the aria-label attribute in an HTML element?
    • a) When the element has no visible text or label
    • b) For creating hyperlinks
    • c) For styling elements
    • d) For linking to external resources

---

Data Attributes (data-*)

21. What is the purpose of the data-* attributes in HTML?
    • a) To store custom data associated with an element
    • b) To style elements
    • c) To define a link
    • d) To add an external script
22. How are data attributes written in HTML?
    • a) data_attribute="value"
    • b) data-attribute="value"
    • c) data="attribute value"
    • d) data:attribute="value"
23. Which of the following is an example of a data attribute?
    • a) <div data-user-id="1234">
    • b) <div class="user-id">
    • c) <div style="user-id: 1234">
    • d) <div id="user-id">
24. How can JavaScript access the value of a data attribute?
    • a) Using getElementById()
    • b) Using data-* selectors
    • c) Using the dataset property
    • d) Using style property
25. What does the data-* attribute allow web developers to do?
    • a) Add styling to HTML elements
    • b) Embed custom data in HTML elements without affecting the presentation
    • c) Make elements visible to screen readers
    • d) Link to external resources
26. How can data attributes be useful in JavaScript?
    • a) For changing the style of an element
    • b) For storing custom data that JavaScript can manipulate
    • c) For creating external links
    • d) For hiding elements from view
27. Which method would you use to retrieve the value of a data attribute in JavaScript?
    • a) element.getAttribute('data-*')
    • b) element.dataset.*
    • c) element.getElementsByClassName('data-*')
    • d) element.dataset.getAttribute('data-*')
28. What type of values can be stored in data attributes?
    • a) Only numeric values
    • b) Any type of custom data (string, number, etc.)
    • c) Only boolean values
    • d) Only text
29. What is the maximum length of a data-* attribute in HTML?
    • a) 255 characters
    • b) 1024 characters
    • c) 512 characters
    • d) No limit
30. What is an advantage of using data-* attributes in HTML?
    • a) They allow the embedding of dynamic styles
    • b) They allow JavaScript to interact with elements more easily
    • c) They make HTML elements more accessible
    • d) They define a hyperlink to external resources

---

Answer Key

Qno	Answer
1	b) To create a unique identifier for an element
2	b) It is used for styling elements
3	a) A description shown when the user hovers over the element
4	c) Adding inline CSS to an element
5	b) id
6	c) By using the class attribute
7	d) title
8	b) To apply inline styles to an element
9	b) class can be reused across multiple elements, while id cannot
10	c) By using the id attribute
11	a) A brief description for assistive technologies
12	a) aria-hidden=”true”
13	b) To provide a description for elements that have no visible label
14	b) aria-label
15	b) It makes an element hidden to screen readers
16	b) It labels the element for screen readers
17	b) A decorative image that does not convey meaningful information
18	a) Provide a text description for an element
19	c) It prevents the element from being read aloud by screen readers
20	a) When the element has no visible text or label
21	a) To store custom data associated with an element
22	b) data-attribute="value"
23	a) <div data-user-id="1234">
24	c) Using the dataset property
25	b) To embed custom data in HTML elements without affecting the presentation
26	b) For storing custom data that JavaScript can manipulate
27	b) element.dataset.*
28	b) Any type of custom data (string, number, etc.)
29	a) 255 characters
30	b) They allow JavaScript to interact with elements more easily