Menu
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.
676
Custom HTML tags are new tags that you name yourself in HTML to create new elements.
HTML tags are code elements with the back-end of all web pages, but there are also specific HTML code types which provide search engines with key info for SERP display. Essentially, these elements highlight parts of your content that are relevant for search, and they describe those elements for search crawlers.
Custom tags are not valid in HTML5. But currently browsers are supporting to parse them and also you can use them using css. So if you want to use custom tags for current browsers then you can. But the support may be taken away once the browsers implement W3C standards strictly for parsing the HTML content.
All standard rules of HTML elements apply to custom elements. Just like standard elements, you can create a custom element in the DOM using JavaScript, or declare it in HTML.
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.
96
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.
20
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.
28
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.
23
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.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
