Join us Now |  Forgot Password? | Forgot UserName?


Learn step by step

HTML5 Attributes

As covered in previous chapter, elements may contain attributes which are used to define various properties of an element.

Some attributes are globally defined to be used across various elements and some are specific to an individual element. Every attribute has a name and value and is covered in below example.

Following is the example of an HTML5 attributes which illustrates how to mark a class attribute to a div element having value as "style1":

<div class="style1">...</div>

Attributes should always be specified in starting tag.

HTML5 attributes are case insensitive but normal convention is to write them in lowercase.

Standard Attributes:

Below mentioned attributes are supported by almost all HTML 5 tags.

accesskeyUser DefinedDefines keyboard shortcut to access an element.
backgroundURLDefines background for an element like image, color.
bgcolornumeric, hexadecimal, RGB valuesDefines background color for an element
draggabletrue,false, autoDefines whether the element is draggable or not
alignright, left, centerDefines Horizontal alignment of tags
classUser DefinedProvides a attribute to define stylesheet.
contenteditabletrue, falseSpecifies if content is editable or not.
contextmenuMenu idDefines Context menu for an element.
data-XXXXUser DefinedThis is used t define custom attributes. Must start with "data-".
heightNumeric ValueDefines height of the element.
hiddenhiddenDefines visibility of the element.
idUser DefinedUnique identifier for an element.
itemList of elementsUsed in grouping of elements.
itempropList of itemsUsed for grouping of items.
spellchecktrue, falseDefines if element need to have spelling or grammar check.
styleCSS Style sheetUsed to define inline style for element.
tabindexTab numberDefines tab order for an element.
titleUser DefinedTooltip title for your elements.
valigntop, middle, bottomDefines Vertical alignment of an element.
subjectUser define idDefines element's corresponding item.
widthNumeric ValueDefines width of the element.
Custom Attributes:

This is a new feature added in HTML5 to define custom attributes.

Custom data attribute starts with "data-" and can be named based on your requirement. Below is an example:

<div class="example" data-subject="maths" data-level="difficult">

Related Videos