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 enviada en el formulario.
align <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody> (en-US), <td>, <tfoot> (en-US) , <th>, <thead> (en-US), <tr> Especifica el alineamiento horizontal del elemento.
alt <area>, <img>, <input> Texto alternativo en caso de que la imagen no se pueda mostrar.
async <script> (en-US) 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>, <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.
autosave <input> Previous values should persist dropdowns of selectable values across page loads.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody> (en-US), <tfoot> (en-US), <td>, <th>, <tr>

Color de fondo del elemento.

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS background-color en su lugar.
border <img>, <object>, <table>

El ancho del borde.

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS border en su lugar.
buffered <audio>, <video> Contiene un rango de tiempo multimedia almacenado.
charset <meta>, <script> (en-US) Declara la codificación de caracteres de la página o del script.
checked <command>, <input> Indica que el elemento debería estar marcado al cargar la página.
cite <blockquote>, <del>, <ins>, <q> Contiene una URL que apunta a la fuente de la cita o cambio.
class Atributo Global Usualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.
color <basefont>, <font>, <hr>

Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.

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.
colspan <td>, <th> Define el número de columnas que una celda debe contener.
content <meta> Un valor asociado con http-equiv o name dependiendo del contexto.
contenteditable Atributo Global Indica si el contenido del elemento es editable.
contextmenu Atributo Global Define el ID del elemento <menu> que servira como menú de contexto para otro elemento.
controls <audio>, <video> Indica si el navegador 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-* Atributo Global 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> (en-US) Indica que el código debe ser ejecutado despues de que la página este cargada.
dir Atributo Global Define la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname <input>, <textarea> Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled <button>, <command>, <fieldset>, <input>, <optgroup> (en-US), <option>, <select>, <textarea> Indica si el usuario puede interactuar con el elemento.
download <a>, <area> Indica que el hipervínculo es utilizado para descargar un recurso.
draggable Atributo Global Define si el elemento puede ser arrastrado.
dropzone Atributo Global Indica que el elemento acepta contenido soltado en el mismo.
enctype <form> Define el tipo de contenido del formulario cuando el método del mismo es POST.
for <label>, <output> (en-US) Describe elementos que pertenecen a éste.
form <button>, <fieldset>, <input>, <label>, <meter> (en-US), <object>, <output> (en-US), <progress>, <select>, <textarea> Indica el formulario al que pertenece el elemento.
formaction <input>, <button> Indica la acción del elemento, anulando la acción definida en <form>.
headers <td>, <th> IDs de los elementos <th> que aplican a este elemento.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS height en su lugar.

Nota: En algunos casos, como los <div>, este es un atributo de referencia, en donde debes usar la propiedad CSS height en su lugar.
hidden Atributo Global Evita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script
high <meter> (en-US) 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.

Note: El elemento <command> es obsoleto y no se recomienda su uso.
id Atributo Global 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 Atributo Global Indica que el elemento contiene el valor de la propiedad especificada de un conjunto.
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> (en-US) 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 volver a ser reproducido desde el principio al llegar al final.
low <meter> (en-US) Indica el valor mas alto del rango bajo.
manifest <html> Especifica la URL del manifiesto de cache para el documento.
max <input>, <meter> (en-US), <progress> Indica el máximo valor aceptado.
maxlength <input>, <textarea> Define el mayor número 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 método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min <input>, <meter> (en-US) 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.
name <button>, <form>, <fieldset>, <iframe>, <input>, <object>, <output> (en-US), <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 cuando se envíe.
open <details> Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum <meter> (en-US) Indica el valor numérico óptimo.
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> Proporciona una sugerencia al usuario de lo que puede 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.
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.

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.
rel <a>, <area>, <link> Especifica la relación entre el objeto destino y el objeto enlace.
required <input>, <select>, <textarea> 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.
rowspan <td>, <th> Define el número de filas que una celda de una tabla 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.
scoped <style> Indica si el estilo será aplicado sólo 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 un valor que será seleccionado al cargar la página.
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 ancho del elemento (en píxeles). Si el atributo del elemento es del tipo text o password entonces es el número de caracteres.
sizes <link>, <img>, <source> Define los tamaños en los que el icono puede ser cargado.
span <col>, <colgroup> Indica el número de columnas que se agrupan.
spellcheck Atributo Global Indica si se permite la corrección ortográfica para el elemento.
src <audio>, <embed>, <iframe>, <img>, <input>, <script> (en-US), <source>, <track>, <video> La URL del contenido integrable.
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.
style Atributo Global Define los estilos CSS que anulan los estilos establecidos previamente.
summary <table>

Contiene una descripción del contenido de la tabla.

Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento <caption> en la tabla.
tabindex Atributo Global 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 Atributo Global Texto a ser mostrado cuando el cursor esté sobre el elemento.
type <button>, <input>, <command>, <embed>, <object>, <script> (en-US), <source>, <style>, <menu> Define el tipo de elemento.
usemap <img>, <input>, <object>

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

Note: Este atributo no puede ser usado si el elemento <img> desciende de un <button> o <a>
value <button>, <option>, <input>, <li>, <meter> (en-US), <progress>, <param> Define el valor predeterminado a ser mostrado al cargar la página.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Para los elementos enumerados aquí, esto establece el ancho del elemento.

Nota: En algunos casos, como los <div>, este es un 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.

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) en 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 ser 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 éste se comporta exactamente.

Ver Tambien