Can I just make up attributes on my HTML tags?

44
votes

Am I allowed to add whatever attributes I want to HTML tags such that I can retrieve their value later on using javascript? For example:

<a href="something.html" hastooltip="yes" tipcolour="yellow">...</a>

If that's not going to work, how would you store arbitrary pieces of information like this?

Edit: Since it appears that making up HTML attributes isn't technically valid, I've rephrased the second part of this question into its own question here: How to store arbitrary data for some HTML tags

4
javascripthtml
+1 I am a big fan of using data- attributes for declarative wiring up behavior, isntead of using classes. However, something like tipcolour I would try to use a class if I could get the CSS right. In other words, attributes for behavior, classes for style. – AaronLS

4 Answers

46
votes

In HTML5, yes. You just have to prefix them with data-. See the spec.

Of course, this implies you should be using the HTML5 doctype (<!doctype html>), even though browsers don't care.

24
votes

Well, you can always create your own DTD to get new valid attributes for your tags. Browser won't hiccup, you should test your JavaScript if you can access these custom attributes. Or you can use the existing facilities provided by HTML and CSS. You can use multiple classes like

<a href="..." class="class-one class-two has-tooltip">

For the colour selection I strongly discourage you to use hard-coded colour names in your HTML, you have CSS for declaring styles. Use the class attribute as a hook for the CSS declaration, and choose semantic class names, for example

HTML:

<a href="..." class="has-tooltip common-tooltip">
<a href="..." class="has-tooltip long-tooltip">

CSS:

a.has-tooltip {
   colour: red;
}
a.common-tooltip {
   background: #ddd;
}
a.long-tooltip {
   background: #ebf;
}

And in your JavaScript code you can generate elements with classes like "long-tooltip" and "common-tooltip" instead of "yellow-tooltip", so you won't contradict yourself in case of redesigning the page to have green tooltips.

4
votes

You can. The page will not pass verification, however most browsers will accept it.

It is almost certainly the wrong way of doing it. Try using class="hasTooltip_yes tipcolour_yellow"

2
votes

Depending on the information you want to store you should look at some of the other attributes available. These don't look like good candidates, but 'rel' has been used for lots of interesting things.