How To Create Your Own Tag

Read Time: 8 mins Languages:

In this tutorial I will show you how easy it is to extend the HTML language with custom tags. The custom tags can be used to implement various behaviors, so they are a very convenient way to write less code and keep your HTML documents simpler.

What Is a Custom HTML Tag?

With HTML you use the<b> tag, for example, to show bold text. If you need a list, then you use the<ul> tag with its child tag<li> for each list item. Tags are interpreted by browsers and, together with CSS, determine how the content of a webpage is displayed and also how parts of the content behave.

Sometimes, just using one HTML tag is not enough for the functionality needed in web applications. Usually this is solved by using multiple HTML tags together with JavaScript and CSS, but this solution is not so elegant.

A more elegant solution would be to use a custom tag—an identifier enclosed in <> which is interpreted by the browser to render our intended functionality. As with regular HTML tags, we should be able to use a custom tag multiple times in a page, and also we should be able to have tag attributes and sub-tags to aid the functionality of the custom tag. So, let's see an example!

Example #1: Creating a Gravatar Custom HTML Tag

Let's create a custom tag that will display the Gravatar picture for a certain email address. We will call this tag<codingdude-gravatar>, and we will pass the email address as an attribute calledemail.

You can name your custom tags anything you want, but one thing to notice is that in this example the custom tag name starts withcodingdude-. It's best practice to use prefixes like this for your custom tags in order to avoid name conflicts with other custom tags. Also, it's obviously a good idea not to use tag names that are already defined by HTML.

To implement and test our tag, we will need to create a few things:

One folder to hold the project files; let's call this foldergravatar-custom-tag.
One HTML fileindex.html inside thegravatar-custom-tag folder. This file will contain the HTML code.
One JS filecodingdude-gravatar.js inside thegravatar-custom-tag folder. This file will contain JavaScript code implementing the custom tag.

Let's edit theindex.html file and make its content look like this:

<html>     <head>         <script type="text/javascript" src="codingdude-gravatar.js"></script>     </head> <body>     This is my Gravatar picture:      <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar> </body> </html>

If we loadindex.html in the browser now, the result is not that impressive because we have yet to implement the code for our custom tag:

One thing to notice is that the browser is very forgiving, so you can have unknown tags in a document and the browser will just ignore them. To have our custom tag actually display the Gravatar picture for my email, we have to first understand how Gravatar works.

Gravatar works by translating an email address to a URL of a PNG image that the user has selected. The translation is made by calculating the MD5 hash of the email address. The Gravatar image URL looks like this:https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. So first we need a function to calculate the MD5 hash from a string. For this we will use an open-source library which we will add to the index.html file like this:

<html>     <head>         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>         <script type="text/javascript" src="codingdude-gravatar.js"></script>     </head> <body>     This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" /> </body> </html>

Now let's move on to the implementation of the custom tag. We will need to implement the code that first identifies our custom tag in the document, and then we need to implement the functionality of our custom tag. This will all go in ourcodingdude-gravatar.js file and will look like this:

function customTag(tagName,fn){   document.createElement(tagName);   //find all the tags occurrences (instances) in the document   var tagInstances = document.getElementsByTagName(tagName); 		//for each occurrence run the associated function 		for ( var i = 0; i < tagInstances.length; i++) {             fn(tagInstances[i]); 		} }  function codingdudeGravatar(element){ 		//code for rendering the element goes here 		if (element.attributes.email){ 			//get the email address from the element's email attribute 			var email = element.attributes.email.value; 			var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png"; 			element.innerHTML = "<img src='"+gravatar+"'>"; 		} }	  customTag("codingdude-gravatar",codingdudeGravatar);

Looking at the code, we see the functioncustomTag() that finds occurrences of a custom tag by name (the tagName parameter) and executes the functionality associated with that custom tag (via the fn parameter).

The document.createElement(tagName) call is necessary for some browsers (IE in particular) to inform the browser that we will be using a custom tag with the nametagName, otherwise the tag might not work.

Thefn parameter is the function that implements what the custom tag is supposed to do. In our case,fn is codingdudeGravatar(). This function takes in as a parameter a reference to the custom tag element. If the custom tag has an attribute calledemail then it will pass that value to themd5() function from our open-source library. The result is then used to compose the URL of the Gravatar image, which is added via an<img> element inside our custom tag element.

The last line of the script calls the customTag() function with the name of the custom tag and its associated implementation function. The custom tag function can be reused for any type of custom tag; you will only have to implement the function that does what you need.

Now, if we load ourindex.html file in a browser, we will see the Gravatar for my email:

Example #2: Advanced Custom HTML Tag for Drawing a Pie Chart

In our previous example, we saw a very simple custom HTML tag implementation. You can use the same approach to implement any custom tag you want.

Let's see how to implement a more advanced custom tag, one that we can use to draw a pie chart. Let's create the files necessary for this custom tag:

Create a folder and name itpiechart-custom-tag. This will be our project folder.
Inside thepiechart-custom-tag folder, create an HTML file and name itindex.html. This file will contain the HTML code.
Also create a JavaScript filecodingdude-piechart.js which will contain the implementation of our custom tag.

Custom tags are very often used as wrappers for various functionalities. In our case, we will use the<codingdude-piechart> tag as a wrapper for drawing a pie chart. If you've missed my tutorial about How to Draw Charts Using JavaScript and HTML5 Canvas, you might want to take a quick peek. We will use the code from that tutorial and wrap its functionality in our custom tag.

So edit thecodingdude-piechart.js file and add the following functions from the tutorial:

drawLine()
drawArc()
drawPieSlice()
Piechart()

Now let's edit the fileindex.html and place the custom tag for drawing the pie chart like this:

<html>     <head>         <script type="text/javascript" src="codingdude-piechart.js"></script>     </head> <body>     <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">       <codingdude-data category="Classical music">10</codingdude-data>       <codingdude-data category="Alternative rock">14</codingdude-data>       <codingdude-data category="Pop">2</codingdude-data>       <codingdude-data category="Jazz">12</codingdude-data>     </codingdude-piechart> </body> </html>

The intention here is to set the width and height of the pie chart using the attributeswidth andheight. Thecolors attribute sets the colors used for the pie chart's slices.

As mentioned before, this custom tag is a bit more complex as we will want to use sub-tags for this custom tag. We want to use the<codingdude-data> sub-tags here to set the data for the chart. Let's now take a look at how to implement the code for this custom tag.

Edit the filecodingdude-piechart.js and, after the functions taken from the pie chart tutorial, place the following code:

//here you should add the function from the tutorial //How to Draw Charts Using JavaScript and HTML5 Canvas //... function customTag(tagName,fn){   document.createElement(tagName);         //find all the tags occurrences (instances) in the document         var tagInstances = document.getElementsByTagName(tagName); 		//for each occurrence run the associated function 		for ( var i = 0; i < tagInstances.length; i++) {             fn(tagInstances[i]); 		} }  function PiechartTag(element){     //add the canvas where to draw the piechart     var canvas = document.createElement("canvas");      //get the width and height from the custom tag attributes     canvas.width = element.attributes.width.value;     canvas.height = element.attributes.height.value;     element.appendChild(canvas);          //get the colors for the slices from the custom tag attribute     var colors = element.attributes.colors.value.split(",");          //load the chart data from the <codingdude-data> sub-tags     var chartData = {};     var chartDataElements = element.querySelectorAll("codingdude-data");     for (var i=0;i<chartDataElements.length;i++){         chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);         //remove the data sub-tags         chartDataElements[i].parentNode.removeChild(chartDataElements[i]);     }        //call the draw() function     new Piechart(         {         canvas:canvas,         data:chartData,         colors:colors         }     ).draw(); }  customTag("codingdude-piechart",PiechartTag);

ThecustomTag() function is the same as the one used in Example #1. The implementation of the <codingdude-piechart> custom tag is contained in thePiechartTag() function. This function takes care of the following aspects:

It creates the<canvas> element where the chart will be drawn, and it adds it inside the custom tag. The width and height of the canvas are taken from the custom tag's attributes.
It looks for thecolors attribute of the element and transforms it into an array of colors used for the pie chart slices.
It loads the<codingdude-data> elements one by one in the data structure passed to the pie chart. Because the elements have text content, the browser will render them and the text content will be shown. Since we don't want that, we can just remove the elements after we grab the data.
Lastly, we call thePiechart() constructor with the options required and then call thedraw() function to draw the pie chart.

If you loadindex.html, you can see that the custom tag is rendered as a pie chart and should look like this:

And there it is, a beautiful pie chart. Changing the<codingdude-data> attributes will change the pie chart accordingly. This same custom tags technique was used for the development of the Infographic Charts & Graphics HTML Tags Library from CodeCanyon.

Infographic charts and graphics HTML tags library — Charts library from CodeCanyon

The library contains custom tags not only for pie charts, but also for line charts, bar charts, and other types of charts.

Final Thoughts

In this tutorial, we have seen two examples of how to create custom HTML tags for two different functionalities. Using thecustomTag() function, you can easily develop your own custom tags.

If you enjoyed this tutorial, we also have a wide variety of other tutorials on HTML5 and related technologies, so don't hesitate to check them out, as well.

DESIGN & ILLUSTRATION / WEB DEV

John is a senior Java Programmer and graphic designer. He has been working as a web developer for the last 10 years and has created the Photoshop tutorials and resources blog PSDDude which has become his main passion. In 2011 he joined the Envato marketplace, creating numerous Photoshop actions and tools for GraphicRiver and also very cool items for CodeCanyon.