HTML Global Attributes


Global attributes are attributes with all HTML elements can be used.

You can also search for these topics, what is html global attributes, html global attributes and values, html global attributes reference list.

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
You can also search for these topics, html accesskey attribute example, syntax, create short cut keys for an html tag.

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:

  • Must begin with a letter A-Z or a-z.
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_").

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. :)


You can also search for these topics, html class atribute can be used on css classes more then one, syntax and examples, allowed characters, multiple classes, html set class atribute dynamically.

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 :-

Write this text right-to-left!

You can also search for these topics, html dir attribute values, html dir attribute more then one, syntax, allowed characters, text direction.

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 is a visible paragraph.

Note: The hidden attribute is not supported in IE10 or earlier versions.

You can also search for these topics, html hidden attribute not working, html hidden attribute true false.

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.

Naming rules :

  • Must contain at least one character.
  • Must not contain any space characters.

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>
You can also search for these topics, html id attribute rules, html unique id attribute example, space, format and naming rules, allowed characters, what is the purpose of id attributes in 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.


You can also search for these topics, html lang attribute examples, multiple languages, spanish, french, check html lang attribute code, list of language codes.

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.


You can also search for these topics html style attribute syntax, html style attribute list, backround image, bold, multiple attributes or properties, color, border, box sizing.

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 :-

W3Schools

Google

Microsoft

Note: Try navigating the elements by using the "Tab" button on your keyboard.


You can also search for these topics, html tabindex properties, html tabindex attribute arrowkey, html tabindex attribute doesnt work, html tabindex attribute display none.

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.

Simmanchith.com

You can also search for these topics, html title attribute not showing, html title attribute maximum length, line break, alternative, delay, duration.

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>

You can also search for these topics, html translate attribute autocomplete, html translate attribute and properties, case sensitive, example.