Atributos. HTML. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

Qué es un atributo

Cualquier etiqueta HTML puede contener uno o más atributos, separados por espacios, que permiten especificar la etiqueta. El código fuente tiene el siguiente aspecto:

<etiqueta atributo="valor-de-atributo"> ... </etiqueta>

<etiqueta atributo-1="valor-de-atributo-1" atributo-2="valor-de-atributo-2"> ... </etiqueta>

<etiqueta atributo-3> ... </etiqueta>

Existen una serie de atributos comunes a todas las etiquetas (salvo la etiqueta <html>) y algunas etiquetas tienen unos atributos específicos. En esta lección se comentan los atributos comunes; los atributos específicos se comentan en las lecciones dedicadas a las etiquetas correspondientes (imágenes, tablas, etc).

Atributos comunes

Falta comentar los atributos dir, lang, y xml:space

Atributo class

El atributo class permite definir clases de elementos. Dada su importancia, se explica en la lección sobre Clases.

Las hojas de estilo pueden hacer referencia a los elementos con atributo class, como se comenta en la lección sobre Selectores.

Atributo id

El atributo id permite identificar de forma unívoca un elemento en un documento. Por ello, en una página web no puede haber dos elementos con el mismo valor en el atributo id. Además, un elemento sólo puede tener un atributo id, es decir, el atributo id no puede contener espacios en blanco.

En HTML 4 el valor de un atributo id tenía que empezar con una letra (mayúscula o minúscula, caracteres latinos) y puede contener dígitos, guiones medios (-), guiones bajos (_), comas y puntos. Si el nombre contenía puntos, a continuación del punto tenía que haber una letra. Además, algunos elementos no podían tener atributo id (<base>, <head>, <html>, <meta>, <param>, <script>, <style> y <title>).

En HTML el atributo id puede empezar y contener cualquier carácter (salvo espacios en blanco). Además, todos los elementos pueden tener el atributo id.

Los elementos con atributo id pueden ser destinos de enlaces, como se comenta en la lección sobre Enlaces.

Las hojas de estilo pueden hacer referencia a un elemento con atributo id, como se comenta en la lección sobre Selectores.

Atributo style

El atributo style permite definir propiedades de estilo a un elemento determinado.

<p style="color:red">Esto es un párrafo &lt;p&gt;.</p>

<p>Esto es otro párrafo <span style="color: red;">&lt;p&gt;</span>.</p>

<p>Esto es otro párrafo <span style="color: red; font-weight: bold">&lt;p&gt;</span>.</p>

En estos apuntes se desaconseja el uso de este atributo, puesto que uno de los principios del diseño de páginas web mediante hojas de estilo es precisamente concentrar todo lo relacionado con el formato en las hojas de estilo.

Si sólo se escribe una propiedad, el punto y coma final puede omitirse (en el ejemplo anterior el punto y coma se ha omitido en el primer caso y se ha incluido en el segundo). Si se incluyen varias propiedades en un atributo style, el punto y coma es necesario entre propiedades (como puede verse en el tercer caso del ejemplo anterior).

Atributo title

El atributo title contiene el texto que se muestra en forma de "tip" (cuadrito amarillo que aparece cuando se sitúa el ratón encima del elemento).

En el ejemplo siguiente se muestra un "tip" cuando se sitúa el ratón sobre el primer párrafo o sobre el término "<p>" del segundo párrafo.

<p title="Esto es un &quot;tip&quot;">Esto es un párrafo &lt;p&gt;.</p>

<p>Esto es otro párrafo <span title="Esto es un &quot;tip&quot;">&lt;p&gt;</span>.</p>

Eventos intrínsecos

Los eventos intrínsecos son atributos también comunes a todos los elementos que permiten asociar scripts a eventos relacionados con elementos de la página web (por ejemplo, que se ejecute un script cuando se hace clic en un elemento).

Algunos elementos son comunes a todos los elementos, pero otros son específicos de determinados elementos.

Eventos de documento


Atributo	Descripción
onload	Se ejecuta cuando se carga el documento.
onunload	Se ejecuta cuando se abandona el documento.

Eventos de formulario


Atributo	Descripción
onblur	Se ejecuta cuando un elemento pierde el foco.
onchange	Se ejecuta cuando un elemento cambia.
onfocus	Se ejecuta cuando un elemento gana el foco.
onreset	Se ejecuta cuando el formulario se reinicia.
onselect	Se ejecuta cuando un elemento se selecciona.
onsubmit	Se ejecuta cuando el formulario se envía.

Eventos de imagen


Atributo	Descripción
onabort	Se ejecuta cuando se interrumpe la carga de la imagen.

Eventos de teclado


Atributo	Descripción
onkeydown	Se ejecuta cuando se pulsa una tecla.
onkeypress	Se ejecuta cuando se pulsa y despulsa una tecla.
onkeyup	Se ejecuta cuando se despulsa una tecla.

Eventos de ratón


Atributo	Descripción
onclick	Se ejecuta cuando se hace clic.
ondblclick	Se ejecuta cuando se hace doble clic.
onmousedown	Se ejecuta cuando se pulsa un botón del ratón.
onmousemove	Se ejecuta cuando se mueve el ratón.
onmouseout	Se ejecuta cuando el cursor deja de situarse sobre un elemento.
onmouseover	Se ejecuta cuando el cursor se sitúa sobre un elemento.
onmouseup	Se ejecuta cuando se despulsa un botón del ratón.

Ejemplos:

<p onclick="this.style.color='red'">Este párrafo ...</p>

<p ondblclick="this.style.color='red'">Este párrafo ...</p>

<p onmouseup="this.style.color='red'">Este párrafo ...</p>

<p onmousedown="this.style.color='red'">Este párrafo ...</p>

<p onmousemove="this.style.color='red'">Este párrafo ...</p>

<p onmouseover="this.style.color='red'">Este párrafo ...</p>

<p onmouseout="this.style.color='red'">Este párrafo ...</p>