Schalk Neethling

Scripting on Caffiene

Two Little Known HTML5 Attributes

| Comments

The new HTML5 specification has introduced an array of new elements and attributes, some more useful than others, and some better implemented and supported.

Of course, if you want to know whether you can safely use one of these, there is the indispensable There are some though that has flown below the radar but, that can be very useful.

Here I am going to look at two of these lesser known attributes that I have recently stumbled upon.

Download [Support Information]

Ever needed to link to an asset such as an image or PDF document but, you want the browser to prompt the user to download the asset instead of rendering it, making for a simpler flow for the user? Well, normally the process for doing this would involve the server sending back additional headers (Content-Type, Content-Disposition) with the response to instruct the browser to download the file.

But what if you website is all client side and there is no server side companent? That is where the download attribute comes in. The download attribute can be used on the anchor element as follows:

Using the download attribute
<a href="image.png" download>Download your image</a>

This will ensure that the browser prompts user to download the image, instead of rendering it in the browser. There is more you can do here though. You can also specifiy the desired name for the download by specifying a value for the attribute:

Specify alternate file name
<a href="image.jpg" download="wolf.jpg">Download your image</a>

Note: Specifying a name for the download file is governed by a same origin policy so, you can only specify the name if the asset you are linking to lives on the same domain as the website.

Try it out

Download Your Image

Translate [Support Information]

The other attribute you might not have heard of is translate. The translate attribute allows you to indicate to automated translation tools, such as Google Translate, that a portion of text should not be translated. It can also be used to indicate to human translators, that the content in a given container should not be translated.

This is useful when you ae including a quote in for example French, on an English page. When the rest of the page is translated might not want the quote translated with it. It can also be useful for given names and surnames, for example:

<p>John Ham, sells the best ham.</p>

In the above sentence you do not want the surname translated but, you do want the rest of the sentence to be translated. To accomplish this, you can change the markup to the following:

Usage of the translate attribute
<p><span translate="no">John Ham</span>, sells the best ham.</p>

The possible values for the translate attribute is the strings no and yes, with yes being the default. As you will notice from the support information link above, there is currently no browser support for the attribute but, as this attribute is, for the moment, more focused on external services or human translators, browser support is not really relevant.

Which other elments or attributes do you think warants more attention than they have been getting? Let me know in the comments.