Texto no traducible con HTML5

Hoy en día es muy fácil que estemos viendo una página web y que nuestro navegador web a la hora de visualizarla detecte que esté en otro idioma y nos ofrezca, de una manera sencilla, el poder traducir el texto a nuestro idioma. Pero qué sucede si nosotros, como desarrolladores, queremos que haya una parte del texto que no se traduzca. Que cuando un usuario vea la página y utilice un traductor automático no perdamos el idioma original.

Así que, en este artículo, vamos a ver cómo podemos crear texto no traducible con HTML5 de una forma muy sencilla.

Y es que dentro de nuestro texto puede darse el caso que queramos mantener una parte invariable aunque entren los traductores automáticos y que siempre se muestre tal cual la diseñamos. Esto puede darse en nombres de empresas, eventos que tengan un nombre en concreto,…

El atributo translate

Para poder trabajar con texto no traducible con HTML5 vamos a recurrir al atributo translate. El atributo translate es un atributo global que podemos aplicar sobre cualquier elemento. De tal manera que los elementos de texto anidados a dicho elemento no serán traducidos.

En nuestro caso vamos a utilizar directamente un elemento de texto.

<p>Este es un texto que puede ser traducido</p>

Uso del atributo translate

Lo que hacemos es añadir el atributo translate directamente sobre el elemento p aplicando el valor “no”.

<p translate="no">Este es un texto que no será traducido</p>

Ahora, cuando carguemos la página con este código y le pasemos el traductor automático veremos que no se traduce. De esta forma tan sencilla podemos crear páginas web que contengan texto no traducible con HTML5.