How to add non-standard attributes in a valid way
Question
Is there a way to have non-standard attributes like
onselectstart
oncontextmenu
...
in a tag, and still pass validation as HTML 4.01 transitional somehow?
Apart from adding the properties later on using Javascript.
5 answers
solution1
5 ACCPTED 2009-11-23 20:34:03
Using those attribute will produce an invalid document.
Adding those attributes later using Javascript will produce an invalid document (even if the W3C validator is unable to tell you so).
But W3C has never been against using proprietary extensions. Validation should not be a requirement. It is a way to tell you when you do not conform to the spec. W3C will not send the FBI just for an invalid page.
If you are relying on proprietary extensions to give your visitor a better experience (but not rely on it) then you are on the good path :-) Just pray (or contribute) for those to be in the next spec.
Now if it is about preventing browser context menu or selection, that's just rude! Don't do it!
solution2
5 2009-11-23 20:41:05
While you can't add your own tags or attributes in HTML 4.01, a common technique is using standard HTML tags or attributes to include your information, even if it isn't exactly the correct usage according to the spec. For example, the 'class' attribute can store almost any kind of data:
<a href="#" id="user-link-1" class="username:matt email:matt@example.com">Matt</a>
You can retrieve the class of the link above and split the 'class' attribute up to retrieve your data.
Some other tags and attributes I've seen used for custom data: <script> tags with a non-JavaScript 'type' value, hidden input values, the 'title' attribute on various tags.
You have a couple of other options if you don't mind changing from HTML 4:
- use HTML 5, which supports custom attributes that start with 'data-'
- use XHTML, which support custom tags and attributes via an XML namespace .
You can also add custom attributes to your HTML document at runtime via JavaScript. For example:
var body = document.getElementsByTagName("body")[0];
body["my-attribute"] = "Hello, world!";
alert(body["my-attribute"]);
This can be helpful if your information is dynamic and doesn't need to be stored in the markup at all.
solution3
2 2009-11-23 20:22:38
No, you would have to change the doctype.
<!DOCTYPE HTML>
That doctype will allow you to use your own attributes. Heres a good article on the matter
solution4
2 2009-11-23 20:25:47
No, it isn't. There is no scope for adding things to the language while still conforming to the language.
solution5
0 2014-07-10 07:12:29
One thing I've done in the past is just use "data", which is commonly used in slideshows etc. But write out the data you need the same way you would in the "style" attribute.
<div class="your_element" data="onselectstart:foo;oncontextmenu:bar;">
</div>
Then use jquery to grab the data:
var onSelectStart = getData($(".your_element"), "onselectstart");
The function:
//
function getData(elementObject, indexString)
{
var dataElements = elementObject.attr("data").trim().split(";");
var result = dataElements.some(function(entry) {
dataArray = entry.trim().split(":");
if(dataArray[0] == indexString)
{
found = dataArray[1].trim();
return true; // return from "some"
}
});
return result ? found : false;
}
Not being valid isn't the end of the world as a couple of others have mentioned. Like I said, "data" is commonly used and it is even highlighted as valid in some IDEs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.