Save the Rare HTML Tags: Recognize and Avoid Common Issues With Rare Tags

Why is it that HTML tags that are solely semantic — those that relay meaning to content, not just aesthetics — have become so rare? The answers are debatable. Nevertheless, there is a difference between rare and extinct, so for developers who like to experiment with the unusual, you may be facing some of these common issues with your not-so-common HTML tags. 

Common Issue #1: It works fine in every browser except …

This is hands-down the most common problem when using rare HTML tags. Browsers tend to be a bit touchy when it comes to supporting various HTML tags, as even some of the trending new tags introduced in HTML5 — like the placeholder attribute — aren’t fully cross-browser compatible yet.

HTML tags that aren’t popular tend to be a lower priority for browsers to accommodate. Toss in a little proprietary drama, like the difference between <abbr> and the now extinct <acronym> tags and the possibility of consistent browser support is possibly rarer than the HTML tag itself, unless forced by the World Wide Web Consortium (W3C).

Don’t despair, though. There are typically JavaScript solutions to mimic the behavior in misbehaving browsers.

Common Issue #2: It’s a little too rare

The introduction of HTML5 brought some exciting new tags into the mix — even some ripe to become less common. However, be mindful of what was also removed because <acronym> wasn’t the only HTML tag that became obsolete in the HTML5 specifications. <dir>, <applet>, <tt> and other predominantly uncommon HTML tags were removed in HTML 5. Avoid pulverizing your keyboard in aggravation, though, by confirming the validity of an unusual HTML tag.

Common Issue #3: It’s missing a requirement

While legal, it’s bad practice to place an <input> tag outside of a <form> element. However, there are specifications that can cause mischief on your page. For example, the <optgroup> element, used to group options within a select drop-down widget, necessitates the label attribute to be specified. Even more, the <meter> element not only demands a value attribute, but also requires min, low, high, max and optimum attributes to be valid floating-point numbers.

Save yourself some time and frustration by checking out the current specifications of an HTML tag before putting it into practice.

When used properly, unconventional HTML tags can produce powerful results. Nonetheless, it’s wise to know the current rule set of any HTML element — common or uncommon — before applying it to your code. This will help you avoid common, and typically time-consuming, issues due to outdated or incorrect usage information. Also, keep in mind the survival of the fittest: Sometimes an HTML tag is rare for a reason.

What’s your favorite rare HTML tag and what problems and fixes have you encountered? Share them in the comments section. Can’t get enough HTML5 tips? Read more in this article.