Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Referencia de Atributos HTML

Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

Lista de Atributos

Nombre del Atributo Elementos Descripción
accept <form>, <input> Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.
accept-charset <form> Lista de juegos de caracteres soportados.
accesskey Atributos Globales Define una "tecla", que activa o agrega un "foco", al elemento
action <form> La URL del programa que procesa la información, enviado en el formulario
align <applet>, <caption>, <col>, <colgroup><hr>, <iframe>, <img>, <table>, <tbody><td><tfoot> , <th>, <thead>, <tr> Especifica el alineamiento horizontal del elemento
alt

<applet>, <area>, <img>, <input>

Texto alternativo en caso de que la imagen no se pueda mostrar.
async <script> Indica que el script debería ejecutarse asincrónicamente.
autocomplete <form>, <input> Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus <button>, <input>, <keygen>, <select>, <textarea> El elemento debería recibir foco automáticamente después de haberse cargado la página.
autoplay <audio>, <video> El audio o video debería empezar lo antes posible.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

Color de fondo del elemento.

Nota: Este es un atributo por legado. Por favorm usa CSS background-color property instead.

border <img>, <object>, <table>

El ancho del borde.

Nota: Este atributo se mantiene como referencia. Se recomienda usar la propiedad de CSS border.

buffered <audio>, <video> Contiene un rango de tiempo de multimedios ya almacenados en el buffer.
challenge <keygen> Una cadena de desafío que se envía junto con la clave pública.
charset <meta>, <script> Declara la codificación de caracteres de la página o del script.
checked <command>, <input> Indica que el elemento debería estar verificado al cargar la página.
cite <blockquote>, <del>, <ins>, <q> Contiene una URI que apunta a la fuente de la cita o cambio.
class Global attribute Usualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.
code <applet> Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.
codebase <applet> Este atributo contiene la URL  base del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.
color <basefont>, <font>, <hr>

Este atributo configura el color de texto usando un nombre de color o en formato hexadecimal #RRGGBB.

Nota: Este atributo se mantiene como referencia. Se recomienda usar la propiedad de CSS color.

cols <textarea> Define el numero de columnas en un textarea.
colspan <td>, <th> Define el numero de columnas que una celda debe contener.
content <meta> Un valor asociado con http-equivname dependiendo del contexto.
contenteditable Global attribute Indica si el contenido del elemento es editable.
contextmenu Global attribute Define el ID de un elemento <menu> que servira como menu de contexto para el elemento.
controls <audio>, <video> Indica si el explorador debe mostrar controles de reproduccion al usuario.
coords <area> Un conjunto de valores que especifican las coordenadas del area.

data

<object>

Especifica la URL del recurso.

data-*

Global attribute

Permite asociar atributos presonalizados a un elemento 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 codigo debe ser ejecutado despues de que la pagina este cargada.
dir Global attribute Define la direccion del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Left).
dirname <input>, <textarea> Indica la direccion del texto asociada con el elemento al momento de enviar el formulario.
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Infica si el usuario puede interactuar con el elemento.
download <a>, <area> Indica que el hypervinculo es utilizado para descargar un recurso.
draggable Global attribute Define si el elemento puede ser arrastrado.
dropzone Global attribute Indica que el elemento acepta contenido soltado en el mismo.
enctype <form> Define el tipo de contenido del formulario cuando el metodo del mismo es POST.
for <label>, <output> Indica el elemento al que describen y pertenecen.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indica el formulario al que pertenece el elemento.
headers <td>, <th> IDs de los elementos <th> que aplican a este elemento.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Nota: En algunos casos, como los <div>, este es un atributo de referencia, en donde se debe usar la propiedad de css height. En otros casos como <canvas>, la altura debe ser especificada en este atributo.
hidden Global attribute Indica la visibilidad del elemento.
high <meter> Indica el menor valor del rango alto.
href <a>, <area>, <base>, <link> La URL de un recurso asociado.
hreflang <a>, <area>, <link> Especifica el lenguaje del recurso asociado.
http-equiv <meta> Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.
icon <command>

Especifica una imagen relacionada con el comando.

Nota: el elemento <command> es obsoleto y no se recomienda su uso.

id Global attribute Identificador el elemento para acceder al mismo desde 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.

itemprop Global attribute Indica que el elemento contiene el valor de la propiedad especificada de un conjunto.
keytype <keygen>

Especificar el tipo de clave se. 

Nota: RSA es el valor por defecto.

kind <track> Especifica el tipo de pista.
label <track> Especifica el titulo de la pista con un formato legible por el usuario.
lang Global attribute 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.
loop <audio>, <bgsound>, <marquee>, <video> Indica si el medio debe ser reproducido desde el principio al llegar al final.
low <meter> Indica el valor mas alto del rango bajo.
manifest <html> Especifica la URL del manifiesto de cache para el documento.
max <input>, <meter>, <progress> Indica el maximo valor aceptado.
maxlength <input>, <textarea> Define el mayor numero de caracteres aceptados.
media <a>, <area>, <link>, <source>, <style> Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.
method <form> Define el metodo a emplear para enviar el formulario. Puede ser GET el valor predeterminado es POST.
min <input>, <meter> Indica el valor minimo aceptado.
multiple <input>, <select> Indica si multiples valores pueden ser ingresados.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.
novalidate <form> Este atributo indica que el formulario no debe ser validado antes de enviarlo.
open <details> Indica si los detalles de la pagina seran mostrados cuando cargue la misma.
optimum <meter> Indica el valor numerico optimo.
pattern <input> Define una expresion regular con la cual el valor del elemento debe ser validado.
ping <a>, <area> Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder <input>, <textarea> Da un indicio al usuario de que debe ingresar en el elemento.
poster <video> Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.
preload <audio>, <video> Indica si el recurso o partes del mismo deben ser precargadas.
pubdate <time> Indica si esta fecha y tiempo concuerda con la fecha y tiempo del <article> mas cercano (ancestro).
radiogroup <command>

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 radio. 

Nota: el elemento <command> es obsoleto y no se recomienda su uso.

readonly <input>, <textarea> Indica si el elemento puede ser editado por el usuario.
rel <a>, <area>, <link> Especifica la relación que hay entre el objeto destino y aquél donde está el vínculo.
required <input>, <select>, <textarea> Indica si el elemento debe ser llenado o no.
reversed <ol> Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.
rows <textarea> Define el numero de filas del textarea.
rowspan <td>, <th> Define el numero de filas que una celda de una tabla debe abarcar.
sandbox <iframe> Lista de restricciones a ser desactivadas en el iframe.
spellcheck Global attribute Indica si la correccion ortografica esta abilitada para el elemento.
scope <th> Define las celdas que la cabecera definio en este elemento.
scoped <style> Indica si el estilo sera aplicado solo al elemento 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 el valor que sera seleccionado dentro del select al cagar la pagina.
shape <a>, <area> Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: circle, defaul, plygon y rect.
size <input>, <select> Define el largo del elemento (en pixeles). Si el type es textpassword entonces es el numero de caracteres.
sizes <link> Define los tamaños en los que el icono puede ser cargado.
span <col>, <colgroup> Indica el número de columnas que se agrupan.
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> La URL del contenido integrable.
srcdoc <iframe> Especifica el contenido de la pagina incluida.
srclang <track> Especifica el lenguaje del contenido de la pista.
start <ol> Define el numero inicial de la lista (si es diferente a 1).
step <input> Indica el valor del incremento para un valor numerico o de fecha.
style Global attribute

Define los estilos CSS que sobreescribiran los estilos previamente definidos para el elemento.

summary <table>

Contiene una descripcion del contenido de la tabla.

Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento <caption> en la tabla.

tabindex Global attribute Sobrescribe el orden de tabulacion del navegador y usa el especificado.
target <a>, <area>, <base>, <form>

Especifica el marco destino en un vínculo.

Valores especiales: "_blank"  indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.

title Global attribute Texto a ser mostrado cuando el cursor este sobre el elemento. 
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Define el tipo de elemento.
usemap <img><input>, <object>

Indica la URL parcial de un image map asociado con el elemento.

Nota: este atributo no puede ser usado si el elemento <img> deciende de un <button><a>

value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Define el valor predeterminado a ser mostrado al cargar la pagina.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Nota: En algunos casos, como los <div>, este es un atributo de referencia, en donde se debe usar la propiedad de css height. En otros casos como <canvas>, la altura debe ser especificada en este atributo.
wrap <textarea>

Indica la forma en la cual el texto debe ser envuelto.

Valores aceptados: hard y soft.

Valor predeterminado: soft.

Contenido versus Atributos IDL

En HTML, la mayoria de los Atributos tiene dos caras: el Atributo de Contenido y el Atributo IDL

El Atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con element.setAttribute() o element.getAttribute(). El Atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un <input> a 42 usando el atributo de contenido, se debe llamar a setAttribute("maxlength", "42") en ese elemento.

El Atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como element.foo.El Atributo IDL siempre va a usar (pero puede transformarse) el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el Atributo IDL, en esencia, refleja los atributos de contenido.

La mayoria del tiempo, los Atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el type por defecto para los elementos <input> es "texto", entonces si defines input.type="foobar", el elemento <input> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el type del atributo IDL retornara el string "text".

Los Atributos IDL no son siempre strings; por ejemplo, input.maxlength es un numero (marcado como long). Cuando se usan Atributos IDL, lees o defines valores del tipo deseado, entonces input.maxlength siempre retornara un numero y cuando definas input,maxlength, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del  estandar de JavaScript para conversiones de tipo.

LOs Atributos IDL pueden reflejar otros tipos como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los Atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen las reglas de diseño en la especificacion, pero algunas veces no lo hacen. Las especificaciones HTML tratan de sel lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (select.size, por ejemplo) y debes leer las especificaciones para comprender como exactamente éste se comporta.

Ver Tambien

Etiquetas y colaboradores del documento

Etiquetas: 
 Última actualización por: raecillacastellana,