HTML5 Data Attribute Web Developer, London

HTML5 Data Attribute

Data Attributes were a surprise addition to the HTML5 spec.

Developers and designers had long used a manner of ‘spare’ markup attributes in order to target specific parts of their code, at specific code.

They would then use jQuery of Javascript to alter these attributes, essentially using them as a storage method for their own data. HTML5 aimed to allow a best practice method for this instead, bringing in Data Attributes which were specifically designed for this particular purpose.

You will find many jQuery plugins which used class or even rel attributes to toggle between different actions and now with HTML5 there is a more organised technique which is outlined below with several examples of how you can yse HTML5 Data Attributes in your own code.

Data Attributes are really flexible and can be named as pretty much anything that you want, so long as “data-” is used as a prefix. This ensures that your attributes can be named specifically to the purpose for which you need them and you can also use as many as you like, leaving them more organised than the previous way in which unused attributes were piggy backed upon, with no semantic clarity.

The code example below shows how you might set tooltips to appear on hover and store each custom message within it’s respective link. This would keep code maintenance relatively easy as more tooltips are added. jQuery .data() is then used to make adjustments to the Data Attribute.

								
								
								Link
                                
                                
                                $(".tooltip").data("tooltip") === "New Tooltip message";
							

The key fundamental of using Data Attributes in HTML5 is that you only revert to them where there is not already a specific element in the HTML5 that you can use for the task. HTML5 brought us a wealth of new semantic tags and so they should always be used if appropriate.

Data Attributes as CSS Selectors

CSS3 can also be used to access and amend elements of your page as a form of selector, see below for an example of that in action. Ideally, however, you wouldn’t use Data Attributes for presentational styles but this is always another option for selection which may just come in handy on occasion.

								
								
								a[data-tooltip="Tooltip message"] {
                                	display: none;
                                }
							

Existing Browser Support for Data Attributes

All new HTML5 and CSS3 items are subject to browser support which you need to consider when using them in your own code. Happily, Data Attributes are relatively solid cross-browser, and can be used all the way back to IE7, assuming the HTML5 reset is already being used. jQuery fits better with Data Attributes than native jQuery because of it’s in-built .data() option that can greatily reduce the amount of code that you need to write.

Organising and Maintaining Data Attributes

As a relatively new idea, it is important to consider how you use this part of HTML5 going forward. Where it’s usage grows, it will be necessary to consider how we avoid naming clashes that will likely result from choosing standardised names for our custom data attributes.

The most obvious suggestion would be to prefix each new attribute with another label for that particular section or project, whatever best matches the scope of the attribute. One example would be “data-analytics-height”.

Further Reading on HTML5 Data Attributes

Leave a Reply

Your email address will not be published. Required fields are marked *