HTML Global Attributes

What is global attributes?

Global attributes are common to all HTML tags, even though the attributes may not have any effect on some elements.


Class Attribute

Classes allows CSS and Javascript to select and access specific elements.

A HTML tag can have more than one class value.

Same class name can have more than one HTML tag.

Syntax

<tag_name class="ClassName">

Example 1 - Used with css style

Try Yourself

In the above example, for div tag we have assigned cls1 as class name.

For class cls1 we have assigned background and font-size css property, the output will be shown after applying the given properties.

Example 2 - Same class value in multiple elements

Try Yourself

In the above example, for both the div tags we have assigned font_cls as class name.

For class font_cls we have assigned font-size css property, the output will be shown after applying the given properties for both the div tags.

Example 3 - Used with javascript

Try Yourself

In the above example, for both the div tag we have assigned cls1 as class name.

The javascript access all the class which has class name as cls1, and using the for loop it access and changes all the elements font size to 32px.


contenteditable Attribute

This attribute have true or false value.

If the value is true, it indicates that the element must be editable.

Syntax

<tag_name contenteditable="boolean">

Example 1

Try Yourself

If the attribute is not specified, it will be inherited from its parent element.

In the below example, the contenteditable is set for the first div, but the contenteditable is not set for the second div (child element).

So the child element inherit the parent element's contenteditable attribute, and the second divs content also will be editable.

Example 2 - Inherit from parent element

Try Yourself

contextmenu

It is used to add an user defined menu item to contextmenu appeared when the right mouse button is clicked.

The following examples only works in firefox.

Example 1

Try Yourself

In the below example, a contextmenu with menu Country is created, and sub menu India and USA is added to it.

Example 2

Try Yourself

custom data attributes

We can create custom data attributes for html elements.

When creating a custom data attribute it should start with data, followed by a hyphen and a user defined name (data-*).

custom attribute name should follow the below restrictions

  • The name must not start with xml
  • The name must not contain any semicolon.

Example 1

Try Yourself

In the above example, we have added a textbox with custom data attribute name as data-location-id and its value is IND.

Accessing custom data attribute in CSS

In CSS the name of the custom data attribute is case-insensitive, but the value given to the custom data attribute is case-sensitive.


In the below example, by using CSS we access the textbox element data-location-id as [data-location-id="IND"], we can also access it as [DATA-LOCATION-ID="IND"] because it is case-insensitive

Example 2

Try Yourself

Access custom data attribute in JavaScript

When JavaScript access the custom data attribute, it will be accessed using HTMLElement.dataset.dataAttributeName or HTMLElement.dataset["dataAttributeName"].

Dash(-) present in the custom attribute after data- will be replaced by the capitalization of the next letter, converting the name to camelcase. In the below example the html element has custom data attribute name as data-location-id, but in JavaScript we have to access it as locationId (htmlc.dataset.locationId).

Example 3

Try Yourself

dir Attribute

This attribute indicates the directionality of the element's text.

This attribute can contain the following three values:

  • ltr is used on languages which has directionality from left to right(eg.English). It is the default value.
  • ltr is used on languages which has directionality from right to left(eg.Arabic).
  • If the text direction is unknown auto is used. When it is used browser based on the content determines the direction.

Example

Try Yourself

draggable Attribute

This attribute indicates whether the element can be dragged or not.

It can have the following values:

  • true, can be dragged.
  • false,can not be dragged.

Syntax

<element draggable="true or false">

In the below example, the first image draggable attribute value is set as false so if you try to click and move the image you can't, but for the second image the draggable attribute value is set as true so you can click and move that image.

Example

Try Yourself

hidden Attribute

This is used to hide the specified html element.

This attribute value is boolean and the default value is true.

In the below example the first textbox and first div contents won't appear since its hidden attribute value is set as true, while the second textbox and second div contents are displayed.

Example

Try Yourself

id Attribute

This is a unique identifier.

id attribute value must be unique for the whole document.

Used to identify the element when linking the html element with style or script.

Example - Used in CSS

Try Yourself

Example - Used in JavaScript

Try Yourself

id attribute value must not contain whitespace.


spellcheck Attribute

spellcheck attribute defines whether the element can be checked automatically for spelling errors.

This attribute value is boolean and the default value is true.

Example

Try Yourself

style Attribute

The style attribute defines css properties, it directly apply css style to the html element without using style tag or CSS file.

Example

Try Yourself

It is recommended to use CSS properties in separate files. Also we can write CSS properties in <style> tag and style attribute.


tabindex Attribute

It is used move the cursor from one html control to another when pressing the tab key.

Accept only integer value. The value start from 1.

Example

Try Yourself

title Attribute

It will display extra information about the specified element, and displayed as tooltip.

This attribute can contain several lines.

Example

Try Yourself

accesskey Attribute

The accesskey attribute specifies a shortcut key to activate/focus an element.

This attribute is used to assign shortcut keys for all html elements.

Syntax

<element accesskey="character">

element - html elements like <a>,<img>,<p> and etc.

character - Any numbers or alphabets.

Note: The shortcut key varies in different browsers:

  • Chrome,Safari,IE,Opera 15+: [ALT] + accesskey.
  • Opera before 15: [SHIFT] [ESC] + accesskey.
  • Firefox: [ALT] [SHIFT] + accesskey.

In the below example, the textbox accesskey attribute value is g, so to activate the textbox the following keys are pressed

  • Chrome,Safari,IE,Opera 15+: ALT + g.
  • Opera before 15: SHIFT + ESC + g.
  • Firefox: ALT + SHIFT + g.

Example 1

Try Yourself

Example 2

Try Yourself