articles

Home / DeveloperSection / Articles / HTML5 Attributes

HTML5 Attributes

AVADHESH PATEL 4444 13-Oct-2012

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.

Attribute
Options
Function

accesskey

User Defined

Specifies a keyboard shortcut to access an element.

align

right, left, center

Horizontally aligns tags

background

URL

Places an background image behind an element

bgcolor

numeric, hexidecimal, RGB values

Places a background color behind an element

class

User Defined

Classifies an element for use with Cascading Style Sheets.

contenteditable

true, false

Specifies if the user can edit the element's content or not.

contextmenu

Menu id

Specifies the context menu for an element.

data-XXXX

User Defined

Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".

draggable

true,false, auto

Specifies whether or not a user is allowed to drag an element.

height

Numeric Value

Specifies the height of tables, images, or table cells.

hidden

hidden

Specifies whether element should be visible or not.

id

User Defined

Names an element for use with Cascading Style Sheets.

item

List of elements

Used to group elements.

itemprop

List of items

Used to group items.

spellcheck

true, false

Specifies if the element must have it's spelling or grammar checked.

style

CSS Style sheet

Specifies an inline style for an element.

subject

User define id

Specifies the element's corresponding item.

tabindex

Tab number

Specifies the tab order of an element.

title

User Defined

"Pop-up" title for your elements.

valign

top, middle, bottom

Vertically aligns tags within an HTML element.

width

Numeric Value

Specifies 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">

...
</div>

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.



Updated 31-Mar-2019
Avadhesh Kumar Patel District Project Manager - Aligarh 14 months work experience in Panchayati Raj Department Sector as District Project Manager & 12 months work experience in IT Sector as Software Engineer. :-)

Leave Comment

Comments

Liked By