HTML Global Attributes
In this page:
The class and id Attributes
The class attribute groups multiple elements together for group styling, while the id attribute assigns a completely unique identifier to a single, specific element on the page.
Note: Each ID must be entirely unique across your entire HTML page structure.
Warning: Assigning the same ID to multiple elements will break your JavaScript selectors.
Example: The class and id Attributes
<p class="highlight">Grouped</p>
<p id="intro">Unique</p>The style Attribute
The style attribute applies inline CSS styles directly to a single element. It has a high specificity rating, meaning it will override rules in external stylesheets.
Note: Use inline styles for quick testing, but move to external stylesheets for larger projects to keep your code clean.
Warning: Inline styles can make your code cluttered and hard to maintain as your site grows.
Example: The style Attribute
<p style="color: blue;">Inline styled text</p>The title Attribute
The title attribute defines some extra information about an element. In most desktop browsers, this information appears as a small tooltip when you hover your mouse over the element.
Note: Keep title tooltips brief and helpful.
Warning: Mobile users cannot hover, so do not put critical instructions inside the title attribute.
Example: The title Attribute
<p title="Extra information">Hover over me</p>The lang and dir Attributes
The lang attribute declares the language of your content, and the dir attribute specifies the text direction (ltr for left-to-right, or rtl for right-to-left), which is essential for accessibility and search engine optimization.
Note: Always declare the primary language of your page inside your opening html tag.
Warning: Failing to set correct language tags can cause screen readers to read your text with an incorrect pronunciation.
Example: The lang and dir Attributes
<html lang="ar" dir="rtl">
</html>The hidden and tabindex Attributes
The hidden attribute hides an element from the page layout entirely. The tabindex attribute includes or excludes elements from the page's keyboard tab navigation sequence.
Note: Set tabindex="0" to make custom, styled elements focusable using the keyboard.
Warning: Do not use tabindex values greater than 0, as it can disrupt the logical tab navigation flow.
Example: The hidden and tabindex Attributes
<p hidden>You cannot see this</p>
<div tabindex="0">Focusable div</div>- Using the same ID attribute on multiple elements on the same webpage.
- Relying on title tooltips to display critical instructions that mobile users will miss.
- Hiding elements using CSS visibility: hidden while expecting screen readers to read them.
- Global attributes (like class, id, and style) can be applied to any HTML element on your webpage.
- Use class for group styles, id for unique identifiers, and style to apply quick inline CSS overrides.
- Use title for tooltips, lang and dir to define language settings, and hidden or tabindex to control element visibility and keyboard focus.
Standard HTML5 global attributes are supported natively by all web browsers.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: