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.
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> is not an HTML5 standard tag and it still supports the
HTML Global Attributes
There are many global attributes and they are listed below with their description:
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.
<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.
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"/>
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>
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: It indicates that the content is editable
false: It is used to indicate that the content is not editable
<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.
This attribute is used to indicate the direction of the text in an HTML element, like
It has some values too and these are given below:
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.
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.
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>
This attribute is used to indicate whether an element can be dragged or not.
It can take the following values:
true: It is used to indicate that elements may be dragged.
false: It is used to indicate that elements cannot be dragged.
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:
copy: this value indicates that dropping will create a copy of the dragged element.
move: this value indicates that the dragged element will be moved to this new location.
link: this value will create a link to the dragged element.
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.
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.
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
This attribute is used as a unique and global identifier of an item.
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.
<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>
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.
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.
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.
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>
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.
This is used to define that an element may be checked for spelling errors.
Its values are given below:
true: It is used to indicate that elements should be checked for spelling errors.
false: It is used to indicate that elements should not be checked for spelling errors.
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 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>
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:
negative: It indicates that an element is focusable but it is not reachable via sequential keyboard navigation.
0: this value indicates that an element is focusable as well as reachable via sequential keyboard navigation.
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
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.
<p title="This is John Wick">Keep mouse on me to see who am I!</p>
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.