HTML Global Attributes

Global attributes are attributes that can be applied to any HTML element. They provide additional information and functionality, enhancing the usability and accessibility of web pages.

Common Global Attributes

Here are some of the most commonly used global attributes in HTML:

Attribute	Description	Example
class	Specifies one or more class names for an element. It is used to apply CSS styles and JavaScript.	Try yourself `<p class="styled-paragraph">This paragraph is styled with a class.</p> <p class="styled-paragraph">This is another paragraph with the same class.</p>`
id	Specifies a unique id for an element. It is used to apply CSS styles, JavaScript, and anchor links.	Try yourself `<p id="unique-paragraph">This is a uniquely styled paragraph.</p> <a href="#unique-paragraph">Go to the uniquely styled paragraph</a>`
style	Specifies inline CSS styles for an element.	Try yourself `<div style="color: green; font-size: 20px;">This is a div with inline styles.</div>`
title	Provides additional information about an element, often displayed as a tooltip.	Try yourself `<div title="This is a tooltip">Hover over this div to see the tooltip.</div>`
data-*	Used to store custom data private to the page or application.	Try yourself `<div data-user-id="12345" data-role="admin">This div contains custom data attributes.</div>`

Other Global Attributes

There are several other global attributes available in HTML:

accesskey: Specifies a shortcut key to activate/focus an element.
contenteditable: Specifies whether the content of an element is editable or not.
dir: Specifies the text direction for the content in an element.
draggable: Specifies whether an element is draggable or not.
hidden: Specifies that an element is not yet, or is no longer, relevant.
lang: Specifies the language of the element's content.
spellcheck: Specifies whether the element is to have its spelling and grammar checked or not.
tabindex: Specifies the tab order of an element.

Detailed Examples

Let's look at some detailed examples of how these global attributes can be used:

Example: Using the class Attribute

Try yourself

        
            <p class="styled-paragraph">This paragraph is styled with a class.</p>
<p class="styled-paragraph">This is another paragraph with the same class.</p>

This example demonstrates how to use the class attribute to apply CSS styles to an element.

Example: Using the id Attribute

Try yourself

        
            <p id="unique-paragraph">This is a uniquely styled paragraph.</p>
<a href="#unique-paragraph">Go to the uniquely styled paragraph</a>

This example shows how to use the id attribute to uniquely identify an element and apply styles or JavaScript to it.

Example: Using the style Attribute

Try yourself

        
            <div style="color: green; font-size: 20px;">This is a div with inline styles.</div>

This example illustrates how to use the style attribute to apply inline CSS styles to an element.

Example: Using the title Attribute

Try yourself

        
            <div title="This is a tooltip">Hover over this div to see the tooltip.</div>

This example demonstrates how to use the title attribute to provide additional information about an element.

Example: Using the data-* Attribute

Try yourself

        
            <div data-user-id="12345" data-role="admin">This div contains custom data attributes.</div>

This example shows how to use the data-* attribute to store custom data within an element.

Summary

HTML global attributes are versatile and can be applied to any HTML element to provide additional functionality and information. They are essential for enhancing the usability, accessibility, and interactivity of web pages.

HTML BASIC

HTML Global Attributes

Common Global Attributes

Other Global Attributes

Detailed Examples

Summary