HTML Básico V: Los atributos de HTML

Tal y como vimos en la segunda parte de este tutorial, los atributos representan información adicional para las etiquetas HTML

Entre los atributos más utilizados destacan los siguientes:

Id

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente). Por norma general se emplea el atributo id para referirse a un elemento por medio de terceros lenguajes de programación.

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

Class

El atributo "class" asigna un nombre de clase (o varios nombres de clases separados por espacios) al elemento contenedor. Es usado junto con hojas de estilo CSS y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Como he comentado la utilización del atributo class esta intimamente ligada con la utilización de CSS y se recomiendo que se utilice unicamente paraeste fin. de esta forma podremos distingir entre la apariencia grafica de nuestro elemento utilizando clases y el contenido del mismo utilizando "id".

<p class="referencias">Este artículo pertenece al curso de HTML básico de Aprendiendo Código y se le aplican los estilos de la clase referencia</p>
<p class="referencias importante">Este artículo pertenece al curso de HTML básico de Aprendiendo Código y se le aplican los estilos de la clase referencia y después los estilos de la clase importante</p>

Style

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos puede resultar útil y el resultado es igual al obtenido por las hojas de estilo CSS, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modo, se mejora la separación de las partes semántica y el contenido de tu documento.

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo escrito en azul.</p>
<p style="color: #FF0000; font-size: 12pt">Este es un párrafo escrito en rojo.</p>
<p>Y este es otro texto no tiene estilo y aparecerá en color negro siempre que siga siendo el color por defecto de nuestro body.</p>

Title

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al pasar el ratón por encima del contenido del elemento. también resulta de utilidad a los buscadores a la hora de indexar los contenidos de la web.

No es un atributo necesario para el desarrollo de una página web.

<a title="Aprendiendocodigo.blogspot.com" href="http://aprendiendocodigo.blogspot.com">Aprendiendo Código</a>

Lang

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos HTML, utilizamos el atributo lang para especificar el lenguaje de un elemento.

Este atributo es util para indexar tú web en motores de busqueda o para que los sintetizadores de audio puedan transcribir correctamente la web. Otra posibilidad que aporta este atributo es el de aplicar distintos CSS a cada idioma de nuestra web. o mostrar mensajes personalizados en función del idioma configurado en el navegador del visitante de nuestra web.

<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en Español.</p>

Dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

• RTL: derecha a izquierda.
• LTR: izquierda a derecha.

<q lang="he" dir="rtl">...una cita en Hebreo...</q>

Charset

Especifica la codificación de caracteres del documento.

<a charset="utf-8" href="http://aprendiendocodigo.blogspot.com">Código HTML</a>

Además de estos atributos, hay muchos otros generalmente relacionados con el estilo gráfico de nuestra web que han caido en deshuso en favor del lenguaje CSS que veremos más adelante.