Etiquetas y atributos HTML

Atributos

Los atributos son la forma que tienen los autores de definir propiedades para un elemento. Estas propiedades habitualmente cambian la forma en que los navegadores interpretan al elemento, al cambiar su significado o presentación. Por ejemplo, el elemento a inserta un vínculo en el documento, pero el atributo rel indica la relación entre el documento actual (el que contiene al vínculo) y el recurso de destino (al cual el vínculo está apuntando).

Muchos de los atributos en HTML5, aquellos conocidos como atributos globales, están disponibles para todos los elementos del estándar. Pero la mayoría de los elementos tienen además un conjunto de atributos específicos que sólo están disponibles o específicamente adaptados para ellos.

Como ya hemos visto en ejemplos previos, los atributos son declarados indicando su nombre, seguido de un signo igual ("=") y el valor asignado entre comillas. Pero algunos atributos, que solo pueden tomar valores booleanos (verdadero o falso), aplican su valor tan sólo con su presencia. En estos casos, los atributos pueden ser declarados con sólo indicar su nombre.

En el siguiente ejemplo, el elemento button tiene tres atributos presentes: id y acceskey, que son atributos globales, y disabled (booleano), el cual no es global pero si lo comparten un grupo particular de elementos.

<button id="boton-ok-1" acceskey="O" disabled>Ok</a>

Eventos

Los eventos son mecanismos provistos por el estándar HTML, diseñados para permitir a los autores la ejecución de programas en sus páginas web en respuesta a la interacción del usuario o el sistema. El propósito de un evento es el de asociar una acción, llevada a cabo por el usuario o por el sistema (como, por ejemplo, cuando el usuario hace un click sobre un elemento o el documento termina de cargarse), con una función o script, escrito en un lenguaje del lado cliente.

La sintaxis usada para declarar eventos es muy similar a la sintaxis de los atributos y consta de: el nombre del evento seguido por el signo igual ("=") y la función o el script entre comillas.

En el siguiente ejemplo, insertaremos una línea de texto con énfasis (elemento em) con un par de eventos: onmouseover, que llama a su función cuando el puntero del mouse se posa sobre el elemento, y onmouseout, que llama a su función cuando el puntero del mouse pasa a estar fuera del área ocupada por el elemento. Las funciones declaradas en los eventos cambian el color de fondo del elemento para que puedas apreciar mejor la funcionalidad.

Las funciones provistas en este ejemplo se encuentran fuera del enfoque de este sitio web y no serán explicadas en este documento.

<em onmouseover="cambiarColor(this.parentNode)" onmouseout="cambiarColor(this.parentNode)">Etiquetas y atributos HTML</em>

En HTML5 existe un solo conjunto de eventos, denominado eventos globales. Cada evento en este grupo, puede ser utilizado con cualquier elemento en el estándar, sin importar si el elemento puede activar ese evento o no. En otras palabras, existen algunos eventos, como oncanplay u onautocomplete, que, a pesar de ser globales, están específicamente diseñados para un grupo particular de elementos y no serán activados por los elementos fuera de ese grupo.

En la referencia sobre eventos globales encontrarás una lista de todos los eventos disponibles en HTML5, con descripciones e información acerca de los elementos que son capaces de activarlos.

Ejemplos

En esta sección veremos algunos ejemplos, para que puedas comprender mejor la estructura de los elementos. Primero, comencemos por insertar un párrafo (elemento p) donde unas cuantas palabras al comienzo son resaltadas para atraer la atención del usuario. Esto lo hacemos encerrando esas palabras con el elemento b.

<p><b>Para continuar con el proceso</b>, no olvides renovar tu licencia!</p>

Ahora intentemos algo más complejo, al agregar un enlace. Los enlaces no son enlaces (esto es, no apuntan a otro recurso) si no tienen declarado el atributo href. Así que esta vez insertaremos un vínculo, mediante el elemento a, con una URI en el atributo href (estos conceptos serán tratados posteriormente).

<p>También puedes acceder a los <a href="../../tutorials.html">tutoriales HTML</a> gratuitamente.</p>

Por último, agregaremos una imagen con el elemento img. Este elemento requiere la presencia del atributo src a fin de mostrar una imagen. Además, declararemos el atributo alt como una alternativa textual al propósito de la imagen.

<p>Nacionalidad: <img src="/assets/images/canada-flag-icon.gif" alt="Canada"></p>

Como habrás notado, img es un elemento vacío, razón por la cual no hay una etiqueta de cierre en el ejemplo anterior.