HTML5 Attributes
What are HTML5 Attributes?
- Elements contain attributes. They are used for setting various properties of an element.
- Attributes can be defined globally that can be used by any element or they can be defined for specific element only.
Example:
Illustrating how to markup a div element with an attribute
<div class = “student”> …....... </div>
- Attributes are specified only in the starting tags and not in the ending tags.
Standard Attributes
Following attributes are supported by all the HTML5 tags:
| Attribute | Options | Function |
|---|
| accesskey | User Defined | It helps in specifying a keyboard shortcut for accessing an element. |
| align | right, left, center | It horizontally aligns the tags. |
| background | URL | It places an background image behind an element. |
| bgcolor | Numeric, hexadecimal, RGB values | It places a background color behind an element. |
| class | User Defined | It classifies an element for use with the cascading style sheets. |
| contenteditable | true, false | It specifies if the user can edit the elements content or not. |
| contextmenu | Menu id | It specifies the context menu for an element. |
| data-XXXX | User Defined | It is the custom attribute. The authors of the HTML document will define their own attributes and they must start with “data-”. |
| draggable | true, false, auto | It specifies if the user is allowed to drag an element or not. |
| height | Numeric Value | It specifies the height of the tables, images or the table cells. |
| hidden | hidden | It specifies if the element should be visible or not. |
| id | User Defined | It names the elements that can be used with the cascading style sheet. |
| item | List of elements | It is used for grouping elements. |
| itemprop | List of items | It is used for grouping items. |
| spellcheck | true, false | It specifies if there should be a spelling or grammar check for an element. |
| style | CSS Style sheet | It specifies an inline style for an element. |
| subject | User define id | It specifies the corresponding item of an element. |
| tabindex | Tab number | It specifies the tab order of an element. |
| title | User Defined | It is the “Pop-up” title for the elements. |
| valign | top, middle, bottom | It aligns the tags vertically within an HTML element. |
| width | Numeric Value | It specifies the width of the tables, images or the table cells. |
Custom Attributes
It is a new feature introduced in HTML5. This attribute starts with “data-” and is based on the user requirement.
Example : Simple example for custom attribute
<div class=“student” data-rollno= “46” data-name=“Rahul” >
…......
</div>
In the above example, data-rollno and data-name are the two custom attributes. The values for these attributes are got by using JavaScript APIs or CSS in the similar way for standard attributes.
