What's New with HTML 5: Global Attributes

http://www.htmlgoodies.com/html5/tutorials/Whats-New-with-HTML-5-Global-Attributes-3875431.htm (Back to article)

Introduction to HTML 5

In the new world of HTML 5 some things will remain the same, some will go away and many will be added. In this article we will take a look specifically at what's new with the global (sometimes called standard) attributes. Global attributes are those attributes that apply to all HTML elements.

About HTML 5 Attributes

For those new to HTML, attributes are the parts of HTML elements that define them. Attributes provide additional information that a browser can use to determine things like how to display an element. Attributes are also responsible for providing details that a developer can use when creating scripts, such as the id attribute which allows the developer to find a specific element to manipulate using a scripting language like JavaScript.

Global attributes in HTML 4 were designed to be universally applied to all HTML elements. That meant that every HTML element had an id attribute, a lang attribute, a class attribute and so on. With HTML 5 there are really few new truly global attributes. Instead you will find new mostly global attributes that apply to many but not all elements.

Some Things Remain the Same

The genuinely global attributes from HTML 4 included in HTML 5 are the same in both versions of HTML. So, I'm going to just run down the list with a brief explanation of each for readers that are new to HTML:

accesskey – Use this attribute to indicate a keyboard shortcut key. A very handy tool for long or frequently accessed forms.
class –Defines the name of the style to be used that would be found in a CSS style sheet.
dir –Indicates language direction. That is either left to right (ltr) or right to left (rtl).
id –This gives the element a unique ID that can be used for different purposes, not the least of which is an identifier for accessing the element from your JavaScript code.
lang –Specifies the language being used for the element. Languages are indicated with specific codes. You can find a list of the ISO language codes on the w3cSchools.com website.
style –Defines inline styles for the element such as color or alignment.
tabindex –Specifies the tab order index for the element. This allows the developer to customize a tab order that makes sense for the page.
title –Provides additional information for the element which is often used as a source for tooltip text.

But Many Things are New

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. Here is a nice contenteditable example.
contextmenu – This is used to specify a menu that corresponds to a given element. The value must be the named id of a valid <menu> 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. Here is an example of how draggable works when fully implemented. (use Firefox)
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:
```
<section item>
<h3 itemprop=”articletitle”>HTML 5 Global Attributes</h3>
<p>written by <span itemprop=”author”>Curtis Dicken</span>.</p>
</section>
```
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.

Conclusion

The new additions to the global attributes in HTML 5 are just a tip of the iceberg. Some attributes will likely be rapidly adopted like data and draggable while others are hard to envision widespread use like item and itemprop.

Don't get too excited or nervous yet, though. Implementation of the new HTML 5 standards is a slow and inconsistent process. While some browsers like Firefox and Safari are making steady progress in implementing HTML 5, others like Internet Explorer are lagging behind the pack. What that simply means for developers using HTML 5 is that consistent browser rendering of HTML 5 is just not quite there yet but well on its way.