HTML

Atributos
Atributos
 Qué es un atributo
 Atributos comunes
 Eventos intrínsecos
Qué es un atributo
Cualquier 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_atribu
to2" >
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 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
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 5 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 <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.
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 "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>.
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
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
onabort Se ejecuta cuando se interrumpe la carga de la imagen.
Eventos de teclado
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.
Eventos de rató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.
Última modificación de esta página: 14 de diciembre de 2014
Lista de Atributos
Nombre del
Elementos Descripción
Atributo
Lista de tipos aceptados por el servidor, usualmente un
accept <form>, <input>
tipo de archivo.
accept-charset <form> Lista de juegos de caracteres soportados.
Define una tecla que activa o agrega un foco al

accesskey Atributos Globales
elemento.
action <form>
La URL del programa que procesa la información
enviada en el formulario.
<applet>, <caption>,
<col>, <colgroup>, <h
align Especifica el alineamiento horizontal del elemento.
r>, <iframe>, <img>, <
table>, <tbody>, <td>,
Nombre del
Atributo
<tfoot> , <th>, <thea
d>, <tr>
<applet>, <area>, <im Texto alternativo en caso de que la imagen no se pueda

alt
g>, <input> mostrar.
async <script>
Indica que el script debería ejecutarse
asincrónicamente.
Indica si los controles en este formulario pueden tener

autocomplete <form>, <input> por defecto sus valores completados automáticamente
por el navegador.
<button>, <input>, <k

autofocus
El elemento debería recibir foco automáticamente
eygen>, <select>, <te
xtarea>
después de haberse cargado la página.
autoplay <audio>, <video> El audio o video debería empezar lo antes posible.
autosave <input>
Previous values should persist dropdowns of selectable
values across page loads.
<body>, <col>, <colgr

Color de fondo del elemento.
oup>, <marquee>, <tab
bgcolor Nota: Este atributo se mantiene como referencia. Por
le>, <tbody>, <tfoot>,
favor usa la propiedad CSS background-color en su lugar.
<td>, <th>, <tr>
El ancho del borde.

<img>, <object>, <tab
border Nota: Este atributo se mantiene como referencia. Por
le>
favor usa la propiedad CSS border en su lugar.
buffered <audio>, <video> Contiene un rango de tiempo multimedia almacenado.
challenge <keygen>
Cadena de desafío que se envía junto con la clave
pública.
Declara la codificación de caracteres de la página o del

charset <meta>, <script>
script.
Indica que el elemento debería estar marcado al cargar

checked <command>, <input>
la página.
<blockquote>, <del>, Contiene una URL que apunta a la fuente de la cita o

cite
<ins>, <q> cambio.
Usualmente empleado con CSS para aplicar estilos a

class Atributo Global
elementos con propiedades en comun.
Nombre del
Atributo
code <applet>
Especifica la URL del archivo de tipo applet a ser
cargado y ejecutado.
Este atributo contiene la URL absoluta o relativa del

codebase <applet>
directorio donde los archivos de applets (.class)
referenciados en el codigo se encuentran
almacenados.
Este atributo establece el color de texto utilizando un

<basefont>, <font>, < nombre de color o en formato hexadecimal #RRGGBB.
color
hr> Nota: Este atributo se mantiene como referencia. Por
favor usa la propiedad CSS color en su lugar.
cols <textarea> Define el número de columnas en un área de texto.
Define el número de columnas que una celda debe

colspan <td>, <th>
contener.
content <meta>
Un valor asociado con http-equiv o name dependiendo
del contexto.
contenteditabl
e Atributo Global Indica si el contenido del elemento es editable.
Define el ID del elemento <menu> que servira como menú

contextmenu Atributo Global
de contexto para otro elemento.
Indica si el navegador debe mostrar controles de

controls <audio>, <video>
reproduccion al usuario.
coords <area>
Un conjunto de valores que especifican las
coordenadas del area.
data <object> Especifica la URL del recurso.
Permite asociar atributos presonalizados a un elemento

data-* Atributo Global
HTML.
datetime <del>, <ins>, <time> Indica la fecha y hora asociadas con el elemento.
default <track>
Indica que la pista debe estar habilitada a menos que
las preferencias del usuario indiquen algo diferente.
defer <script>
Indica que el código debe ser ejecutado despues de
que la página este cargada.
Nombre del
Atributo
Define la dirección del texto. Los valores permitidos son
dir Atributo Global
ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
Indica la dirección del texto asociada con el elemento

dirname <input>, <textarea>
al momento de enviar el formulario.
<button>, <command>,
<fieldset>, <input>,
disabled <keygen>, <optgroup>, Indica si el usuario puede interactuar con el elemento.
<option>, <select>, <
textarea>
Indica que el hipervínculo es utilizado para descargar

download <a>, <area>
un recurso.
draggable Atributo Global Define si el elemento puede ser arrastrado.
Indica que el elemento acepta contenido soltado en el

dropzone Atributo Global
mismo.
enctype <form>
Define el tipo de contenido del formulario cuando
el método del mismo es POST.
for <label>, <output> Describe elementos que pertenecen a éste.
<button>, <fieldset>,
<input>, <keygen>, <l
abel>, <meter>, <obje
form Indica el formulario al que pertenece el elemento.
ct>, <output>, <progr
ess>, <select>, <text
area>
Indica la acción del elemento, anulando la acción

formaction <input>, <button>
definida en <form>.
headers <td>, <th> IDs de los elementos <th> que aplican a este elemento.
Especifica la altura de los elementos enumerados aquí.

Para todos los demás elementos, usa la propiedad
<canvas>, <embed>, <i
CSS height en su lugar.
height frame>, <img>, <input
Nota: En algunos casos, como los <div>, este es un
>, <object>, <video>
atributo de referencia, en donde debes usar la
propiedad CSS height en su lugar.
Evita la prestación del elemento dado, manteniendo los

hidden Atributo Global
elementos secundarios, p.ej. los elementos de script
Nombre del
Atributo
high <meter> Indica el menor valor del rango alto.
<a>, <area>, <base>, <

href
link>
La URL de un recurso asociado.
hreflang <a>, <area>, <link> Especifica el lenguaje del recurso asociado.
Indica una directiva que puede alterar el

http-equiv <meta> comportamiento de la pagina y como es leida por los
exploradores.
Especifica una imagen relacionada con el comando.

icon <command> Note: El elemento <command> es obsoleto y no se
recomienda su uso.
Identificador el elemento para acceder al mismo desde

id Atributo Global CSS o Javascript, este indicador debe ser unico para
cada elemento.
ismap <img>
Indica que la imagen es parte de un mapa de imagen
del servidor.
Indica que el elemento contiene el valor de la propiedad

itemprop Atributo Global
especificada de un conjunto.
Especifica el tipo de clave generada.

keytype <keygen>
Nota: RSA es el valor por defecto.
kind <track> Specifies the kind of text track.
label <track>
Especifica el título de la pista con un formato legible por
el usuario.
lang Atributo Global Define el lenguaje utilizado en el elemento.
language <script>
Define el lenguage (de programación) utilizado en el
elemento.
list <input>
Identifica una serie de valores predefinidos para ser
sugeridos al usuario.
<audio>, <bgsound>, < Indica si el medio debe volver a ser reproducido desde
loop
marquee>, <video> el principio al llegar al final.
low <meter> Indica el valor mas alto del rango bajo.
Nombre del
Atributo
manifest <html>
Especifica la URL del manifiesto de cache para el
documento.
<input>, <meter>, <pr

max
ogress>
Indica el máximo valor aceptado.
maxlength <input>, <textarea> Define el mayor número de caracteres aceptados.
<a>, <area>, <link>, < Da un indicio del tipo de medio para el cual el recurso
media
source>, <style> vinculado fue creado.
method <form>
Define el método HTTP a emplear para enviar el
formulario. Puede ser GET (predeterminado) o POST.
min <input>, <meter> Indica el valor mínimo aceptado.
multiple <input>, <select> Indica si múltiples valores pueden ser ingresados.
muted <video>
Indica si el audio será silenciado inicialmente al cargar
la página.
<button>, <form>, <fi

eldset>, <iframe>, <i
Nombre del elemento. Por ejemplo utilizado por el
nput>, <keygen>, <obj
name servidor para identificar los campos en el envio de
ect>, <output>, <sele
formularios.
ct>, <textarea>, <map
>, <meta>, <param>
novalidate <form>
Este atributo indica que el formulario no debe ser
validado cuando se envíe.
open <details>
Indica si los detalles de la página seran mostrados
cuando cargue la misma.
optimum <meter> Indica el valor numérico óptimo.
pattern <input>
Define una expresion regular con la cual el valor del
elemento debe ser validado.
Indica si se enviara un ping o notificacion a la URL del

ping <a>, <area>
recurso cuando el usuario utlize el vinculo.
Proporciona una sugerencia al usuario de lo que puede

placeholder <input>, <textarea>
ser introducido en el campo.
poster <video>
Una URL que indica un cuadro a mostrar hasta que el
usuario reproduzca o navegue en el video.
Nombre del
Atributo
Indica si el recurso o partes del mismo deben ser
preload <audio>, <video>
precargadas.
Indica si esta fecha y tiempo concuerda con la fecha y

pubdate <time>
tiempo del <article> mas cercano (ancestro).
Indica los nombres de los comandos de tipo radio, que

seran alternados si el comando en si es alternado. Este
atributo debe ser omitido si el tipo de comando no es
radiogroup <command>
radio.
Note: El elemento <command> es obsoleto y no se
recomienda su uso.
readonly <input>, <textarea> Indica si el elemento puede ser editado por el usuario.
Especifica la relación entre el objeto destino y el objeto

rel <a>, <area>, <link>
enlace.
<input>, <select>, <t

required
extarea>
Indica si se requiere rellenar o no este elemento.
reversed <ol>
Indica si la lista debe ser mostrada en orden
descendente en vez de ascendente.
rows <textarea> Define el número de filas en un área de texto.
Define el número de filas que una celda de una tabla

rowspan <td>, <th>
debe abarcar.
sandbox <iframe> Lista de restricciones a ser desactivadas en el iframe.
scope <th>
Define las celdas que la cabecera definió en este
elemento.
Indica si el estilo será aplicado sólo al elemento

scoped <style> inmediato superior (padre). de no ser definido, el estilo
se aplicara de forma global.
seamless <iframe>
Indica si el iframe debe ser cargado como parte del
mismo documento.
selected <option>
Define un valor que será seleccionado al cargar la
página.
Define una región seleccionable para hacer

shape <a>, <area>
hipervínculos asociados con una forma asociada a una
Nombre del
Atributo
figura para crear un mapa. Los valores para este
atributo son: circle, defaul, plygon y rect.
Define el ancho del elemento (en píxeles). Si el atributo

size <input>, <select> del elemento es del tipo text o passwordentonces es el
número de caracteres.
sizes <link>, <img>, <sourc Define los tamaños en los que el icono puede ser
e> cargado.
span <col>, <colgroup> Indica el número de columnas que se agrupan.
Indica si se permite la corrección ortográfica para el

spellcheck Atributo Global
elemento.
<audio>, <embed>, <if

rame>, <img>, <input>,
src La URL del contenido integrable.
<script>, <source>, <
track>, <video>
srcdoc <iframe> Especifica el contenido de la página incluida.

srclang <track> Especifica el lenguaje del contenido de la pista.
srcset <img>
start <ol> Define el número inicial de la lista (si es diferente a 1).
step <input>
Indica el valor del incremento para un valor numerico o
de fecha.
Define los estilos CSS que anulan los estilos

style Atributo Global
establecidos previamente.
Contiene una descripción del contenido de la tabla.

summary <table> Nota: Este atributo ha sido desaprovado, se
recomienda incluir un elemento <caption> en la tabla.
Sobrescribe el orden de tabulacion del navegador y usa

tabindex Atributo Global
el especificado.
Especifica el marco destino en un vínculo.

Valores especiales: "_blank" indica una nueva ventana,
target <a>, <area>, <base>, < "_parent" indica el marco padre del marco que contiene
form> el código fuente, "_self" indica el marco donde está el
código fuente y "_top" indica la ventana completa del
navegador.
Nombre del
Atributo
Texto a ser mostrado cuando el cursor esté sobre el
title Atributo Global
elemento.
<button>, <input>, <c

ommand>, <embed>, <ob
type Define el tipo de elemento.
ject>, <script>, <sou
rce>, <style>, <menu>
Indica la URL parcial de un image map asociado con el

<img>, <input>, <obje elemento.
usemap
ct> Note: Este atributo no puede ser usado si el
elemento <img> desciende de un <button> o <a>
<button>, <option>, <

Define el valor predeterminado a ser mostrado al cargar
value input>, <li>, <meter>,
la página.
<progress>, <param>
Para los elementos enumerados aquí, esto establece el

<canvas>, <embed>, <i ancho del elemento.
width frame>, <img>, <input Nota: En algunos casos, como los <div>, este es un
>, <object>, <video> atributo de referencia, en donde debes usar la
propiedad CSS height en su lugar.
wrap <textarea> Indica la forma en la cual el texto debe ser envuelto.

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Atributos

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

<p>Esto es otro párrafo <span title="Esto es un

Define una tecla que activa o agrega un foco al

<applet>, <area>, <im Texto alternativo en caso de que la imagen no se pueda

Indica si los controles en este formulario pueden tener

<button>, <input>, <k

autoplay <audio>, <video> El audio o video debería empezar lo antes posible.

<body>, <col>, <colgr

El ancho del borde.

Declara la codificación de caracteres de la página o del

Indica que el elemento debería estar marcado al cargar

<blockquote>, <del>, Contiene una URL que apunta a la fuente de la cita o

Usualmente empleado con CSS para aplicar estilos a

Este atributo contiene la URL absoluta o relativa del

Este atributo establece el color de texto utilizando un

Define el número de columnas que una celda debe

Define el ID del elemento <menu> que servira como menú

Indica si el navegador debe mostrar controles de

Permite asociar atributos presonalizados a un elemento

Indica la dirección del texto asociada con el elemento

Indica que el hipervínculo es utilizado para descargar

Indica que el elemento acepta contenido soltado en el

Indica la acción del elemento, anulando la acción

Especifica la altura de los elementos enumerados aquí.

Evita la prestación del elemento dado, manteniendo los

<a>, <area>, <base>, <

hreflang <a>, <area>, <link> Especifica el lenguaje del recurso asociado.

Indica una directiva que puede alterar el

Especifica una imagen relacionada con el comando.

Identificador el elemento para acceder al mismo desde

Indica que el elemento contiene el valor de la propiedad

Especifica el tipo de clave generada.

<input>, <meter>, <pr

maxlength <input>, <textarea> Define el mayor número de caracteres aceptados.

<button>, <form>, <fi

Indica si se enviara un ping o notificacion a la URL del

Proporciona una sugerencia al usuario de lo que puede

Indica si esta fecha y tiempo concuerda con la fecha y

Indica los nombres de los comandos de tipo radio, que

Especifica la relación entre el objeto destino y el objeto

<input>, <select>, <t

Define el número de filas que una celda de una tabla

Indica si el estilo será aplicado sólo al elemento

Define una región seleccionable para hacer

Define el ancho del elemento (en píxeles). Si el atributo

Indica si se permite la corrección ortográfica para el

<audio>, <embed>, <if

srcdoc <iframe> Especifica el contenido de la página incluida.

start <ol> Define el número inicial de la lista (si es diferente a 1).

Define los estilos CSS que anulan los estilos

Contiene una descripción del contenido de la tabla.

Sobrescribe el orden de tabulacion del navegador y usa

Especifica el marco destino en un vínculo.

<button>, <input>, <c

Indica la URL parcial de un image map asociado con el

<button>, <option>, <

Para los elementos enumerados aquí, esto establece el

S-ar putea să vă placă și

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