Los atributos html están en la etiqueta de apertura y definen las propiedades de esta. Suele consistir en un nombre y valor, pero puede darse el caso de solo el nombre.
Se puede identificar 3 tipos de atributos html:
- Principales (Core atributes): class, id, style, y title.
- Internacionalización (Internationalization attributes): dir y lang.
- Accesibilidad (Accessibility attributes): accesskey y tabindex.
Atributos principales
Atributo id
Este atributo sirve para identificar una etiqueta dentro de una página. Esto servirá para hacer referencia a esa etiqueta en concreto en la hoja de estilos (CSS) o en un JavaScript.
Aprovecharé para poner un ejemplo práctico con CSS. Crea un nuevo documento HTML5 como en este tutorial y escribe esto dentro de <body> quedando así:
|
1 2 3 4 |
<body> <p id="concreto"> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.</p> </body> |
Este es un ejemplo de cómo poner atributos html, basta con escribir la propiedades que deseas definir y su respectivo valor. En esta ocasión un párrafo tiene un id con el valor «concreto».
Ahora vamos a darle un poco de estilo. En vez de crear un CSS, dentro del <head> usaremos la etiqueta <style> que sirve para definir el estilo de la página.
|
1 2 3 4 5 |
<style> #concreto { font-style: italic; } </style> |
Así indicamos que el elemento con el id concreto tenga una letra itálica.
Hay que tener un par de consideraciones respecto al atributo id
- Debe empezar por una letra (A-Z o a-z) y puede seguirse de números, letras, “_”, “-“, “.”, “:” .
- No puede haber 2 o más elementos con el mismo id, para eso se emplea el atributo class que mencionare a continuación.
Atributo class
Permite indicar que un elemento pertenece a un grupo o clase de elementos.
Supongamos que tenemos 3 párrafos y queremos que de una atacada las letras sean oblicuas.
|
1 2 3 4 5 6 7 |
<p class="grupi"> Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p> <p class="grupi"> Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raíces en una pieza clásica de la literatura del Latin.</p> <p class="grupi"> Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayoría sufrió alteraciones en alguna manera, ya sea porque se le agregó humor, o palabras aleatorias que no parecen ni un poco creíbles.</p> |
Ahora dentro de <style> escribimos la siguiente regla:
|
1 2 3 |
.grupi { font-style: oblique; } |
De esta manera, aquellos elementos que pertenezcan a la clase grupi tendrán una fuente oblicua.
Cuando queramos hacer referencia a un id usaremos en CSS “#” y para una class “.”.
Atributo title
Proporciona un título a un elemento proporcionando información sobre el mismo.
No todos los elementos pueden usar este atributo, un caso común sería usarlo en un hipervínculo <a>.
|
1 |
<a href="#" title="Información del vinculo">Haz click aquí</a> |
Definir estilos en línea con el atributo style
En vez de introducir las reglas CSS dentro de <style> (estilo embebido) irían dentro del elemento en cuestión (estilo en línea). Sin embargo, esto no es recomendable debido a que hacen el mantenimiento de un sitio más complicado por tanto, procura emplearlo en ocasiones especiales como sobrescribir una regla CSS.
|
1 |
<p style="color:green;">Estas viendo un estilo en línea.</p> |
Atributos de internacionalización
Atributo dir
Indica al navegador la dirección del texto, de izquierda a derecha o viceversa.
Puede tener 3 valores:
- Ltr: de izquierda a derecha.
- Rtl: de derecha a izquierda.
- Auto.
Este atributo podría ir en un párrafo <p>, pero para una página entera se recomendaría ponerlo en el <html> aunque en el <body> también se puede poner.
Atributo lang
Este atributo lo mencioné en el post anterior. Indica la lengua principal de la página. Esto es útil para los buscadores, lectores de pantalla o aplicaciones.
Va en la etiqueta <html> y los valores disponibles podéis encontrarlos en la lista de estándar ISO-639-1.
Atributos de accesbilidad
Accesskey
Permite seleccionar un elemento mediante un acceso rápido, cuya combinación de teclas será diferente según el navegador.
|
1 |
<a href="http://www.google.com" accesskey="a">Ir a google</a> |
Si quisierámos seleccionar ese vínculo mediante acceso rápido en el navegador Firefox, se usarían las teclas Alt Shift + a.
Tabindex
Establece un orden cuando se emplea la tecla tab para saltar entre los diferentes elementos.
|
1 2 3 |
<a href="https://guidacode.com/" tabindex="2">Guidacode</a> <a href="http://www.google.com/" tabindex="1">Google</a> <a href="http://www.wikipedia.org/" tabindex="3">Wikipedia</a> |
Ahora cuando presiones tab empezará seleccionando Google luego guidacode y finalmente Wikipedia.
Y hasta aquí la explicación de algunos de los atributos html más utilizados. A medida que vaya haciendo más tutoriales se irán mencionando más. Espero que os haya gustado, un saludo :).