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.