Chapter-2(HTML5) by ashish2expert


More Info
									   2.   LIST OF ATTRIBUTES
        2.1.   Global Attributes

The following attributes are common to and may be specified on all HTML elements (even
those not defined in this specification):

   •    accesskey
   •    class
   •    contenteditable
   •    contextmenu
   •    dir
   •    data-*
   •    draggable
   •    dropzone
   •    hidden
   •    id
   •    itemid
   •    itemprop
   •    itemref
   •    itemscope
   •    itemtype
   •    lang
   •    spellcheck
   •    style
   •    tabindex
   •    title

The following event handler content attributes may be specified on any HTML element:

   •    onabort
   •    onblur*
   •    oncanplay
   •    oncanplaythrough
   •    onchange
   •    onclick
   •    oncontextmenu
   •    oncuechange
   •    ondblclick
   •    ondrag
   •    ondragend
   •    ondragenter
   •    ondragleave
   •    ondragover
   •    ondragstart
   •   ondrop
   •   ondurationchange
   •   onemptied
   •   onended
   •   onerror*
   •   onfocus*
   •   oninput
   •   oninvalid
   •   onkeydown
   •   onkeypress
   •   onkeyup
   •   onload*
   •   onloadeddata
   •   onloadedmetadata
   •   onloadstart
   •   onmousedown
   •   onmousemove
   •   onmouseout
   •   onmouseover
   •   onmouseup
   •   onmousewheel
   •   onpause
   •   onplay
   •   onplaying
   •   onprogress
   •   onratechange
   •   onreadystatechange
   •   onreset
   •   onscroll*
   •   onseeked
   •   onseeking
   •   onselect
   •   onshow
   •   onstalled
   •   onsubmit
   •   onsuspend
   •   ontimeupdate
   •   onvolumechange
   •   onwaiting

          2.1.1.   The id attribute

The id attribute specifies its element’s unique identifier (ID). The value must be unique
amongst all the IDs in the element’s home subtree and contain atleast one character (not
contain any space character or white spaces).
NOTE:- The id attribute can be used for a variety of purposes as a way to target an element
when scripting and as a way to style a specific element from CSS. Don’t use these character
(“-“, “_”, “@”) in id attribute

ID’s have a very special abilities in the browser which is the “hash value” in the URL. If we
have a URL like, the browser will attempt to locate the
element with an ID of ‘comments’ and will automatically scroll the page to show that
element. (Note:- Class attributes don’t have this ability)

          2.1.2.   The title attribute

This element contains a text representing advisory information related to the element it
belongs too. Such information can typically, but not necessarily, be presented to the user as a
tooltip. Here is an example for this

<p>My logs show that there was some interest in <abbr title=”Hypertext Transport

Additional semantics are attached to the title attributes of the <link>, <abbr> and <input>.

          2.1.3.   The lang attribute

This attribute participate in defining the language of the document. This tag contains one
single entry value defines in the language tag (See web). For e.g.

<html lang=”en”>

It defines the English as the language tag.

          2.1.4.   The class attribute

Unlike id, this attribute can be applied to more than one element with same class value.
Classes allow CSS and JavaScript to select and access specific elements via the class selectors.
Here is an example:

<div class=”widget”></div>

<div class=”widget”></div>

<div class=”widget”></div>

By assigning same class name to all three we can apply same set of styling to each one of
NOTE:- We can apply id and class attribute both together in the same element. Take an
example of define markup for a WordPress comment list item:

<li id=”comment” class=”item”>

             2.1.5.   The style attribute

The style attribute contains CSS styling declarations to be applied to the element. This
attribute and the <style> element mainly have the purpose of quick styling. In the following
example, the words that refer to colors are marked up using the <span> element and the
style attribute to make those words show up in the relevant colors in visual media.

<p>My sweat suit is <span style=”color: green; background: transparent “>green</span> and
my eyes are <span style=”color: blue; background: transparent”>blue</span>

             2.1.6.   The data-* attribute

This class of attributes, called custom data attributes, allows proprietary information to be
exchanged between the HTML and its DOM representation that may be used by scripts.

The * may be replaced by any name except the following restriction given below:

    •   The name must not start with xml, whatever case is used for these letters.

    •   The name must not contain any semicolon.

    •   The name must not contain any capital A to Z letters.

These attributes are not intended for use by software that is independent of the site that
uses the attributes.

For instance, a site about music could annotate list items representing tracks in an album
with custom data attributes containing the length of each track. This information could then
be used by the site itself to allow the user to sort the list by track length, or to filter the list for
tracks of certain lengths.


<li data-length=”2m11s”>Beyond the Sea</li>



To top