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 :-
Attribute Values
Value | Description |
---|---|
character | The shortcut key to activate/focus the element is specified by a single character. |
Example :-
HTML tutorial
PHP tutorial
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 :-
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
Header 1
A paragraph.
Note that this is an important paragraph. :)
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 :-
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 :-
Write this text right-to-left!
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 :-
Example :-
This paragraph should be hidden.
This is a visible paragraph.
Note: The hidden attribute is not supported in IE10 or earlier versions.
Output :-
This paragraph should be hidden.
This is a visible paragraph.
Note: The hidden attribute is not supported in IE10 or earlier versions.Related Links
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 :-
Attribute Values
Value | Description |
---|---|
id | Specifies a unique id for the element.
|
Example 1:- Use the id attribute to manipulate text with JavaScript:
Hello World!
Example 2:- Use the id attribute to style text with CSS:
Simmanchith is the best tutorial site!
2
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 :-
Attribute Values
Value | Description |
---|---|
language_code | The language code for the element's content is specified here. |
Example:- Some French text in a paragraph:
This is a paragraph.
Ceci est un paragraphe.
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 :-
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:-
This is a header
This is a paragraph.
Output:-
This is a header
This is a paragraph.
Related Links
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 :-
Attribute Values
Value | Description |
---|---|
number | Specifies the tabbing order of the element (1 is first). |
Example:- Links with a specified tab order.
W3Schools
Google
Microsoft
Note: Try navigating the elements by using the "Tab" button on your keyboard.
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 :-
Attribute Values
Value | Description |
---|---|
text | A tooltip text for an element |
Example:- Use of the title attribute in an HTML document:
WHO was founded in 1948.
Simmanchith.com
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 :-
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:
Don't translate this!
This can be translated to any language.