Global Attributes

Universal properties that can be applied to any HTML element to control behavior and metadata.

`Identification & Styling`

These attributes are the most common and are used to link HTML with CSS and JavaScript.

id : Specifies a unique id for an element; it must be unique within the entire document.
class : Specifies one or more class names for an element, used to select groups of elements in CSS.
style : Contains inline CSS styling for an element.
title : Specifies extra information about an element (usually displayed as a tooltip on hover).

Identification & Styling

Using id, class, style, and title to identify and modify an element.

<div id="main-header" class="container active" title="Top Section">
  <p style="color: blue;">Styled Text</p>
</div>

`Interaction & Accessibility`

Control how users interact with your elements via the keyboard, mouse, or direct text editing.

hidden : A boolean attribute that prevents the element from being rendered.
tabindex : Specifies the tabbing order of an element for keyboard navigation.
contenteditable : Specifies whether the content of an element is editable or not.
draggable : Specifies whether an element is draggable or not.
spellcheck : Specifies whether the element is to have its spelling and grammar checked.
accesskey : Specifies a shortcut key to activate or focus an element.

Interactive Attributes

Making elements editable, draggable, and keyboard-accessible.

<div contenteditable="true" spellcheck="true">
  You can click here and edit this text directly!
</div>

<button accesskey="s" tabindex="1">Submit (Alt + S)</button>

<p draggable="true">Try to drag me around!</p>

`Metadata & Custom Data`

Attributes that define the language context or store hidden data for development purposes.

lang : Specifies the language of the element's content (e.g., 'en', 'es', 'fr').
dir : Specifies the text direction for the content (e.g., 'ltr' for left-to-right, 'rtl' for right-to-left).
data-* attributes : Used to store custom data private to the page or application, easily accessible via JavaScript.

Custom Data Attributes

Storing private custom data for JavaScript access using the data-* prefix.

<div data-user-id="123" data-role="admin" data-status="online">
  User Profile Card
</div>

Knowledge Check

1. Which global attribute is used to uniquely identify an element on a page?

2. What is the purpose of the 'tabindex' attribute?

3. Which attribute allows a user to edit the content of an element in the browser?

4. What is the correct prefix for creating custom attributes to store data for JavaScript?

5. Which attribute provides extra 'tooltip' information when a user hovers over an element?

6. The 'lang' attribute is primarily used for:

Previous Next