HTML ReferencesLesson #75
HTML Global Attributes
The global attributes are attributes that can be used with all HTML elements.
The global attributes are attributes that can be used with all HTML elements.
| Attribute | Description |
|---|---|
| accesskey | Specifies a shortcut key to activate/focus an element |
| class | Specifies one or more classnames for an element (refers to a class in a style sheet) |
| contenteditable | Specifies whether the content of an element is editable or not |
| data-* | Used to store custom data private to the page or application |
| dir | Specifies the text direction for the content in an element |
| draggable | Specifies whether an element is draggable or not |
| enterkeyhint | Specifies the text of the enter-key on a virtual keyboard |
| hidden | Specifies that an element is not yet, or is no longer, relevant |
| id | Specifies a unique id for an element |
| inert | Specifies that the browser should ignore this section |
| inputmode | Specifies the mode of a virtual keyboard |
| lang | Specifies the language of the element's content |
| popover | Turns an element into a popover element |
| spellcheck | Specifies whether the element is to have its spelling and grammar checked or not |
| style | Specifies an inline CSS style for an element |
| tabindex | Specifies the tabbing order of an element |
| title | Specifies extra information about an element |
| translate | Specifies whether the content of an element should be translated or not |
Interactive Code Examples
HTML Global Attributes Example
htmlLive code example for HTML Global Attributes. Click Try it Yourself to test.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
padding: 24px;
background: #f8fafc;
color: #0f172a;
}
.demo-card {
background: #ffffff;
padding: 24px;
border-radius: 16px;
border: 1px solid #e0e7ff;
box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.08);
max-width: 540px;
}
h2 { color: #4f46e5; margin-top: 0; font-size: 22px; }
p { color: #64748b; line-height: 1.6; }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #4f46e5;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 9999px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.btn:hover { background: #4338ca; }
</style>
</head>
<body>
<div class="demo-card">
<h2>HTML Global Attributes</h2>
<p>This is a live runnable interactive demonstration for <strong>HTML Global Attributes</strong>.</p>
<button class="btn" onclick="alert('Testing HTML Global Attributes!')">
<span>Interactive Action</span> →
</button>
</div>
</body>
</html>