New HTML5 Attributes

HTML5 introduced tons of new features and simplified things which needed to be simplified. The first thing that might pop to mind is the doctype declaration. The XHTML1.0 Transitional doctype was monstrous. It was time for a change. However, there are a lot of features which went right under my radar, and I'm sure that there are quite a few which went unnoticed by even the most informed developers. In this post, I am only going to focus on the attributes which were added.

The first attribute which I feel many people have already been exposed to but may not be 100% clear on is the data attribute. This allows you to apply metadata-type attributes to elements. For example, you can attach additional information to an item which does not would otherwise have to be referenced elsewhere or with arbitrary classes. I feel as though HTML5 Doctor explained the data attribute expertly by using it in reference to keeping track of the amount of fruit available:

<div id='strawberry-plant' data-fruit='12'></div>

 The data attribute is used to refer to the amount of strawberries available from the strawberry plant. It can then be accessed by getting the id of the element with JavaScript, then using the getAttribute and setAttribute methods in order to get and set it's values. Hopefully in the future, the "proper" method of using the new dataset method.

The next attribute which has been made available by HTML5 is the contenteditable attribute. This allows otherwise static content to be user-editable. An excellent example of this was hosted online by HTML5 Demos. This could be used for a variety of applications. One such application I can think of would be hooking it up do a database to store this data per user or the like. With proper sanitation of the data of course.

The next attribute, which is actually not supported by any major browser yet, is the contextmenu attribute. This will be a nice one. It allows you to apply custom right-click actions to items on a page. The example provided by the W3 Schools is a right click menu for a paragraph. Each item in the menu will execute a particular JavaScript function. Very very cool stuff.

The new draggable attribute does what one would expect. It makes objects in the DOM draggable and -- with a little bit of JavaScript -- droppable. It is nice to see something like this being done without jQuery. An example can be found, once again, on the HTML5 Demos site.

Hidden is the next attribute in the list. This is another one which takes functionality that used to be available only within other languages and makes it an HTML5 attribute. This one, unsurprisingly, accomplishes the same thing as using CSS to set something's display to none. An example is graciously provided by W3 Schools.

One final new attribute which was added was the item attribute. I do not want to put out false or incorrect information, so I am going to have to do more research about this one, and maybe make an entirely new post about it, since it looks quite interesting. Sorry folks!

I am sure there are a ton of new features and maybe even a few dozen attributes which I missed in this post, however, I feel as though this is a good primer on some of the attributes which were added in HTML5 that many people may not have noticed.

HTML5 is truly an advancement, and as browsers become more accepting of these new features, and people migrate towards HTML5, I have a feeling we will be seeing quite a few beautiful websites pop up out of the woodworks, which will redefine interactive.

As always, thanks for reading! If you have any suggestions, corrections or general information, feel free to post a comment! Even if you have nothing to say, go ahead and leave your mark on this blog post! Why not?