Etiquetas y atributos HTML

Práctica

La idea de esta práctica es que abras un archivo, como se ha visto en el tutorial "¿Cómo empezar?", y comiences a escribir algo de código. Al hacer esto te acostumbrarás a abrir y cerrar etiquetas y a probar los resultados de tu trabajo en el navegador. La práctica consistirá en la creación de un párrafo con un término abreviado en su interior. Además, estableceremos algunos atributos para los elementos involucrados.

Nuestro primer paso es la creación del párrafo y su contenido. Los párrafos son insertados con el elemento p, siguiendo la secuencia: etiqueta de apertura, contenido y etiqueta de cierre.

<p>Esta mañana desperté decidido a aprender HTML por mi cuenta.</p>

Esta mañana desperté decidido a aprender HTML por mi cuenta.

Una vez que hayas agregado el párrafo, salva tu archivo y ábrelo en el navegador para ver cómo luce una vez representado. En este punto puedes notar que tu documento no se ve muy similar al ejemplo de arriba. Esto se debe a que el formato de este sitio web es heredado por las cajas de ejemplos. Más adelante en estos tutoriales aprenderemos algo más acerca de eso. Por ahora, sólo ignora estos pequeños cambios y enfócate en el contenido.

El próximo paso en esta práctica es marcar el término abreviado "HTML". Esto lo hacemos con la ayuda de abbr, encerrando al término abreviado con sus etiquetas de apertura y cierre. Por ahora, solo estaremos indicando que el término es una abreviación.

<p>Esta mañana desperté decidido a aprender <abbr>HTML</abbr> por mi cuenta.</p>

Esta mañana desperté decidido a aprender HTML por mi cuenta.

Esto está indicando que "HTML" es un término abreviado, pero no está brindando su versión expandida. Para abbr, el atributo global title tiene un propósito particular, que es el de brindar la versión expandida del término abreviado dentro del elemento.

Para agregar el atributo title a nuestro elemento abbr necesitamos insertar un espacio después del nombre del elemento en la etiqueta de apertura, y usar la fórmula de los atributos: nombre del atributo, signo igual ("=") y valor del atributo entre comillas. Recuerda que el valor en este caso es la explicación del término abreviado ("Lenguaje de marcas de hypertexto").

<p>Esta mañana desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.

Esta mañana desperté decidido a aprender HTML por mi cuenta.

title es un atributo que puedes "probar": cuando posas el mouse sobre el elemento, puedes ver la explicación del término que aparece como una descripción emergente o "tooltip". Pero algunos atributos pasan desapercibidos en la mayoría de las experiencias de usuario. Este es el caso de nuestra próxima incorporación: lang.

Es probable que no notes la diferencia entre el ejemplo anterior y el siguiente. Sin embargo, muchos agentes de usuario utilizan esta información en algún nivel. Por ejemplo, los navegadores de voz, comúnmente utilizados por personas con discapacidad visual, usan este atributo para ajustar la pronunciación del sintetizador de voz al lenguaje especificado.

El procedimiento para agregar el atributo lang al párrafo (elemento p) es el mismo que usamos para title, solo que esta vez estaremos suministrando una etiqueta de lenguaje como valor del atributo.

<p lang="es-AR">Esta mañana desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>

Esta mañana desperté decidido a aprender HTML por mi cuenta.

Y eso es todo por ahora con elementos y atributos. Nos saltaremos la práctica de eventos ya que es muy improbable que la necesites a este nivel. Hay mucho tiempo para volver y ver algo más acerca de ellos, cuando estés listo para agregar algo de código del lado cliente.

Próximo tutorial ›

Prev123