5 Atributos Globales de HTML5 que nos pueden ser Útiles

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>

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="http://blog.collectivecloudperu.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>

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>

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>

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>

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.

imagen: bannersnack.com

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.