What are global HTML attributes?

Global Attributes in HTML

Global HTML attributes are attributes that can be applied to almost any HTML element, regardless of the element type. They provide common functionality, such as styling, accessibility, and identification.

Common Global Attributes

1
id: Assigns a unique identifier to an element.
2
class: Assigns one or more class names for styling or scripting purposes.
3
style: Applies inline CSS styles directly to an element.
4
title: Provides additional information about an element, often shown as a tooltip.
5
lang: Specifies the language of the element's content.
6
dir: Specifies the text direction (ltr or rtl).
7
hidden: Hides the element from the page.
8
tabindex: Controls the element's focus order when tabbing.

Example Usage

In short: Global attributes provide consistent functionality across HTML elements, making it easier to style, identify, or enhance elements for accessibility and scripting.

Difficulty: 4/10

Topics: global attribute usage, accessibility, custom data attributes

Scenario Questions

0-2 years experience

1
You need to make a button that opens a modal and you want it to be accessible. Which global HTML attributes would you add to the button element, and why?
2
If you add a title attribute to an <img> tag, what effect does it have for users and SEO?
3
How would you use a data-* attribute to store a product ID on a list item that will be read by JavaScript later?

2-5 years experience

1
During a code review you notice a <div> has a role="button" but is missing other required attributes. How would you fix it, and what global attributes would you consider adding?
2
Your page's SEO scores dropped after a redesign. Which global attributes would you audit and how would you verify they are correct?
3
A JavaScript function that reads data-* attributes stopped working after a refactor that introduced a new component library. What could have gone wrong with the global attributes, and how would you debug it?

5-8 years experience

1
You are leading the development of a shared UI component library that must support both accessibility and analytics tracking. How would you design the components to expose and handle global attributes like aria-*, data-analytics-id, and role without forcing developers to duplicate code?
2
Our server‑side rendering pipeline strips unknown attributes for security. How would you ensure that necessary global attributes (e.g., lang, dir, data-*) survive the process while still protecting against XSS?
3
When scaling a single‑page application to millions of users, you notice a performance hit related to attribute parsing in the DOM. What strategies would you employ to mitigate this, especially concerning global attributes?

8+ years experience

1
The company is migrating a legacy monolith with thousands of hand‑written HTML pages to a component‑driven framework. How would you plan the migration of global attributes (like lang, dir, accesskey, aria-*) to ensure consistency, accessibility compliance, and minimal disruption across teams?
2
Cross‑team, we need to enforce a company‑wide policy for custom data attributes used for telemetry. How would you design tooling, linting, and runtime checks to standardize the use of data-* attributes across all front‑end services?
3
We are evaluating whether to replace native global attributes with a JavaScript abstraction layer for better feature toggling. What are the trade‑offs in terms of performance, SEO, and accessibility, and what would you recommend?

Follow-up Questions

❓Which of those attributes would you prioritize for accessibility and why?
❓How do you decide between using a data-* attribute versus a dedicated JavaScript state?
❓Can you walk me through a quick example of fixing a misuse of a global attribute?