Creating custom HTML tags, DOM style

What is a custom tag:

Browsers allow us to use a predefined set of HTML tags. There are times when having our own, custom HTML tags would be very useful. Think of a custom HTML tag as an object you define, assign behaviors to, and append to the DOM. When the browser encounters your custom tag, handles it like any other valid HTML tag.

Consider a custom tag called “myhelp” below.

^{_{<b>Mouse over the icon to see more info</b>}}

^{_{<myhelp textalign=”justified” text=” This provides help on the field.”> </myhelp>}}

The “myhelp” tag displays a help icon that, when on mouse over displays a hover layer with the text provided, automatically positioned where the tag is on the page

Why should I have a custom tag library?

It is possible to define the functionality expected of a custom tag using standard html tags and JavaScript events.

But what if your website needs this functionality to be implemented on 30 different pages, and one day the business requirements change, and you find yourself updating each occurrence of these html tags?

In that case, the advantages of using custom HTML tags in a common library become obvious.

Essentially, you modify the base object of your custom tag in one place, and all instances of that custom tag now have the new behavior.

How should we implement it?

Let us take a business requirement and step through the process of meeting it.

Business requirement: Create an input field that allows only numbers and a comma. When the field looses focus (onBlur event), it should format the number correctly. The tag should look like this:

< myfield len=”7” typ=”amount” > </myfield>

Let’s break our custom HTML tag effort into 4 tasks and then we will see how to put them together.

Task 1: Define the tag functionality.

The tag functionality is accomplished with a JavaScript class attached to it. When this class is instantiated, the corresponding object provides functionality of the tag.

One sample implementation for “myfield” tag is defined here. You can create this in “my_common_library.js”, with the rest of your custom tags.

This class takes one argument which is the object passed from the JavaScript function that initializes the process we will get to the function that triggers the initialization process in a moment.

What should my tag implementation do?

The tag implementation should be able to:

• Read all custom attributes defined in the tag, for example “len” in this case
• Create the underlying HTML field and set/modify its attributes.
• Attach the field to the HTML (DOM) inline with rest of the code.

The following code snippet is a simplified implementation; you can add functionality to check for mandatory attributes, show appropriate message to user, etc

Task 2: Inform the browser

The browser does not understand the tag “myfield”, so the first step is to inform the browser that we will be creating a custom tag of type “myfield”.

This is done by   ^{_{document.createElement(“myfield”);}}

Task 3: Code your HTML

Now you are ready to use your new custom tag inline with the rest of your HTML code.

^{_{<b>Enter principle amount:</b> <myfield typ=”amount” len=”7”>}}

Task 4: Bind new object instance with each custom tag occurrence

Scan the HTML for custom tags and create an instance of the corresponding object (defined in the task 1). Function initializeUI can be invoked on body load event.

Putting pieces together

Create a file called mycalc.html and include tasks 1 through4 in the appropriate locations.

Browser processing

When the page is opened in a browser window it executes the HTML from top to bottom. When it encounters the new tags it does not know how to display them so it leaves a place holder for these tags in the DOM.

As soon as the page is loaded the body “onload” function executes the “initializeUI” function which checks for, and processes each, occurrence of our custom tags.. Based on the tag name, it creates corresponding fields in the place holders using the appropriate JavaScript classes for that custom tag.

The page now shows the fields using the custom tags.

Proving Ground

Binding custom tag with JavaScript object.

• This allows the value of a JavaScript Object or a hidden form field value to be automatically in sync with the custom tag value.

Write once and run everywhere

• Third party sites are able to use the custom library tags without any modification by adding references to your custom library.
• Allows you to write the library and host it on one domain, and can be accessed from any other domain.

This custom tag was tested on IE6/7/8, FF3/3.5, Safari 4 and Chrome 5.

Using these techniques, you will be able to create and implement custom HTML tags for radio buttons, select boxes, error messages, tooltips and many others.

Custom HTML tags can improve every aspect of your web site, from coding and maintenance to user experience.

HTML5 definitely is THE answer for customization, but currently browser support for HTML5 is minimal.