2.3. Etiquetas y atributos
HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que componen una página:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.
De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar: applet, basefont, center, dir, font, isindex, menu, s, strike, u.
A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas complejas. Algunos elementos como las imágenes y los enlaces requieren cierta información adicional para estar completamente definidos.
La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Utilizando sólo la etiqueta <a> no es posible establecer la dirección a la que apunta cada enlace. Como no es viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional llamada atributos.
De esta forma, se utiliza la misma etiqueta <a> para todos los enlaces de la página y se utilizan los atributos para indicar la dirección a la que apunta cada enlace.
<html> <head> <title>Ejemplo de atributos en las etiquetas</title> </head> <body> <p> Los enlaces son muy fáciles de indicar: <a>Soy un enlace incompleto, porque no tengo dirección de destino</a>. <a href="http://www.google.com">Este otro enlace apunta a la página de Google</a>. </p> </body> </html>
Figura 2.6. Los atributos permiten personalizar las etiquetas HTML
El primer enlace del ejemplo anterior no está completamente definido, ya que no apunta a ninguna dirección. El segundo enlace, utiliza la misma etiqueta <a>, pero añade información adicional mediante un atributo llamado href. Los atributos se incluyen dentro de la etiqueta de apertura. Por ahora no es importante comprender la etiqueta <a> ni el atributo href, ya que se explicarán con todo detalle más adelante.
No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de atributos disponibles. Además, cada atributo también indica el tipo de valor que se le puede asignar. Si el valor de un atributo no es válido, el navegador ignora ese atributo.
Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los atributos son comunes a muchas o casi todas las etiquetas. De esta forma, es habitual explicar por separado los atributos comunes de las etiquetas para no tener que volver a hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes se dividen en cuatro grupos según su funcionalidad:
1) Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas HTML
| Atributo | Descripción |
|---|---|
id = "texto" | Establece un identificador único a cada elemento dentro de una página HTML |
class = "texto" | Establece la clase CSS que se aplica a los estilos del elemento |
style = "texto" | Establece de forma directa los estilos CSS de un elemento |
title = "texto" | Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento) |
La mayoría de páginas web actuales utilizan los atributos id y class de forma masiva. Sin embargo, estos atributos sólo son realmente útiles cuando se trabaja con CSS y con Javascript.
Respecto al valor de los atributos id y class, sólo pueden contener guiones medios (-), guiones bajos (_), letras y/o números, pero no pueden empezar por números. Además, los navegadores distinguen mayúsculas de minúsculas y no se recomienda utilizar letras como ñ y acentos, ya que no es seguro que funcionen correctamente en todas las versiones de todos los navegadores.
2) Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios idiomas o aquellas que quieren indicar de forma explítica el idioma de sus contenidos:
| Atributo | Descripción |
|---|---|
lang = "codigo de idioma" | Indica el idioma del elemento mediante un código predefinido |
xml:lang = "codigo de idioma" | Indica el idioma del elemento mediante un código predefinido |
dir | Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda) |
En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es obligatorio incluirlo siempre que se incluye el atributo lang.
Como la palabra internacionalización es muy larga, se suele sustituir por la abreviatura i18n (el número 18 se refiere al número de letras que existen entre la letra i y la letra n de la palabra internacionalización).
3) Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con JavaScript.
| Atributo | Descripción |
|---|---|
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Permiten controlar los eventos producidos sobre cada elemento de la página |
Cada vez que el usuario pulsa una tecla, mueve su ratón o pulsa cualquier botón del ratón, se produce un evento dentro del navegador. Utilizando JavaScript y los atributos anteriores, es posible responder de forma adecuada a cada evento.
4) Atributos para los elementos que pueden obtener el foco:
Cuando el usuario selecciona un elemento de la interfaz de una aplicación, se dice que "el elemento tiene el foco del programa". Si por ejemplo un usuario pincha con su ratón sobre un cuadro de texto y comienza a escribir, ese cuadro de texto tiene el foco del programa, llamado "focus" en inglés. Si el usuario selecciona después otro elemento, el elemento original pierde el foco y el nuevo elemento es el que tiene el foco del programa.
Los elementos de las páginas web también pueden obtener el foco de la aplicación (en este caso, el foco del navegador) y HTML define algunos atributos específicos para controlar cómo se seleccionan los elementos.
| Atributo | Descripción |
|---|---|
accesskey = "letra" | Establece una tecla de acceso rápido a un elemento HTML |
tabindex = "numero" | Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767 |
onfocus, onblur | Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco |
Cuando se pulsa repetidamente la tecla del tabulador sobre una página web, el navegador selecciona de forma alternativa todos los elementos de la página que se pueden seleccionar (principalmente los enlaces y los elementos de formulario). El atributo tabindex permite alterar el orden en el que se seleccionan los elementos, por lo que es muy útil cuando se quiere controlar de forma precisa cómo se seleccionan los campos de un formulario complejo.
Por su parte, el atributo accesskey permite establecer una tecla para acceder de forma rápida a cualquier elemento. Aunque la tecla de acceso rápido se establece mediante HTML, la combinación de teclas necesarias para activar ese acceso rápido depende del navegador. En el navegador Internet Explorer se pulsa la tecla ALT + la tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecla definida; en el navegador Opera se pulsa Shift + Esc + la tecla definida; en el navegador Safari se pulsa Ctrl + la tecla definida.
En el resto de la documentación, se emplearán las palabras "básicos", "i18n", "eventos" y "foco" respectivamente para referirse a cada uno de los grupos de atributos comunes definidos anteriormente.