HTML Attributes
HTML Global Attributes
Global attributes are attributes that can be applied to any HTML element to set common properties like identity, styling, language and interactivity. They give you a consistent toolkit across all your markup.
What Are Global Attributes?
Global attributes are a group of attributes that are valid on every HTML element, regardless of the element's specific purpose. They handle universal concerns like identification, styling, language and interactivity, so you can use the same attribute names consistently across your markup.
Syntax
Global attributes use the usual name="value" form and can appear on any element, for example <div id="hero" class="banner" lang="en">.
<div id="hero" class="banner" title="Welcome">Content</div>Example
Run this example to see several global attributes on real, visible elements — hover for the title tooltip and click into the editable box.
<!DOCTYPE html>
<html>
<body>
<div id="hero" class="banner" lang="en"
title="Hover to see this tooltip"
style="padding: 12px; background: #eef">
Welcome to MyInternships.in
</div>
<p contenteditable="true" style="border: 1px solid #999; padding: 8px">
This paragraph is editable — click and type inside it.
</p>
<p dir="rtl">This paragraph flows right-to-left because of dir="rtl".</p>
<button data-job-id="42" onclick="alert('Job id: ' + this.dataset.jobId)">
Show data-* value
</button>
</body>
</html>Common Global Attributes
| Attribute | Description |
|---|---|
| id | A document-unique identifier for the element |
| class | Space-separated list of class names for CSS and scripting |
| style | Inline CSS declarations applied to the element |
| title | Advisory information shown as a tooltip on hover |
| lang | Language of the element's content, e.g. en, hi, mr |
| dir | Text direction: ltr, rtl or auto |
| hidden | Boolean attribute that hides the element from rendering |
| tabindex | Controls keyboard tab order and focusability |
| contenteditable | Whether the element's content can be edited by the user |
| draggable | Whether the element can be dragged (true or false) |
| data-* | Custom author-defined attributes for storing extra data |
| accesskey | Keyboard shortcut hint to focus or activate the element |
| spellcheck | Whether the browser should check spelling and grammar |
Use data-* attributes to attach custom information to elements for JavaScript, e.g. data-job-id="42". Access them in script via the element's dataset property (element.dataset.jobId).
Key Takeaways
- Global attributes work on every HTML element.
- id and class are the most-used, connecting HTML to CSS and JavaScript.
- lang and dir set language and text direction for accessibility.
- contenteditable, draggable and tabindex add interactivity.
- data-* attributes store custom data read via element.dataset.