0
0
HTMLmarkup~5 mins

Global attributes in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Global attributes let you add extra information or control to any HTML element. They help make your webpage easier to use and understand.

You want to give an element a unique ID to style or link to it.
You want to add a tooltip that shows when someone hovers over an element.
You want to control if an element is hidden or visible on the page.
You want to make an element accessible by adding ARIA labels.
You want to add custom data to elements for JavaScript to use.
Syntax
HTML
<element global-attribute="value">Content</element>
Global attributes can be used on any HTML element.
Common global attributes include id, class, style, title, and hidden.
Examples
Adds a unique ID to the div for styling or linking.
HTML
<div id="header">Welcome</div>
Shows a tooltip when the mouse hovers over the button.
HTML
<button title="Click me">Press</button>
Hides the paragraph from view.
HTML
<p hidden>This text is hidden and not shown on the page.</p>
Adds custom data that JavaScript can read.
HTML
<span data-info="123">Info</span>
Sample Program

This example shows several global attributes in action:

  • id and class on the heading for styling.
  • title to show a tooltip on the heading.
  • hidden to hide a paragraph.
  • data-action and aria-label on the button for custom data and accessibility.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Global Attributes Example</title>
  <style>
    #main { color: darkblue; font-weight: bold; }
    .highlight { background-color: lightyellow; }
  </style>
</head>
<body>
  <h1 id="main" class="highlight" title="Main heading">Hello World</h1>
  <p>This paragraph is visible.</p>
  <p hidden>This paragraph is hidden and will not show.</p>
  <button data-action="save" aria-label="Save button">Save</button>
</body>
</html>
OutputSuccess
Important Notes

Use id to uniquely identify elements for CSS or JavaScript.

The hidden attribute hides the element from the page and screen readers.

Custom data attributes start with data- and are useful for storing extra info.

Summary

Global attributes work on all HTML elements.

They help with styling, accessibility, behavior, and adding extra info.

Common ones include id, class, title, hidden, and data-*.