5 Atributos Globales de HTML5 que nos pueden ser Útiles

3 minuto(s)

En esta página:

Con HTML el Lenguaje de Marcado podemos aplicar atributos que pueden manipular todo el documento en nuestra vista, estos atributos nos pueden solucionar un problema determinado sin necesidad de usar una librería externa en nuestro proyecto, veamos en este artículo cuales son los atributos globales que podemos usar en HTML.

Vamos a mostrarte una lista con los atributos globales y detallaremos para que sirve cada uno.

Translate

Sintaxis: <elemento translate=”yes|no”>

Este atributo evita que que un texto de nuestra vista sea traducido, por ejemplo si intentas traducir una pagina con el traductor de Google cuando le agregas el atributo translate a un párrafo, dicho párrafo no será traducido por el Traductor


<!-- Con el atributo Translate -->
<p translate="no">El texto de este párrafo no se traducirá.</p>

<!-- Sin el atributo Translate -->
<p>El texto de este párrafo si se traducirá de manera normal.</p>

El texto de este párrafo no se traducirá.

El texto de este párrafo si se traducirá de manera normal.

Access Key

Sintaxis: <elemento accesskey=”teclado”>

Con este atributo puedes usar un botón de tu teclado para ejecutar una acción en la página, por ejemplo si las configuras en tu documento HTML y lo abres con el Navegador Google Chrome puedes usar 2 teclas que te abrirán sus respectivos enlaces, para ir al home presionamos ALT + h y para ir a Google presionamos ALT + g


<!-- En el navegador Google Chrome presiona las teclas ALT + h te enviará al home del Blog -->
<a href="https://blog.nubecolectiva.com" accesskey="h">Home</a><br>

<!-- En el navegador Google Chrome presiona las teclas ALT + g te enviará a la página del buscador Google -->
<a href="https://www.google.com" accesskey="c">Google</a>

<a href="https://www.google.com" accesskey="c">Google</a>

Para cada Navegador se debe presionar diferentes combinaciones de teclas, te dejamos una tabla a continuacion

Browser	Windows	Linux	Mac
Internet Explorer	[Alt] + accesskey	N/A
Chrome	[Alt] + accesskey	[Alt] + accesskey	[Control] [Alt] + accesskey
Firefox	[Alt] [Shift] + accesskey	[Alt] [Shift] + accesskey	[Control] [Alt] + accesskey
Safari	[Alt] + accesskey	N/A	[Control] [Alt] + accesskey
Opera	Opera 15 o superior: [Alt] + accesskey Opera 12.1 o antiguos: [Shift] [Esc] + accesskey

En HTML5 este atributo tiene compatibilidad con varios elementos, en cambio con HTML 4 solo con ciertos elementos como <a>, <area>, <button>, <input>, <label>, <legend> y <textarea>

Dir

Sintaxis: <elemento dir=”ltr|rtl|auto”>

Con este atributo podemos alinear el texto que se encuentra dentro de un elemento como un párrafo


<!-- RTL -->
<p dir="rtl">Este texto es alineado hacia el lado derecho de la pantalla</p>

<!-- LTR -->
<p dir="ltr">Este texto es alineado hacia el lado izquierdo de la pantalla</p>

<!-- Auto -->
<p dir="auto">Este texto es alineado en función al contenido</p>

Este texto es alineado hacia el lado derecho de la pantalla

Este texto es alineado hacia el lado izquierdo de la pantalla

Este texto es alineado en función al contenido

Content Editable

Sintaxis: <elemento contenteditable=”true|false”>

Este atributo nos convierte un elemento en editable, por ejemplo si tenemos un párrafo en donde queramos que al usuario al hacerle click tenga la opción de editarlo, es útil para que el usuario pueda editar un contenido en tiempo real y guardarlo en la base de datos


<p contenteditable="true">Este párrafo es editable cuando el usuario le haga click a este párrafo lo podrá editar al instante</p>

Este párrafo es editable cuando el usuario le haga click a este párrafo lo podrá editar al instante

Hidden

Sintaxis: <elemento hidden>

Este atributo es útil para esconder contenidos que no quieres que se muestren en la vista, por ejemplo si estas escribiendo un párrafo de texto y quieres ocultarlo para más adelante terminarlo


<!-- Hidden -->
<p hidden>Este texto con el atributo 'hidden' no se muestra en la vista</p>

<!-- Normal -->
<p>Este texto se muestra con normalidad en la vista</p>

Este texto con el atributo 'hidden' no se muestra en la vista

Este texto se muestra con normalidad en la vista

Conclusión

Quizás estos atributos globales no parezcan la gran cosa por ser tan simple y sencillo su uso, pero si nos lo tomamos en serio y lo usamos en la práctica podemos ver que son muy útiles.