HTML5 translate and download attribute for href

HTML5 translate and download attribute for href

In previous article on HTML5 new elements  we discussed HTML5 details and summary elements. In this article we will discuss HTML5 translate and download attribute for href. These are new attributes.

HTML5 Translate Attribute

HTML5 introduces a new attribute “translate”.  This attribute is used to restrict the impact of translation tools such as Google translate and prohibits translation of certain content. There can be certain content like some language code (PHP, HTML etc) or video game code or some author names etc that do not need to be translated.

from edx

The W3C specification about the translate attribute tells us that  “The translate attribute is an enumerated attribute that is used to specify whether an element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

Syntax

<span translate="no" class="name">John</span>

In above example trnaslate = “no”  will prevent “john” from translating to other language.

The new HTML5  DOWNLOAD attribute for <A HREF>

Before HTML5 when a user clicks on a link file then its MIME Type is received by browser and it will open / render file. MIME Type that browser will receive can be of type

Content-type: text/html, text/plain, image/gif, image/jpg

Consider following code snippet – (old style)

<a href="image.jpg">please right click this link to download image</a>

When user will click on this link browser will determine the mime type and open the file.

New way to download a file using an arbitrary name: the download attribute

HTML5 provides a new download attribute to download a file. This triggers download of file instead of rendering it.

<a href="images/user.jpg" download="john.jpg">download a picture of john</a>

This link will show download a picture of john

This parameter will force to download image with name different from its original name.

Hope you will find this article helpful. We will explore more HTML5  elements and attributes in coming series of articles.