HTML: Own attributes for HTML tags and validation
Question by Compi | 2014-05-22 at 09:16
I would like to use some own HTML attributes on my website, for example to be able to pass some information to jQuery.
An example would be something like this:
<div class="infobox" infoid="100"></div>
Imagine having some of those info boxes on a web page. All of these boxes have the class "infobox" and all are assigned with a jQuery OnClick event. Now, the script needs the information, from which box the click came. That is the reason why I have introduced the attribute "infoid" which can then easily be read out by jQuery and passed on to the Ajax-PHP-Script.
All of this is working without any problems. However, my page is not validating in the HTML Validator. I always get the error message "Error: there is no attribute 'INFOID'".
So, what can I do now? Unwillingly, I would do it without this easy method of passing data.
Related Topics
jQuery: Read and Change Data Attribute Value
Tutorial | 0 Comments
PHP: Remove all HTML Tags from String
Tutorial | 0 Comments
TinyMCE should use <b> and <i> instead of <strong> and <em>-tags
Question | 4 Answers
Meta Tags: What are og:title, og:type, og:url and og_image?
Question | 1 Answer
Change Write Protection of multiple Files at once
Tutorial | 0 Comments
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
HTML5: Head Meta Tags - Declare Language and Charset correctly
Question | 1 Answer
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
To make your website pass the HTML validator, you should only use elements and attributes defined in the HTML specification. So, it is not possible to define and use own attributes.
However, there is one exception in HTML5 that should fit your needs. HTML 5 is allowing own attributes starting with "data-" (that is not valid in HTML 4X).
In your case, you can use the data-attribute in the following way which is resulting in valid HTML5:
The "data-" attribute has to be composed of at least one character after the hyphen and it should be written in lowercase letters. It is allowed to use more than one "data-" attributes at one HTML element.
By the way, the data-attribute is coming with another advantage in connection with jQuery:
$('.infobox').data('infoid');The information given in "data-" are automatically parsed by jQuery and can be read out by using the appropriate selector and .data().
2014-05-24 at 14:14