Understanding HTML Global Attributes
HTML global attributes are attributes that can be used on most HTML elements. They provide common information and behavior such as identification, styling, language, editing, accessibility, and custom data.
Think of an HTML element as a person. A global attribute is like a common property that can describe that person.
For example,
id can identify the person,
class can group them,
title can provide extra
information, and lang can
tell us which language they use.
What Are Global Attributes?
Global attributes are HTML attributes that are generally allowed on all HTML elements, although the effect of a particular attribute can depend on the element and browser.
<element
global-attribute="value"
>
Content
</element>Simple Example
Multiple global attributes can be used on the same HTML element.
<p
id="intro"
class="highlight"
title="Introduction"
lang="en"
>
Welcome to ManaCoding!
</p>Common HTML Global Attributes
These are some of the most useful global attributes you should learn as a beginner.
idclasstitlestylelangdirhiddendata-*contenteditabledraggablespellchecktabindex
Example: Using the id Attribute
The id attribute uniquely
identifies an element on a page.
<h1 id="main-heading">
Welcome to ManaCoding
</h1>
Example: Using the class Attribute
The class attribute allows
multiple elements to share the same CSS
class.
<p class="highlight">
Learn HTML with ManaCoding.
</p>
<p class="highlight">
Practice HTML every day.
</p>
Example: Using the title Attribute
The title attribute provides
additional information about an element.
<button title="Click to submit the form">
Submit
</button>
Example: Using the style Attribute
The style attribute allows you
to apply CSS directly to an element.
<p style="font-size: 20px;">
Welcome to ManaCoding
</p>
Example: Using the lang Attribute
The lang attribute specifies the
language of the content.
<p lang="en">
Welcome to ManaCoding.
</p>
<p lang="te">
మనాకోడింగ్కు స్వాగతం.
</p>
Example: Using the dir Attribute
The dir attribute controls the
direction in which text is displayed.
<p dir="ltr">
Left to Right Text
</p>
<p dir="rtl">
Right to Left Text
</p>
Example: Using the hidden Attribute
The hidden attribute tells the
browser that an element should not currently
be displayed.
<p hidden>
This text is hidden.
</p>
<p>
This text is visible.
</p>
Example: Using data-* Attributes
Custom data-* attributes allow
developers to store extra information directly
on HTML elements.
<button
data-user-id="101"
data-role="student"
>
Student
</button>
Example: Using contenteditable
The contenteditable attribute
allows users to edit the content of an
element directly in the browser.
<p contenteditable="true">
Edit this text directly.
</p>
Example: Using spellcheck
The spellcheck attribute tells
the browser whether spelling should be checked.
<p contenteditable="true" spellcheck="true">
Type something here.
</p>
Example: Using tabindex
The tabindex attribute controls
keyboard focus behavior.
<button tabindex="1">
First
</button>
<button tabindex="2">
Second
</button>
Example: Using accesskey
The accesskey attribute defines
a keyboard shortcut for an element.
<button accesskey="s">
Save
</button>Using Multiple Global Attributes
Multiple global attributes can be combined on a single HTML element.
<p
id="student-message"
class="message"
title="Student information"
lang="en"
data-user-id="101"
>
Welcome to ManaCoding!
</p>Try It Yourself
Edit the HTML code and click Run to see how global attributes change the behavior of elements.
Global attributes can generally be used with many different HTML elements.
Some attributes, however, are specific
to particular elements. For example,
href is mainly associated
with links such as the
<a> element, while
src is used by elements such
as <img> and
<script>.
id, class,
title, style,
lang, dir,
hidden, and
data-*.
id, class,
title, lang,
hidden, and
data-*.