CODEWITHSUNDEEP
javascriptjqueryhtmljavascript-framework
maximus
maximus

Reputation: 2437

Generating/selecting non-standard HTML tags with jQuery, a good idea?

I've noticed that jQuery can create, and access non-existent/non-standard HTML tags. For example,

$('body').append('<fake></fake>').html('blah');
var foo = $('fake').html(); // foo === 'blah'

Will this break in some kind of validation? Is it a bad idea, or are there times this is useful? The main question is, although it can be done, should it be done?

Thanks in advance!

Upvotes: 5

Views: 1068

Answers (5)

Tomalak
Tomalak

Reputation: 338228

HTML as such allows you to use any markup you like. Browsers may react differently to unknown tags (and don't they to known ones, too?), but the general bottom line is that they ignore unknown tags and try to render their contents instead.

So technically, nothing is stopping you from using <fake> elements (compare what IE7 would do with an HTML5 page and the new tags defined there). HTML standardization has always been an after-the-fact process. Browser vendors invented tags and at some point the line was drawn and it was called HTMLx.

The real question is, if you positively must do it. And if you care whether the W3C validator likes your document or not. Or if you care whether your fellow programmers like your document or not.

If you can do the same and stay within the standard, it's not worth the hassle.

Upvotes: 1

Jon Hanna
Jon Hanna

Reputation: 113282

The rules of HTML do say that if manipulated through script the result should be valid both before and after the manipulation.

Validation is a means to an end, so if it works for you in some way, then I wouldn't worry too much about it. That said, I wouldn't do it to "sneak" past validation while using something like facebook's <fb:fan /> element - I'd just suck it up and admit the code wasn't valid.

Upvotes: 1

Levi Hackwith
Levi Hackwith

Reputation: 9332

There's really no reason to do something like this. The better way is to use classes like 

<p class = "my_class">

And then do something like 

$('p.my_class').html('bah');

Edit:

The main reason that it's bad to use fake tags is because it makes your HTML invalid and could screw up the rendering of your page on certain browsers since they don't know how to treat the tag you've created (though most would treat it as some kind of DIV).

That's the main reason this isn't good, it just breaks standards and leads to confusing code that is difficult to maintain because you have to explain what your custom tags are for.

If you were really determined to use custom tags, you could make your web page a valid XML file and then use XSLT to transform the XML into valid HTML. But in this case, I'd just stick with classes.

Upvotes: 0

Zikes
Zikes

Reputation: 5886

The biggest issue I see with this is that if you create a tag that's useful to you, who's to say it won't someday become standard? If that happens it may end up playing a role or get styles that you don't anticipate, breaking your code.

Upvotes: 1

rsp
rsp

Reputation: 111366

You can use non-standard HTML tags and most of the browsers should work fine, that's why you can use HTML5 tags in browsers that don't recognize them and all you need to do is tell them how to style them (particularly which tags are display: block). But I wouldn't recommend doing it for two reasons: first it breaks validation, and second you may use some tag that will later get added to HTML and suddenly your page stops working in newer browsers.

Upvotes: 1

Related Questions