← Back to HTML Course | Chapter 9: Reference & Advanced | Lesson 3 of 9

HTML Global Attributes

Imagine you are running a school. Each student has unique properties based on their class (like 'Class 5' or 'Class 6'). However, there are some rules that apply to absolutely everyone in the school, such as having a name badge, wearing uniforms, or following the school schedule. HTML global attributes are those universal rules. While most HTML attributes only work on specific tags, global attributes can be applied to any HTML element on your webpage. They allow you to assign IDs, apply styling classes, write tooltips, or control element visibility universally across your page.

In this page:

  1. The class and id Attributes
  2. The style Attribute
  3. The title Attribute
  4. The lang and dir Attributes
  5. The hidden and tabindex Attributes
Syntax
markup 
<tagname id="value" class="value" style="value" title="value" hidden>content</tagname>

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.
  • Accepted attributes:
  • class — space-separated class names
  • id — unique identifier, no spaces
Warning: Assigning the same ID to multiple elements will break your JavaScript selectors.

Example: The class and id Attributes

markup 
<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.
  • Accepted values:
  • style — semicolon-separated CSS declarations, e.g. color: red; margin: 0
Warning: Inline styles can make your code cluttered and hard to maintain as your site grows.

Example: The style Attribute

markup 
<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.
  • Accepted values:
  • title — advisory text, usually shown as a tooltip
Warning: Mobile users cannot hover, so do not put critical instructions inside the title attribute.

Example: The title Attribute

markup 
<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.
  • Accepted attributes:
  • lang — BCP 47 language code, e.g. en | fr | ar | zh-CN
  • dir — ltr | rtl | auto
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

markup 
<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.
  • Accepted attributes:
  • hidden — boolean | until-found
  • tabindex — 0 (focusable, in order) | -1 (focusable by script only) | positive integer (avoid)
Warning: Do not use tabindex values greater than 0, as it can disrupt the logical tab navigation flow.

Example: The hidden and tabindex Attributes

markup 
<p hidden>You cannot see this</p>
<div tabindex="0">Focusable div</div>
Live Example
Related Topics

HTML Data Attributes · HTML Input Form Attributes · HTML Input Attributes · HTML Form Attributes

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using the same ID attribute on multiple elements on the same webpage.
  2. Relying on title tooltips to display critical instructions that mobile users will miss.
  3. Hiding elements using CSS visibility: hidden while expecting screen readers to read them.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson HTML Tag List Next Lesson → HTML Events

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.