What are HTML Global attributes
HTML Global attributes are the attributes that are common to all the elements in HTML. You can use these attributes in each and every element of HTML except the <html>, <head> and all other elements inside <head> tag, and <doctype>, etc.
These attributes are helpful to configure elements in web pages. After adding the required global attributes on your HTML elements, you can easily apply CSS and script.
List of HTML Global Attributes
1. accesskey
accesskey can be used to include a key to access the elements. You can specify a keyboard shortcut for the element to activate. The keyboard shortcut can be a letter or a digit.
Example: Accesskey attribute in a link
|
1 |
<a href="https://tutorialdeep.com/live-editor/" accesskey="l">TutorialDeep Editor</a> |
Output
To activate or focus the element containing the accesskey, you have to press the key specified with the elements in combination with the key ALT, ALT + Shift in your Windows Chrome and other browsers.
2. class: Mostly Used HTML Global Attributes
class attribute is used to include a class identifier to the HTML elements. It can be useful when you want to select the required element to apply styling and script. The value for this can be any string.
Example: Paragraph containing the class name
|
1 |
<p class="mypara">This is the paragraph</p> |
Output
This is the paragraph
You can add multiple classes to the element separated with spaces. The multiple classes are helpful to select the similar element with a different class name.
3. contenteditable
contenteditable is used to set whether the content element is editable or not. This contains boolean value true/false.
Example: Paragraph containing contenteditable attribute
|
1 |
<p contenteditable="true">This is the paragraph. You can click it to edit if your browser supports this attribute.</p> |
Output
This is the paragraph. You can click it to edit if your browser supports this attribute.
The above example contains the contenteditable attribute with ‘true’ as its value to make it editable. However, if it contains no value, you can still find it editable. Click the content given in the output and if your browser supports this attribute, you will be able to edit the content.
4. contextmenu
contextmenu is used to specify the context menu for the element. It appears only when the user right-clicks on the element. The value for this attribute is the ID of the menu.
Example: Paragraph containing contextmenu attribute
|
1 2 3 4 5 6 |
<p contextmenu="mymenu">This is the paragraph. Right-click here to see the context menu items if your browser supports it.</p> <menu id="mymenu" type="context"> <menuitem label="menu item 1"></menuitem> <menuitem label="menu item 1"></menuitem> <menuitem label="menu item 1"></menuitem> </menu> |
Output
This is the paragraph. Right-click here to see the context menu items if your browser supports it.
The above context menu items will only appear when you right-click the mouse button on the above content. However, the attribute will only work in Firefox and on other browsers. You have to use the script to make them work as a context menu for unsupported browsers.
5. dir
dir is used to specify the direction of the text content of the element. The value option for this are ltr(left to right), rtl(right to left), and auto.
Example: Paragraph containing dir attribute
|
1 |
<p dir="rtl">This is the paragraph in the right-to-left direction.</p> |
Output
This is the paragraph in the right-to-left direction.
The above text content in the paragraph element showing from the right-to-left direction. You can also add other value options to the dir attribute to change the direction.
6. draggable
draggable is used to specify whether the user is allowed to drag the element or not. the value for this can be true, false, and auto.
Example: Paragraph containing draggable attribute
|
1 |
<p draggable="true">This is the draggable paragraph if your browser allows it.</p> |
Output
This is the draggable paragraph if your browser allows it.
The above example contains the paragraph and you can drag it if your browser allows.
7. dropzone
dropzone is used to specify the dragged element data will be treated when dropping to somewhere else. The value for this can be a copy, move, and link.
Example: Div containing dropzone attribute
|
1 |
<div dropzone="copy"></div> |
Output
8. hidden
hidden is used to specify that the element is not yet or no longer relevant. The value for this is hidden.
Example: Paragraph containing hidden attribute
|
1 |
<p hidden>This is a hidden element.</p> |
Output
This is a hidden element.
9. id: Mostly Used HTML Global Attributes
id is used to specify the identifier for the element. After specifying the identifier, it can be used to select the element and apply CSS and script. Its value can be any string.
Example: Paragraph containing id attribute
|
1 |
<p id="mypara">This is a paragraph with an id attribute to select this element.</p> |
Output
This is a paragraph with an id attribute to select this element.
The paragraph element contains the id attribute. You can use the value of the to apply CSS and script.
10. lang
lang is used to specify the language for the content of the element. The value of this attribute is the language code like en for English, fr for French, es for Spanish, etc.
Example: Paragraph with the lang attribute
|
1 |
<p lang="en">An online coding and blogging tutorial.</p> |
Output
An online coding and blogging tutorial.
The above example specifies the English language for the paragraph content. The specified language code is en for the English language.
11. spellcheck
spellcheck is used to specify whether the element has spelling and grammar check or not. Its value can be ‘true’ or ‘false’. If you specify the value of this attribute is ‘true’, it checks the spelling and grammar errors and marks the mistakes with red underlined.
spellcheck attribute will only work in combination with the contenteditable attribute with both have specified value as ‘true’.Example: Paragraph with spellcheck and contenteditable attribute
|
1 |
<p contenteditable="true" spellcheck="true">This is a paragraph with grammmar spellling mistakes.</p> |
Output
This is a paragraph with grammmar spellling mistakes.
You can click the above content to get the spelling and grammar mistakes. However, it depends upon your browser if it supports this attribute to work. You can also use scripts to make it work.
12. style: Mostly Used HTML Global Attributes
style is used to define the styling for the element. The value for this is the CSS property with its specified value as we use in stylesheets.
Example: Paragraph with the style attribute
|
1 |
<p style="text-decoration:italic;color:red;">This is an italic paragraph in red color.</p> |
Output
This is an italic paragraph in red color.
The style attribute applies the red color and converts the text to italic using CSS property.
13. tabindex
tabindex is used to define the tabbing order to specify the position of the element. The value for this can be any integer value like 1,2.. It starts at index 1. However, if a negative value is specified for this attribute, the element is not counted as a tabbing element.
Example: Paragraph with tabindex attribute
|
1 2 3 4 |
<a href="https://tutorialdeep.com/" tabindex="1">Tutorialdeep</a> <a href="https://tutorialdeep.com/html_tutorial/html-tutorial/" tabindex="1">HTML Tutorial</a> <a href="https://tutorialdeep.com/html_tutorial/write-html-code-execute-program/" tabindex="1">HTML Write and Execute</a> <a href="https://tutorialdeep.com/html_tutorial/best-html-editors-windows-mac/" tabindex="1">Best HTML Editors</a> |
Output
HTML Tutorial
HTML Write and Execute
Best HTML Editors
There are 4 anchor links in the output given above. Click the output box given above and press the tab button of the keyword. When you press the tab button of the keyboard to select the above anchor, it selects in a sequence of specified tab index.
14. title: Mostly Used HTML Global Attributes
title is used to define the title of the element. The value for the title attribute can be any string, number, or combination of either of them. The title attribute is useful to define the introduction or working of the element to display on hover.
Example: Paragraph with a title attribute
|
1 |
<p title="This is paragraph">A paragraph content with a title attribute.</p> |
Output
A paragraph content with a title attribute.
Take your mouse and hover over the above content in the output. You will get a title for the paragraph content.
15. translate
translate is used to define whether the element is translated or not. The value for this can be true or false. You have to specify ‘yes’ to allow to translate the text content and ‘no’ to do not allow to translate text.
Example: Paragraph with a translate attribute
|
1 |
<p translate="yes">This is a paragraph with content to translate.</p> |
Output
This is a paragraph with content to translate.
When the user clicks the translate button given at the top of the browser, the content that contains the translate attribute gets translated into the requested language.