Custom HTML Tags

I have to mention that “Custom HTML” is really an oxymoron. When you start adding tags that aren’t part of the official standard, then you really have an XML document that the browser attempts to interpret as HTML. Think of this as a technical exercise. Two things led me to this exercise.

New HTML 5 tags

I’ve been doing a lot of reading about HTML5 and some of the new tags that are specified (my favorite such article is here). In this article, Mark Pilgrim suggests going ahead and using the new tags now, even though browser support is limited. Most of the new tags don’t display as anything special, and are only semantic (such as the header, footer, article, or nav tags) and will render the same as a normal span tag. And just like a span tag, you can apply CSS to them as you wish. Except for Internet Explorer, which requires a little JavaScript tricker to make it work:

 
John Resig goes over this trick in detail in one of his excellent blog postings.

Evented Programming

The second piece of this puzzle was an article/video that came along with the 1.4 release of jQuery, where Yehuda Katz discusses his approach to creating widgets on your web pages. He reasons we should make these widgets to function as if they were built into the browser in the first place. For example, say you’d like a tabbed control on your page. The usual approach would be to draw the individual tabs and panels as divs or spans, and attach code to each tab to hide and show their associated panel when clicked. Something like this:

 
If a tab control was built in to the browser, you might just create a tabpanel tag, and fill it with tab and pane tags. Maybe you’d then give the tabpanel an onchange event to do something special when a different tab was clicked. Maybe like this:

 
A shame we don’t have those tabs. Unless we create them, taking advantage of the knowledge at the beginning on this post. Let’s start, as Yehuda might suggest, with…

How We’d Like It to Be

 
The magic is in tabs.js. Here’s what it has to do:

  1. Do the createElement trickery for Internet Explorer
  2. Connect click events to the tab elements
  3. Have those click events display the appropriate pane element and trigger any change event attached to the tabpanel
  4. Give these tags approriate default styles

First, we have to make it so Internet Explorer will see our new tags:

 
That funky bit inside the if statement is a conditional compliation trigger, which will cause these lines to run only for Internet Explorer.

Next we set default styles for the new elements:

 
The following addClass and removeClass just handle adding and removing classes from elements. Toggling a “selector” class allows us to style the selected tab differently:

 
Now we get to the meatiest part (the comments should explain it pretty well):

 
Finally, this last piece hooks everything up when the page loads.

 

The Final Result

This is how it looks in Chrome (it’s very similar in IE7):

Tab Control

Clicking on the tabs shows the associated panel and triggers any onchange event on the tabpanel element. The default styles are fairly plain (intentionally so), but just like any other element can be overridden by a style sheet or inline style declarations.

The propriety of adding custom elements to an HTML document like this may be debatable, but there are places where this technique could certainly be extremely useful.