CODEWITHSUNDEEP
javascripthtml
nickf
nickf

Reputation: 545995

Can I just make up attributes on my HTML tags?

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

Upvotes: 45

Views: 16204

Answers (4)

Ms2ger
Ms2ger

Reputation: 15983

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.

Upvotes: 47

bandi
bandi

Reputation: 4244

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.

Upvotes: 24

Kevin Davis
Kevin Davis

Reputation: 2718

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.

Upvotes: 2

Richard Harrison
Richard Harrison

Reputation: 19393

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"

Upvotes: 4

Related Questions