HTML Global Attributes
Global attributes are attributes with all HTML elements can be used.
HTML accesskey Attribute
A simple option key to activate / focus the element is set to the accesskey Attribute.
The value of the accesskey must be a single character (a letter or a digit).
Syntax :-
<element accesskey="character"></element> Attribute Values
| Value | Description |
|---|---|
| character | The shortcut key to activate/focus the element is specified by a single character. |
Example :-
<a href="https://www.simmanchith.com/tutorial/html/html-introduction.aspx" accesskey="h">HTML tutorial</a><br>
<a href="https://www.simmanchith.com/tutorial/php/php-introduction.aspx" accesskey="p">PHP tutorial</a>
Output :-
Note: The shortcut is varying in different browsers:
- Edge, IE, Chrome, Safari, Opera 15+: [ALT] + accesskey
- Opera prior version 15: [SHIFT] [ESC] + accesskey
- Firefox: [ALT] [SHIFT] + accesskey
HTML class Attribute
The attribute for class specifies an element with one or more CSS class names.
The class attribute is used primarily to show a CSS class in a sheet of style. It may, however, be used to make amendments to HTML elements with a given class via a JavaScript (via Html DOM).
Syntax :-
<element class="classname"></element> Attribute Values
| Value | Description |
|---|---|
| classname | Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. < span class="left important">. This allows you to combine several CSS classes for one HTML element. Naming rules:
|
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>
Output :-
Header 1
A paragraph.
Note that this is an important paragraph. :)
HTML dir Attribute
The text direction of the element's content is specified by the dir attribute.
Syntax :-
<element dir="ltr|rtl|auto"></element> Attribute Values
| Value | Description |
|---|---|
| ltr | The default setting. Text direction is from left to right. |
| rtl | Text flow from right to left |
| auto | Allow the browser to determine the direction of the text based on the content (only recommended if the text direction is unknown). |
Example :-
<p dir="rtl">Write this text right-to-left!</p> Output :-
HTML hidden Attribute
The hidden attributes are boolean types and used show or hide an html element.
When present, the element is not yet relevant, or no longer relevant.
Browsers should not show elements with a specified hidden attribute.
You can also use the hidden attribute to prevent a user from viewing an item until other conditions have been
met (like selecting a checkbox, etc.).
Syntax :-
<element hidden></element> Example :-
<p hidden>This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE10 or earlier versions.</p>
Output :-
This paragraph should be hidden.
This is a visible paragraph.
Note: The hidden attribute is not supported in IE10 or earlier versions.HTML id Attribute
The id attribute sets a unique identification for an HTML element (the value must be unique within the HTML document).
It is most common for id to point to a style in a style sheet and to manipulate the element with a specific id with JavaScript (using the HTML DOM).
Syntax :-
<element id="id"></element> Attribute Values
| Value | Description |
|---|---|
| id | Specifies a unique id for the element.
|
Example 1:- Use the id attribute to manipulate text with JavaScript:
<!DOCTYPE HTML>
<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Example 2:- Use the id attribute to style text with CSS:
<!DOCTYPE HTML>
<html>
<head>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Simmanchith is the best tutorial site!</h1>
</body>
</html>
HTML lang Attribute
The attribute lang specifies the content language of the element.
Common examples are "en" for English, "es" for Spanish, "fr" for French, and so on.
Syntax :-
<element lang="language_code"></element> Attribute Values
| Value | Description |
|---|---|
| language_code | The language code for the element's content is specified here. |
Example:- Some French text in a paragraph:
<p>This is a paragraph.</p>
<p lang="fr">Ceci est un paragraphe.</p>
Output :-
This is a paragraph.
Ceci est un paragraphe.
HTML style Attribute
The style attribute specifies an element inline style.
The style feature overrides any globally defined style, for example style specified in the style tag or
external style sheet.
The attribute style may be used for any HTML item (it will validate on any HTML element. However, it is not necessarily useful).
Syntax :-
<element style="style_definitions"></element> Attribute Values
| Value | Description |
|---|---|
| style_definitions | One or more CSS properties and values separated by semicolons (e.g. style="color:blue;text-align:center"). |
Example:-
<h1 style="color:blue;text-align:center;">This is a header</h1>
<p style="color:green;">This is a paragraph.</p>
Output:-
This is a header
This is a paragraph.
HTML tabindex Attribute
The attribute tabindex specifies the element's tab request (when the "tab" button is used for navigating).
Any HTML element may have the tabindex attribute (it can validate any HTML element). It's not necessarily helpful, however).
Syntax :-
<element tabindex="number"></element> Attribute Values
| Value | Description |
|---|---|
| number | Specifies the tabbing order of the element (1 is first). |
Example:- Links with a specified tab order.
<div tabindex="1">W3Schools</div><br>
<div tabindex="3">Google</div><br>
<div tabindex="2">Microsoft</div><br />
<p tabindex="4"><b>Note:</b> Try navigating the elements by using the "Tab" button on your keyboard.</p>
Output :-
Note: Try navigating the elements by using the "Tab" button on your keyboard.
HTML title Attribute
The attribute title specifies additional element details.
When moving mouse cursor across the element, the information will most often be shown as a tooltip text.
Any HTML element (it validates on an HTML item) can have its title attribute. It's not necessarily useful, however).
Syntax :-
<element title="text"></element> Attribute Values
| Value | Description |
|---|---|
| text | A tooltip text for an element |
Example:- Use of the title attribute in an HTML document:
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">Simmanchith.com</p>
Output :-
WHO was founded in 1948.
HTML translate Attribute
The attribute for the translate indicates whether or not the content of an item should be translated.
Syntax :-
<element translate="yes|no"></element> Attribute Values
| Value | Description |
|---|---|
| yes | The element's content should be translated, according to this specification. |
| no | The element's content should not be translated, according to this specification. |
Example:- Specify that some elements should not be translated:
<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>