HTML Global Attributes

HTML Global Attributes are those attributes that are common to all HTML tags/elements.

An attribute of any HTML tag is nothing but a part of it which can be used to add more information to any HTML tag, for example, in an anchor tag, href is an attribute which is used to provide the URL to which the text will be hyperlinked. Similarly, HTML tags can have global attributes to provide additional identification, information like CSS style classes, or some standard properties hidden(to hide HTML element), language, etc.

Any HTML tag can have multiple attributes.

• Global attributes can be used with all tags; though on some HTML tags they do not have any effect.

• There are some exceptions too where these attributes are not relevant, some of the exceptional tags that do not support global attributes are <base> tag, <script> tag, <title> tag, etc.

• Global attributes can even be used with the tags that are not specified as HTML standard tags; i.e the non-standard tags also permit global attributes. Using these non-standard elements in a document indicates that a document is no longer HTML5 compliant.

Here is an example for using global attribute hidden in a non-standard tag.

<foo hidden>....</foo>

This <foo> is not an HTML5 standard tag and it still supports the hidden attribute.

HTML Global Attributes

There are many global attributes and they are listed below with their description:

1. accesskey

This attribute is used to provide an access key, which is a keyboard key, used as a shortcut for focusing over any HTML element.

This attribute consists of a list of space-separated characters.

For example:

<a href="https://www.studytonight.com/code/" accesskey="h">HTML Interactive Course</a>
<a href="https://www.studytonight.com/cascading-style-sheet/" accesskey="c">CSS Tutorial</a>

Now for different browsers, there are different ways of using the accesskey attribute, for example in Chrome, Safari, etc we can use ALT + accesskey to focus on the HTML element and in Firefox we can use ALT + SHIFT + accesskey.

For the above HTML code, if you will press ALT + h the first hyperlink text which is HTML Interactive Course will be focused and clicked as well.

2. autocapitalize

This attribute is used with input HTML tag, to control whether and how the text entered or edited by the user gets automatically capitalized, or what form of capitalization should be applied on the input text.

It further has some predefined values which can be used to set its behaviour and these are given below:

• off or none: It indicates that no capitalization is applied.

• characters: It indicates that all characters should default to uppercase.

• word: It indicates that the first letter of each word defaults to uppercase and all other to lowercase.

• on or sentences: It indicates that the first letter of a sentence defaults to uppercase rest all other to lowercase.

This attribute is not yet supported by too many browsers.

Let's take an example:

<input type="text" autocapitalize="word" id="mytext"/>

3. class

It indicates the space-separated list of classes of the elements. This is one of the most widely used global attribute, which is used for specifying class selectors for using CSS style classes and use the class attribute for handling JavaScript events.

Here is an example of using the class attribute in HTML tags:

<div class="somestyle">This is a div element.</div>
<p class="pstyle">This is a paragraph.</p>

4. contenteditable

This is used to indicate whether the content should be editable by the user or not, even if the HTML element is not of input type. If it is, then the browser modifies its widgets and allows editing of the HTML element.

It has two values: True and false

true: It indicates that the content is editable

false: It is used to indicate that the content is not editable

For example:

<p contenteditable="true">This is a paragraph.</p>

5. data or data-*

This attribute is used to create a custom attribute known as custom data attributes, which can be used to specify any useful data in HTML tags.

Let's take an example to understand it:

<p>Choose Vehicle:</p>
<select>
    <option data-vehicle-type="hatchback" value="Polo">VW Polo</option>
    <option data-vehicle-type="motorcycle" value="R15">Yamaha R15</option>
    <option data-vehicle-type="SUV" value="Polo">Hyundai Creta</option>
</select>

Just like we have used the data-vehicle-type attribute to define the type of vehicle, similarly youc an also create any custom data tag, starting with prefix data-, hence it is also called as the data-* attribute.

6. dir

This attribute is used to indicate the direction of the text in an HTML element, like div, span, p etc.

It has some values too and these are given below:

1. ltr: ltr stands for the left to right and this attribute is used to indicate languages that are written from left to right like English.

2. rtl: rtl stands for the right to left and this attribute is used to indicate languages that are written from right to left like Arabic.

3. auto: which let the user agent(browser) decides. It makes use of a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.

Let's take an example:

<p dir="rtl">This text will appear right to left on browser.</p>

7. draggable

This attribute is used to indicate whether an element can be dragged or not.

It can take the following values:

1. true: It is used to indicate that elements may be dragged.

2. false: It is used to indicate that elements cannot be dragged.

8. dropzone

It is used to indicate the action to be performed when a draggable element is dropped after dragging.

The allowed values for this attribute are given below:

1. copy: this value indicates that dropping will create a copy of the dragged element.

2. move: this value indicates that the dragged element will be moved to this new location.

3. link: this value will create a link to the dragged element.

9. hidden

The hidden attribute is used to indicate that a particular element should not be displayed in the browser. This attribute can be used to hide any HTML element which has some useful value for the application but shouldn't be shown to the user like CSRF token for forms, etc.

10. id

The id attribute is used to define a unique identifier that must be unique for a whole HTML document.

The main purpose is to identify the element during linking, scripting or styling. This is one of the most widely used global attribute just like the class global attribute.

11. inputmode

This attribute is used to provide a hint to the type of virtual keyboard-configuration which is used to edit the contents of an element.

It is mainly used with <input> tag and is used when a tag is in contenteditable mode.

12. is

This attribute is used to specify how the standard element should behave like a registered custom built-in element defined in Javascript.

13. itemid

This attribute is used as a unique and global identifier of an item.

14. itemprop

To add properties to an element itemprop attribute is used. Almost every HTML element has itemprop attribute specified; where an itemprop exists in a name-value pair.

It is used to structure the HTML document information and specify additional meta information with the content.

For example,

<div itemscope itemtype="http://schema.org/Student">
    <h1 itemprop="name">John Wick</h1>
    <span>Class:
        <span itemprop="section">Comp. Sci.</span>
    </span>
    <span itemprop="sex">Male</span>
    <span itemprop="rollno">CS-547-2K7</span>
</div>

15. itemref

This attribute is used to provide a list of elements ids (not itemid) with some additional properties elsewhere in the document, for example in some other HTML element to refer some element.

16. itemscope

This attribute works along with itemtype attribute to specify HTML contained in a block is about a particular item. This itemscope attribute creates the item and defines the scope of the itemtype that is associated with it; where itemtype is in the form of a valid URL describing item with its properties context.

17. itemtype

This attribute is used to specify the URL of the vocabulary that will be used to define item properties in a data structure. Thus itemscope is used to set the scope of wherein the data structure the vocabulary set by itemtype will be active.

18. lang

This attribute is used to define the language of an editable as well as non-editable HTML elements. While defining a language for any HTML element, the value is made of two components, first one to define the language and second one to define sub-language, like en-GB is used for british english and en-US is used for american english.

Here is an example,

<p lang="en-GB">This is British English.</p>

19. slot

This attribute is used to assign a slot in a shadow tree to an element. An element with a slot attribute is assigned to the slot by creating a <slot> element whose name attribute's value matches with the slot attribute's value.

20. spellcheck

This is used to define that an element may be checked for spelling errors.

Its values are given below:

1. true: It is used to indicate that elements should be checked for spelling errors.

2. false: It is used to indicate that elements should not be checked for spelling errors.

21. style

This attribute contains implicit CSS styling code which is used to declare the styling rules for any element.

Although it is recommended to define styling attributes in a separate CSS file, we can specify style rule within an HTML element using the style attribute.

The style attribute and the <style> tag allows to define CSS style rule within an HTML element or an HTML document respectively.

Let's take an example:

<p style="color:green;">This text will be shown in green color.</p>

22. tabindex

It is used to indicate if an element can take input focus if it should participate in sequential keyboard navigation if this is so then at which position.

It has the following values:

1. negative: It indicates that an element is focusable but it is not reachable via sequential keyboard navigation.

2. 0: this value indicates that an element is focusable as well as reachable via sequential keyboard navigation.

3. positive: It indicates that the element should be focusable and reachable via sequential keyboard navigation and in the same order in which the elements are focused is the increasing value of the tabindex

23. title

This attribute contains a text which represents any additional information that is related to the HTML element it belongs to. If you specify the title attribute for any HTML element, upon mouse hover on that HTML element, you will see that title text. The moder rendition of this is tooltip which is used to show additional information about any information displayed in the HTML page.

For example,

<p title="This is John Wick">Keep mouse on me to see who am I!</p>

24. translate

It is used to indicate whether an element's attribute value and value of its text can be translated or not

It has two values:

• The empty string and yes, which indicates that the element will be translated.

• The no value indicates that the element will not be translated.

With this we have listed down all the global attributes which you can use with yout HTML tags. Go ahead and try a few in our Web playground.