Inspecting HTML Tags

Today's article provides code to display the attributes of specific HTML tags that occur on a web page. It can be used for any HTML tags, although the software provided here was written with meta and link tags in mind.

The accompanying JavaScript software is intended to be used during development.

The HTML meta tag located in a web page source code's head area, in general, contains data about the information on the page. Web page author, page description, and text character set are examples.

The HTML link tag located in a web page source code's head area is often used to link to stylesheets. It has many other uses, too. Specifying a page icon, preloading images, and noting URLs for other-languages of the page are examples.

When a web page is rendered by PHP or other server-side software, that software may insert additional meta and link tags. Ajax and other JavaScript may also be used to insert HTML tags.

The software provided with this article may be used to verify that all the meta and link tags that should be present are indeed there. And vice versa, verify that no such tags are there that should not be present.

The software is a JavaScript function. The function's execution is delayed 5 seconds (delay may be changed) to give the web page time to be modified all that it will.

Here is the JavaScript function that does the work. After that, I'll describe how to use the function.

<script type="text/javascript">
function ShowTagsInAlertBox(HTMLtag)
{
   var allSuchTags = document.getElementsByTagName(HTMLtag);
   var allLength = allSuchTags.length;
   var show = new Array("List of " + HTMLtag + " tags' attributes:");
   var s = new String();
   for( var i=0; i<allLength; i++ )
   {
      var ta = new Array();
      var possibleAttributes = allSuchTags[i].getAttributeNames();
      for( var ii=0; ii<possibleAttributes.length; ii++ )
      {
         s = allSuchTags[i].getAttribute(possibleAttributes[ii]);
         ta.push(possibleAttributes[ii] + "=" + s);
      }
      show.push(ta.join("\r\n"));
   }
   alert( show.join("\r\n---\r\n")+"\r\n===" );
}
</script>

Put the code for the ShowTagsInAlertBox() JavaScript function anywhere in the source code of your web page. Near the bottom is fine.

To use the function, do something like this:

<script type="text/javascript">
setTimeout(ShowTagsInAlertBox,5000,"meta");
</script>

Put the above somewhere below the ShowTagsInAlertBox function. It doesn't matter how far below, so long as it is below. The above code will run the ShowTagsInAlertBox function (after 5 seconds have elapsed) to list all meta tags.

In the above code, ShowTagsInAlertBox is the name of the JavaScript function to run.

The 5000 number specifies the number of milliseconds to delay before the function is run. 5000 milliseconds is 5 seconds. You may change 5000 to your preferred delay.

meta is the HTML tag name to list their attributes for.

Here is a screenshot of the content of an alert box when the ShowTagsInAlertBox function is run with the meta tag specified.

To run the ShowTagsInAlertBox function for the link tag, this can be used.

<script type="text/javascript">
setTimeout(ShowTagsInAlertBox,5000,"link");
</script>

Again, the above needs to be placed somewhere below the ShowTagsInAlertBox function.

A browser's "view source" menu item is unlikely to list all meta and link tags when they are inserted after the page has rendered. The ShowTagsInAlertBox function presented above can be used to list those tags after any web page tag updates have been done.

(This content first appeared in Possibilities newsletter.)

Will Bontrager