Qué son los elementos HTML

El contenido de la etiqueta <title> ofrece esta información

en la barra de título o en las pestañas del navegador

HTML es un lenguaje que se compone por elementos que permiten definir la estructura del documento. Estos elementos son los que nos posibilitan determinar cómo estará armada la página y sus secciones. Las etiquetas nos brindan la oportunidad de definir los elementos en el código. Como hemos visto en el capítulo anterior, no todas las etiquetas se utilizan para representación, ya que también pueden tener otra finalidad (por ejemplo, para ofrecer información del documento). 

Los atributos en HTML 

Al introducirnos en el lenguaje, es importante saber que los atributos en HTML se emplean para poder especificar ciertas características que tendrá el elemento o bien para ofrecer más información sobre él. Existen atributos que son obligatorios y otros, opcionales. Por ejemplo, si utilizamos la etiqueta de imagen, será necesario indicar la dirección de la cual se debe obtener, pero no resulta obligatorio indicar si tiene un texto alternativo, ya que este atributo puede estar vacío. 

Es importante tener en cuenta que hay atributos globales, que son soportados por la mayoría de los elementos (como id, class, style, etcétera) y otros que son muy particulares del elemento (como pueden ser algunos atributos de tablas o de controles de formulario). A continuación, veremos los principales atributos de HTML: 

• id: identificador único del elemento (no pueden existir dos elementos con la misma id en un mismo documento). 

• class: permite indicar el nombre de la clase del elemento. 

• style: se usa para especificar el estilo (inline) para el elemento. 

• title: hace posible escribir información adicional sobre el elemento. 

• dir: permite especificar la dirección para el contenido en el elemento (el valor puede ser rtl o ltr). 

• lang: se utiliza para especificar el código del lenguaje para el contenido del elemento. Para español se usa lang=”es-ES”. 

• xml:lang: permite definir el código de lenguaje para elementos (en XHTML). El ejemplo para español es: xml:lang=”es”. 

• charset: permite especificar la codificación de caracteres del documento al que se hace referencia. Por lo general se utiliza UTF-8 (para unicode) o ISO-8859-1 (para alfabeto latino). 

• media: para especificar el tipo de dispositivo de salida. Su valor puede ser screen, tty, tv, projection, handheld, print, braille, aural, all. 

• accesskey: tecla de acceso rápido. 

• href: permite indicar la URL de un archivo o recurso. 

• hreflang: permite indicar el lenguaje del texto en el documento. 

• rel: se encarga de indicar la relación entre el documento actual, respecto del que se está vinculado. 

• rev: indica la relación entre el documento vinculado y el actual. 

• target: permite indicar el destino para el documento vinculado. Puede ser: _blank, _self, _top y _parent. 

• type: permite especificar el tipo MIME. 

• align: permite indicar la alineación del elemento. Puede tomar los valores left, center, right o justify. Es un atributo que, desde hace tiempo, ha dejado de utilizarse ya que esto debe manejarse de CSS. 

• height: define el alto del elemento. 

• width: se usa para definir el ancho del elemento. 

 En el apartado Elementos HTML4/XHTML, de este mismo capítulo, veremos qué atributos soporta cada elemento HTML/XHTML. Allí también analizaremos otros atributos específicos para algunos elementos. Si deseamos saber más, la tabla completa de atributos para HTML4 que brinda el W3C la encontraremos en el sitio web que está en la dirección www.w3.org/TR/html4/index/attributes.html. 

Los eventos en HTML 

Una característica interesante de HTML tiene que ver con la posibilidad de interactuar con eventos dinámicos que pueden producirse por diferentes tipos de interacción, ya sea por parte del usuario o por parte del propio documento. Así como los elementos HTML soportan atributos, también pueden tener asignados eventos, que pueden trabajar junto con un script del lado cliente. Cuando un evento ocurre, una acción se ejecuta. 

Por lo general, correrá un código JavaScript que definimos para dicho fin. Para comprender mejor los eventos de HTML, podemos separarlos básicamente en cinco grupos: de documento, de imagen, de formulario, del teclado y del mouse. A continuación veremos los principales. Los eventos del documento son: 

• onload: ocurre cuando termina de cargar el documento. 

• onunload: se trata de un evento que ocurre cuando el documento es quitado de la ventana por parte del usuario. Para imagen tenemos: 

• onabort: ocurre cuando la carga de la imagen es abortada. Los eventos para formularios son: 

• onselect: este interesante evento ocurre cuando se selecciona el contenido del elemento o control correspondiente. 

• onchange: ocurre cuando el elemento del formulario cambia su valor. 

• onfocus: ocurre cuando el elemento recibe el foco. 

• onblur: ocurre cuando el elemento pierde el foco. 

• onreset: se produce cuando se resetea el formulario. 

• onsubmit: se produce cuando el formulario es enviado. Los eventos del teclado son: 

• onkeypress: se trata de un evento que ocurre cuando una tecla es presionada y soltada por el usuario. 

• onkeydown: ocurre cuando una tecla es pulsada por el usuario. 

• onkeyup: ocurre cuando el usuario libera la tecla que tenía pulsada. Los eventos del mouse son: 

• onmousemove: ocurre cuando el mouse se mueve sobre el elemento. 

• onmouseout: ocurre cuando el mouse es movido fuera del elemento. 

• onmouseover: ocurre cuando el mouse se mueve desde afuera y pasa por encima del elemento en cuestión. 

• onclick: este evento ocurre cuando el usuario se encarga de hacer clic con el botón del mouse sobre el elemento. 

• ondblclick: se trata de un evento que ocurre cuando el usuario procede a hacer doble clic con el botón del mouse. 

• onmousedown: ocurre cuando el botón del mouse es presionado. 

• onmouseup: ocurre cuando soltamos el botón del mouse. 

Los que hemos nombrado son eventos compatibles con HTML4 y XHTML. Con la llegada de HTML5 se incorporan nuevos eventos para potenciar las posibilidades de interacción con este lenguaje.