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:

AttributeOptionsFunction
accesskeyUser DefinedIt helps in specifying a keyboard shortcut for accessing an element.
alignright, left, centerIt horizontally aligns the tags.
backgroundURLIt places an background image behind an element.
bgcolorNumeric, hexadecimal, RGB valuesIt places a background color behind an element.
classUser DefinedIt classifies an element for use with the cascading style sheets.
contenteditabletrue, falseIt specifies if the user can edit the elements content or not.
contextmenuMenu idIt specifies the context menu for an element.
data-XXXXUser DefinedIt is the custom attribute. The authors of the HTML document will define their own attributes and they must start with “data-”.
draggabletrue, false, autoIt specifies if the user is allowed to drag an element or not.
heightNumeric ValueIt specifies the height of the tables, images or the table cells.
hiddenhiddenIt specifies if the element should be visible or not.
idUser DefinedIt names the elements that can be used with the cascading style sheet.
itemList of elementsIt is used for grouping elements.
itempropList of itemsIt is used for grouping items.
spellchecktrue, falseIt specifies if there should be a spelling or grammar check for an element.
styleCSS Style sheetIt specifies an inline style for an element.
subjectUser define idIt specifies the corresponding item of an element.
tabindexTab numberIt specifies the tab order of an element.
titleUser DefinedIt is the “Pop-up” title for the elements.
valigntop, middle, bottomIt aligns the tags vertically within an HTML element.
widthNumeric ValueIt 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.