Qué son los atributos html y cómo usarlos

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í:

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.

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.

Ahora dentro de <style> escribimos la siguiente regla:

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>.

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.

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.

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.

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 :).