AtributosAtributosCualquier etiqueta XHTML 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 atributo1="valor_de_atributo1" atributo2="valor_de_atributo2" >
En el XHTML los atributos tienen que estar siempre definidos (mediante el signo igual "=") y el valor del atributo tiene que estar entre comillas dobles o simples.
Existen una serie de atributos comunes a todas las etiquetas (salvo la etiqeta <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).
Volver al principio de la página
Comentar los atributos dir, lang, y xml:space
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.
El atributo id permite identificar de forma unívoca un elemento en un documento. Por ello no puede haber dos elementos con el mismo valor en el atributo id.
El nombre de un atributo id tiene 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 contiene puntos, a continuación del punto tiene que haber una letra.
Un elemento sólo puede tener un atributo id, es decir, el atributo id no puede contener espacios.
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.
El atributo style permite definir propiedades de estilo a un elemento determinado.
   |
<p style="color:red">Esto es un párrafo <p>. </p> <p>Esto es otro párrafo <span style="color: red;"><p></span>.</p> |
Esto es un párrafo <p>. Esto es otro párrafo <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.
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 "tip"">Esto es un párrafo <p>. </p> <p>Esto es otro párrafo <span title="Esto es un "tip""><p></span>.</p> |
Esto es un párrafo <p>. Esto es otro párrafo <p>. |
Volver al principio de la página
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.
| Atributo | Descripción |
|---|---|
| onload | Se ejecuta cuando se carga el documento. |
| onunload | Se ejecuta cuando se abandona el documento. |
| 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. |
| Atributo | Descripción |
|---|---|
| onabort | Se ejecuta cuando se interrumpe la carga de la imagen. |
| 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. |
Ejemplos:
<p onkeydown="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onkeydown. |
<p onkeyup="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onkeyup. |
<p onkeypress="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onkeypress. |
| 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> |
Este párrafo tiene establecido el atributo onclick. |
<p ondblclick="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo ondblclick. |
<p onmouseup="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onmouseup. |
<p onmousedown="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onmousedown. |
<p onmousemove="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onmousemove. |
<p onmouseover="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onmouseover. |
<p onmouseout="this.style.color='red'">Este ... </p> |
Este párrafo tiene establecido el atributo onmouseout. |
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.