Certified HTML5 Developer Learning Resources HTML5 New Attributes

Learning Resources
 

HTML5 New Attributes

 The global attributes of HTML 4 were fairly easy and straight-forward in their naming and function. With HTML 5 it's not as easy to infer the function of an attribute from its name. That coupled with the fact that “global” has been downgraded mostly global makes some attributes even more confusing.

  • contenteditable – This is one whose function is suggested by its name. It specifies whether a user can edit the content of the element. The options for this attribute are basically true and false unless the element has a parent which allows for a third choice, inherit. This attribute is one of those exceptions mentioned above as it doesn't really make sense with something like an image element, for example. This attribute makes the most sense with options like the new HTML 5 section element which allows a user to edit content within a defined section of the page. This particular attribute has been implemented in most modern browsers. 
  • contextmenu – This is used to specify a menu that corresponds to a given element. The value must be the named id of a valid element on the page. The point here is to offer menu choices that perform specific tasks for a given element. For example, an image may have a menu with “zoom in” and “zoom out” options.
  • data – This is one is my new favorite of the “global” attributes. First, this one is truly global and applies to all elements. It's basically an attribute with a custom attribute. This allows the developer to add as many custom attributes as they like to any element by adding data- before the custom attribute like this: data-myattribute=”something”. Very cool.
  • draggable – This allow you to define an element as draggable from one place to another on a page. The options are true, false and auto. Of course, it's not as easy as just setting an element's attribute to draggable=”true”. There are drag and drop events that you will have to handle as well as some JavaScript you will have to write to get the drag and drop functionality working. 
  • hidden – This another other truly global attribute inour set. Hidden basically takes hiding an element from a style definition to an attribute. Setting any element to hidden=”hidden” keeps the element from being displayed.

item – Item is part of the new Microdata model that is part of HTML 5. Its purpose is to provide machine-readable groups of elements. You can define either a url or nothing at all to designate an item group. For example,

 

or
.
  • itemprop – Itemprop is used within a designated item (item defined above) to further define the elements within an item. For example, and item may have a headline and a span element which could look something like this: 
    

    HTML 5 Global Attributes
    

    written by Curtis Dicken.
  • spellcheck – This attribute lets you designate whether an element should be checked for spelling and grammar or not. Options are true and false. Omitting spellcheck altogether is obviously equivalent to false. Now, using spellcheck doesn't mean the browser will hold the user hostage until they get their spelling and grammar correct. Rather, browsers will offer hints and highlight misspellings where applicable. Implementation of this is still limited and somewhat quirky but a good idea nonetheless.

    •  

     For Support