gravatar custom tag no show

Extending HTML by Creating Custom Tags

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  tag, for example, to show bold text. If you need a list, then you use the 

    tag with its child tag 

  •  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 , and we will pass the email address as an attribute called email.

    You can name your custom tags anything you want, but one thing to notice is that in this example the custom tag name starts with codingdude-. 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 folder gravatar-custom-tag.
    • One HTML file index.html inside the gravatar-custom-tag folder. This file will contain the HTML code.
    • One JS file codingdude-gravatar.js inside the gravatar-custom-tag folder. This file will contain JavaScript code implementing the custom tag.

    Let’s edit the index.html file and make its content look like this:

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

    An example of the 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: http://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:

    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 our codingdude-gravatar.js file and will look like this:

    Looking at the code, we see the function customTag() 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 name tagName, otherwise the tag might not work.

    The fn 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 called email then it will pass that value to the md5() function from our open-source library. The result is then used to compose the URL of the Gravatar image, which is added via an  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 our index.html file in a browser, we will see the Gravatar for my email:

    Viewing the Gravatar with the text

    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 it piechart-custom-tag. This will be our project folder.
    • Inside the piechart-custom-tag folder, create an HTML file and name it index.html. This file will contain the HTML code.
    • Also create a JavaScript file codingdude-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  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 the codingdude-piechart.js file and add the following functions from the tutorial:

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

    Now let’s edit the file index.html and place the custom tag for drawing the pie chart like this:

    The intention here is to set the width and height of the pie chart using the attributes width and height. The colors 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  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 file codingdude-piechart.js and, after the functions taken from the pie chart tutorial, place the following code:

Leave a Comment

Scroll to Top