[X]HTML custom tags: pros & cons
https://stackoverflow.com/questions/3063418
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'd like to use some semantic [X]HTML tags instead of <div>s: <article>, <product>, <footer> etc. Some of them are already presented in the upcoming HTML5, however, it's not fully supported.
Which are the possible cons I might face when Rendering? Using CSS, JS?
The one I remember is: IE6 can't clone tags it doesn't know.
Solution
Adding the following JavaScript fix makes custom HTML5 tags work in IE. In fact they work in every other browser I have tried. I have built my website using HTML5, and although it doesn't look great in IE6&7, it still works. Here is the code you put in your template header:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1;display: block;} </style> <![endif]-->
Using HTML5 tags gives you increased control using CSS due to their semantic nature. It is actually a lot easier making sites, as they are easier to understand if you use the tags correctly.
Using divs everywhere is fine, because if they have appropriate ID's and classes, they are still semantic, but with the HTML5 tags, you can recognize page structure a lot faster.
OTHER TIPS
The question mentions 'cloning', so whether or not IE6 can style a custom element (it can) isn't really the question if the intention is to use JS to clone custom elements if IE6 can't manage that (which I don't know).
If the idea is just to style custom elements then every browser can do it. Because of IE6 you need to namespace your custom elements thus <prefix:custom /> and specify the namespace in the HTML element thus <html xmlns:prefix="http://domain/path">.
To get it all exactly right in all browsers (and so Javascript picks up on custom elements) you also need to provide a custom DTD, so that the namespacing of custom elements work consistently thus <!DOCTYPE html SYSTEM "http://domain/path/custom.dtd"> and then write the DTD, which unfortunately isn't trivial and has to include a complete replacement for the HTML DTD it replaces.
So after applying a custom DTD, specifying a custom namespace and applying custom elements they can be styled in any browser thus <style>prefix\:custom {background:red;} </style>.
This works consistently across all browsers but is debateable in value. It allows the use of consistent meaningful markup with elements that are clearly delineated by namespace and does not risk pollution of styling by cascading and avoids div-itis.
It is however a bit of a ghetto in web developement involving complexity that may not be sufficiently rewarded.
Even if you use JS to make IE 6 "recognize" HTML5 tags, you'll still have problems, since IE 6 will not allow to nest such tags.
On the other hand, if your web page is not application-oriented, but purely for presentation, you could as well use plain old XML with styling. It differs a bit from the traditional way of making pages, but in XML terms there are no "old" or "new" tags.
See this page -- http://feeds.feedburner.com/blogspot/MKuf (Google's blog feed) -- as an example of styled XML. JS and DOM API's work just as well.
This doesn’t entirely speak to your question, but <product> isn’t semantic as far as computers are concerned.
A human can read it and think “Aha, this must be a product, which in the context of this shopping website means something I can buy, and therefore doesn’t mean ‘a quantity obtained by multiplying quantities’ as it might do on mathoverflow.com”. That’s genuinely useful for any human reading the code, so it’s semantic in that sense.
But as far as a computer parsing your page as HTML is concerned (or a human viewing your HTML page in a browser instead of reading the code), it’s just an unknown tag, and thus won’t get any useful default styling (unlike the <p> tag, which gets nice margins to make things readable on-screen) or behaviour (unlike the <a> tag, which is clickable if you give it a href attribute).
Computers only get semantics when people agree what tags mean, via specs like HTML5.
Unless you're developing for a very limited set of browsers, this sounds like a bad idea. If it works at all in older browsers, it won't work well; it'll be years until we can expect good HTML 5 support from all common browsers.
