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.
<tag_name class="ClassName">
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.
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.
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.
<tag_name contenteditable="boolean">
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.
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.
In the below example, a contextmenu with menu Country is created, and sub menu India and USA is added to it.
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.
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
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).
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.
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.
<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.
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.
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.
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.
style Attribute
The style attribute defines css properties, it directly apply css style to the html element without using style tag or CSS file.
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.
title Attribute
It will display extra information about the specified element, and displayed as tooltip.
This attribute can contain several lines.
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.
<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.