Friday 25 October 2013

As explained in previous chapter, elements may contain attributes that are used to set various properties of an element.
Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.
Following is the example of an HTML5 attributes which illustrates how to mark up a div element with an attribute named class using a value of "example":
<div class="example">...</div>
Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

Standard Attributes:

The attributes listed below are supported by almost all the HTML 5 tags.
accesskeyUser DefinedSpecifies a keyboard shortcut to access an element.
alignright, left, centerHorizontally aligns tags
backgroundURLPlaces an background image behind an element
bgcolornumeric, hexidecimal, RGB valuesPlaces a background color behind an element
classUser DefinedClassifies an element for use with Cascading Style Sheets.
contenteditabletrue, falseSpecifies if the user can edit the element's content or not.
contextmenuMenu idSpecifies the context menu for an element.
data-XXXXUser DefinedCustom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".
draggabletrue,false, autoSpecifies whether or not a user is allowed to drag an element.
heightNumeric ValueSpecifies the height of tables, images, or table cells.
hiddenhiddenSpecifies whether element should be visible or not.
idUser DefinedNames an element for use with Cascading Style Sheets.
itemList of elementsUsed to group elements.
itempropList of itemsUsed to group items.
spellchecktrue, falseSpecifies if the element must have it's spelling or grammar checked.
styleCSS Style sheetSpecifies an inline style for an element.
subjectUser define idSpecifies the element's corresponding item.
tabindexTab numberSpecifies the tab order of an element.
titleUser Defined"Pop-up" title for your elements.
valigntop, middle, bottomVertically aligns tags within an HTML element.
widthNumeric ValueSpecifies the width of tables, images, or table cells.

Custom Attributes:

A new feature being introduced in HTML 5 is the addition of custom data attributes.
A custom data attribute starts with data- and would be named based on your requirement. Following is the simple example:
<div class="example" data-subject="physics" data-level="complex">
The above will be perfectly valid HTML5 with two custom attributes called data-subject and data-level. You would be able to get the values of these attributes using JavaScript APIs or CSS in similar way as you get for standard attributes.


Post a Comment