Arin Adamson
By Arin Adamson | Web Dev | December 26, 2014

Unsupported HTML5 Tags

Last week I wrote about some new HTML5 tags that you should be using if you are not already. This week, we’ll go over the HTML5 tags that were released with the other semantic tags and input types, but that are not quite supported by all browsers just yet. Even some of the HTML5 tags that I discussed last week can have different functionality between each browser. This can happen because the browser is the lens that interprets how and if to display particular bits of client-side code.

Even though some browsers do not support the following new HTML5 tags, don’t let that turn you away from using them. Just make sure to create a JavaScript or CSS alternative if the functionality is lost in another browser. If you are experienced with web development, then you will know who the main culprit typically is on not supporting particular client side functionality: Internet Explorer, all of the web developers around the world would like to thank you for making our job just that more difficult.

<details> & <summary>

The <details> tag allows you to add an additional area of content the website visitor can hide or show on demand. This enables you to provide “help” information or text that not every visitor needs to see. It’s a good option to use when trying to organize content and keeping your web page from becoming cluttered. Any type of content can be inserted, so you could include a video, an image or even a <canvas> section the user can choose to hide or show.

The <summary> tag encompasses the text that will be shown and, if clicked, the rest of the <details> content will be displayed. Try the example below:

 

 

Click me and I shall show you knowledge
The knowledge you seek is contained with-in the next drop down. Click me
whitehatgoogle

 

 

This tag is not supported by either Internet Explorer or Mozilla Firefox, which is a disappointment, because a single tag for this functionality is really simple. Nonetheless, we can create a simple jQuery script and some CSS which enables us to include the same functionality across all browsers. Below I have included some CSS and jQuery that can you can use in your website. The only stipulation with the code below is that whatever you would like to hide needs be contained within some <div> tags.

summary{
display:block;
}
details div {
display:none;
}
<script>
$(document).ready(function(){
$(‘summary’).click(function(){
$(‘details div’).slideToggle(‘fast’);
});
});
</script>

<output>

The <output> tag presents a much easier way to create a user input calculator. Instead of having to include a submit button and create some fancy JavaScript, you can now use the <output> tag to calculate user input data. Unfortunately, this tag is not supported by Internet Explorer, which mostly makes it a waste. Because Internet Explorer does not support the output tag, you still need to revert back to the old methods of creating a basic calculator form. On the other hand, if you do not want to conform your website’s calculator functionality to visitors using Internet Explorer, then the <output> tag is just for you. Try it out for yourself.

<datalist>

The <datalist> tag is a useful new HTML5 tag that adds user-friendliness to your web forms. <datalist> pre-defines a list of values for an <input>, which a user can select to use. This is especially useful for providing user-friendliness in search forms. When the item the visitor is looking for is just on the tip of their tongue or they just had a brain-fart, having a <datalist> associated with the search input can help them find what they are looking for. It works similar to a <select> input drop down, where you enter in <options> for the user to select and the user then selects one of the options.

Earlier versions of Internet Explorer do not support this function (neither does Safari). Do not worry though, as this loss of functionality in the browser will only cause the <datalist> not to appear. Your form input will function just as it would without the <datalist> tag. Test the <datalist> tag out for yourself.

<meter>

Personally, I have never used the <meter> tag, though I am certain there are some uses for it. The <meter> tag basically displays a graphical meter of a set percentage. For example, I can say display a value of 5 between a min of 0 and 10. The graphical meter would be 50% full. Also, I could just tell the <meter> tag to display 50% full using a value of 0.5. The <meter> tag is not supported by Internet Explorer, so it takes away the easiness of using the new HTML5 tag if you want your website to properly support Internet Explorer. Try it out at W3Schools.

In conclusion, HTML5 released a ton of new awesome features. Some of the new features are very useful, while others are just a pain when it comes to browser support. I (and many other developers) am wishing for unification in getting behind all of the new HTML5 features and any future ones. However, that would take action from developers as well as non-developers. Until developers get support from all browsers, we sadly cannot use some of the new HTML5 elements to create beautiful, user-friendly websites, as efficiently as possible.

background dots

Related Topics

Mastering Your GTM Pt 2: Techniques on How to Improve your GTM

by Ryan Rosati

In part 1 of this series, Master your GTM Pt 1: Auditing Your Google Tag Manager in 3 Steps, I showed you how…

Programmatic Advertising Unpacked: Why You Need it in Your Digital Strategy

by Nick Rennard

Marketers understand the importance of incorporating a digital strategy—leveraging various channels to achieve their performance marketing efforts—into their omnichannel marketing mix. Historically, advertisers…

Navigating Your GA Part 1:
3 Tips for Understanding Your Audience

by Rebecca Berin

So, you’ve spent all this time working on creating the perfect site in hopes it will resonate with your audience and ultimately convert…

In the time it takes to read this sentence, you could be on your way to a well-oiled demand generation machine. Ready for your blueprint?

yes, i want my Digital blueprint