HTML Global Attributes - An Basic Introduction

INTRODUCTION

Global attributes are attributes that can be used with all HTML elements. Some attributes can be used with majority of HTML elements but not all, while some attributes are element specific. While in theory, they can be added to any HTML element, some global attributes have no effect when set on some elements. For Example, class is global attribute and can be set on any element. They can be used on all HTML elements including non-standard HTML elements.

In all there are more than 20+ global attributes. We will cover important and generally used attributes.

1. class

The class Global attribute is used to select and access HTML element in CSS and Javascript. The value of this attribute is a space separated list of class-names. The class name is case-sensitive.

A class name can be applied to more than one element of same or different type in webpage. Also a single element can be applied multiple classes.

IN HTML there is no specific restriction on using Class name, but it is advised to use meaningful class name which describes the function/purpose of the class. For Example, if you want to create class for Bold text then rather than using class1 as name it makes more sense to use boldtext as class name.

<p class="class1 class2"> - content - </p>

2. id

The id Global attribute is used to give a Unique identifier(name) to an HTML element. The purpose of this attribute is to identify a single element. The value of this attribute must be unique in whole webpage.

<p id="firstparagraph"> - content - </p>

3. style

The style Global attribute is used to apply Inline CSS to an HTML element. The value of this attribute contains CSS Rules that is applied only to a single element. The purpose of this element is quick styling to check new design.

<p style="color: green;"> - content - </p>

4. title

The title Global attribute is used to add additional text information related to the HTML element. It is mainly used to label <iframe> elements for assistive technology. This information may be, but not necessarily, presented to the user as a tooltip.

When an element has no title attribute, then it inherits it from its parent element.

<p title="Introduction paragraph"> - content - </p>

5. tabindex

The tabindex Global attribute is used to make an HTML element focusable using the keyboard Tab Key, hence the name. This attribute can allow or prevent the element from being focused. It can also define its relative order for sequential focus navigation.

The tabindex attribute can take integer values. The value can be empty string, positive integer, negative integer and even 0.

• Positive Value : It means that the element is focusable. The order is determined by the value. So an element with tabindex="3" comes after tabindex="2" and before tabindex="4". In case of multiple elements sharing same tabindex then order is decided by its position in webpage. The maximum value of this attribute is 32767.
• Negative Value : It means that the element is not focusable/reachable using sequential keyboard navigation. The exact value does not matter, only it should be negative integer.
• tabindex="0" : It means that the element is focusable using sequential keyboard navigation. The navigation order depends on its order in the document.
• Empty Value : If the attribute is defined with empty value, then whether the element is focusable or not is decided by User Agent (Browser).

<ul>  
  <li><label for="3">3</label><input tabindex="3" id="3" name="3" /></li> 
  <li><label for="5">5</label><input tabindex="5"  id="5" name="5" /></li> 
  <li><label for="1">1</label><input tabindex="1"  id="1" name="1" /></li> 
  <li><label for="2">2</label><input tabindex="2"  id="2" name="2" /></li> 
  <li><label for="4">4</label><input tabindex="4" id="4" name="4" /></li>
</ul>+

6. contenteditable

The contenteditable Global attribute makes an element's content editable by users. This attribute Enables in-browser text editing without requiring complex JavaScript libraries.

The contenteditable is an enumerated attribute, which means it can take values from a limited set of predefined value. The allowed values are listed below.

• empty string - element is editable
• true - element is editable
• false - element is not editable
• plaintext-only - Allows only plain text editing, disabling rich text formatting

<p contenteditable="true"> Hello! I am editable paragraph.</p>

7. hidden

The hidden Global attribute allows developers to hide elements from the user interface making it invisible to users, including assistive technologies like screen readers. However, the element remains in the DOM and can be accessed or manipulated via JavaScript.

The allowed values of this attribute are listed below.

• empty string - set the element to the hidden state
• keyword hidden - set the element to the hidden state
• keyword until-found - keeps the element hidden until it is found via in-page search.​

<p hidden> Hello! I am hidden paragraph.</p>
<p hidden=""> Hello! I am hidden paragraph.</p>
<p hidden="hidden"> Hello! I am hidden paragraph.</p>
<p hidden="until-found"> Hello! I am hidden paragraph.</p>

Frequently Asked Questions (FAQ)