El Atributo TRANSLATE

Permite controlar si el contenido de un elemento debe traducirse automáticamente cuando la página se procesa en otro idioma.

El atributo translate en HTML permite controlar si el contenido de un elemento debe traducirse automáticamente cuando la página se procesa en otro idioma (por ejemplo, mediante herramientas como Google Translate). Es especialmente útil para evitar la traducción de nombres propios, códigos, términos técnicos o contenido que debe permanecer en su idioma original. A continuación, te explicamos cómo implementarlo correctamente.

1. ¿Qué es el Atributo translate?

  • Propósito: Indicar si el contenido de un elemento debe o no ser traducido por herramientas de traducción automática.

  • Valores aceptados:

    • "yes" (valor predeterminado): El contenido puede traducirse.

    • "no": El contenido no debe traducirse.

  • Compatibilidad:

    • Soporte en navegadores modernos (Chrome, Firefox, Edge) y herramientas como Google Translate.

    • No todos los servicios de traducción respetan este atributo (consulta la documentación específica).

2. Sintaxis Básica

Aplica el atributo translate directamente a cualquier elemento HTML:

html
Copy
<elemento translate="no">Contenido no traducible</elemento>
 
Run HTML

3. Ejemplos Prácticos

Ejemplo 1: Evitar la traducción de un nombre de marca

html
Copy
<p>  
  Nuestra empresa se llama <span translate="no">TechSolutions</span>.  
</p>
 
Run HTML

Resultado:

  • "TechSolutions" no se traducirá, incluso si el resto del texto sí.

Ejemplo 2: Bloquear la traducción de código o comandos

html
Copy
<pre translate="no">  
  <code>  
    function saludar() {  
      console.log("¡Hola, mundo!");  
    }  
  </code>  
</pre>
 
Run HTML

Ejemplo 3: Mantener direcciones o formatos específicos

html
Copy
<p>  
  Contacto: <span translate="no">soporte@empresa.com</span>  
</p>
 
Run HTML

Ejemplo 4: Evitar traducción en formularios

html
Copy
<form>  
  <label translate="no">Username:</label>  
  <input type="text" name="user" translate="no" placeholder="Enter your username">  
</form>
 
Run HTML

4. Casos de Uso Comunes

  • Nombres propios: Marcas, nombres de personas, productos, etc.

  • Código y comandos: Fragmentos de código, rutas de archivos, variables.

  • Direcciones y formatos: Correos electrónicos, URLs, números de teléfono.

  • Términos técnicos: Palabras clave en inglés que no tienen traducción precisa.

5. Buenas Prácticas

  1. No abuses del atributo: Úsalo solo cuando sea necesario, para evitar afectar la experiencia de usuarios multilingües.

  2. Combínalo con lang: Especifica el idioma del contenido con el atributo lang para mayor claridad.

    html
    Copy
    <p lang="en" translate="no">The term "Machine Learning" is industry-standard.</p>
     
  1. Run HTML

  2. Prueba con herramientas reales: Verifica el comportamiento en servicios como Google Translate o DeepL.

  3. Accesibilidad:

    • El atributo translate no afecta a lectores de pantalla, pero sí mejora la coherencia en traducciones automáticas.

6. Limitaciones

  • Soporte inconsistente: Algunas herramientas de traducción pueden ignorar el atributo.

  • No es infalible: Los usuarios aún podrían traducir manualmente el contenido.

  • No aplica a todo el contenido: Atributos como placeholder, title o alt no se ven afectados por translate.

7. Ejemplo Integrado

html
Copy
<!DOCTYPE html>  
<html lang="es">  
<head>  
  <meta charset="UTF-8">  
  <title translate="no">TechSolutions - Inicio</title>  
</head>  
<body>  
  <h1 translate="no">TechSolutions</h1>  
  <p>  
    Somos una empresa líder en <span translate="no">software development</span>.  
    Contáctanos en <span translate="no">contact@techsolutions.com</span>.  
  </p>  

  <pre translate="no">  
    <code>  
      npm install techsolutions-package  
    </code>  
  </pre>  
</body>  
</html>
 
Run HTML

8. Conclusión

El atributo translate es esencial para:

  • Mantener la integridad de términos específicos en páginas multilingües.

  • Mejorar la experiencia de usuarios que usan traducción automática.

  • Recuerda:

    • Úsalo estratégicamente para contenido que debe permanecer en su idioma original.

    • Combínalo con otras prácticas de internacionalización (i18n) para un sitio verdaderamente global.

¡Experimenta! Prueba el atributo translate en tus proyectos y verifica cómo interactúa con herramientas como Google Translate. ????????