Para el desarrollo web, es necesario conocer, que atributos tienen, las etiquetas HTML. Vamos a ver, el concepto ó lo que son, los atributos HTML de las etiquetas, y que atributos existen para cada una.
Antes de ver, todos estos atributos HTML que ahora mismo existen, veamos una definición de que son exactamente. Un atributo HTML es un valor o propiedad que añades a una etiqueta HTML. Este otorgará una propiedad o comportamiento específico a la propia etiqueta, por lo que es muy importante que los conozcas todos, para manejar, las etiquetas, con mayor criterio. Aprenderlos, de memoria, es complicado, asi que, puedes guardarte, esta página en favoritos, para usarla cuando lo necesites.
Para añadir el atributo, bastará con que lo introduzcas, en la propia etiqueta de inicio, del elemento HTML en cuestión. Por ejemplo, añadirle, el atributo «id» (es un identificador único, de cada elemento, dentro de un documento) a una etiqueta <div>, sería así:
<div id="miid"></div>
Cómo te habrás fijado el atributo, se añade dentro de la etiqueta HTML inicial. Observa, que aunque el atributo es «id», este contiene un valor, que le hemos asignado, en este caso «miid».
Si tienes alguna duda sobre que etiquetas HTML existen, puedes consultar Etiquetas HTML5 lista de etiquetas completa, que podrá ayudarte, para tus proyectos.
Existen diferentes tipos de atributos para las etiquetas. Algunos son de ámbito global, mientras que otros son más específicos y solo son válidos para algunas etiquetas HTML. En general podemos ordenarlos de la siguiente manera:
Atributos requeridos: son atributos necesarios para la etiqueta HTML. Sin ellos, la etiqueta por si sola no tendrá el comportamiento esperado.
Atributos opcionales: en este caso, estos atributos son utilizados para modificar la funcionalidad por defecto de la etiqueta HTML.
Atributos globales: son atributos de ámbito general, que pueden ser utilizados en casi cualquier etiqueta HTML.
Existe otro tipo de atributo llamados, atributos de eventos, utilizados, para hacer que las etiquetas HTML, o mejor dicho su «funcionamiento», sean ejecutados siempre que se cumplan unas circunstancias concretas determinadas, con el propio atributo. Puedes ojearlos en eventos de atributos y aprender más, sobre ellos.
AtributoEtiqueta HTMLDescripciónaccept<form>, <input>
Tipos de archivos aceptados por el servidor. Puedes definirlos con valores separados por comas, por ejemplo: .doc, .ods, .txt, etc. O también puedes indicarle un conjunto de tipos de archivos, como por ejemplo: «video/*» o «audio/*»
accept-charset<form>
Define una lista de caracteres soportados en el formulario. Por ejemplo: accept-charset=»ISO-8859-1″
accesskeyAtributo Global
Podrás configurar un botón de tu teclado para que se ejecute una acción, en la página web. Por ejemplo, un enlace hacia la página de contacto o la home.
action<form>
El atributo especifica la URL dónde se enviarán los datos recogidos en el formulario, a menudo un archivo .php dentro del mismo servidor.
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr>
Especifica el alineamiento horizontal del elemento. Atributo en desuso, mejor aplicar reglas CSS.
alt<applet>, <area>, <img>, <input>
Texto alternativo que se mostrará en el navegador en caso de que la imágen, no se pueda mostrar. Muy importante de cara a accesibilidad.
async<script>
Indica que el script debe ejecutarse de forma asíncrona.
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 debe tener el foco automáticamente una vez se cargue la página web.
autoplay<audio>, <video>
Hace que el audio o video comience a reproducirse una vez se cargue la página web.
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>
Te permite añadir un color de fondo al elemento HTML. El color debe ser añadido en el modo de color RGB, por ejemplo #FF00AA. Atributo en desuso, mejor aplicar reglas CSS.
border<img>, <object>, <table>
Permite definir un borde al elemento HTML. Atributo en desuso, mejor aplicar reglas CSS.
buffered<audio>, <video>
Con este atributo podrás definir un rango de tiempo del elemento multimedia que será usado como buffer.
charset<meta>, <script>
Atributo necesario par definir la codificación de caracteres de la página o del script.
checked<command>, <input>
Usado para definir que un elemento HTML debe estar marcado por defecto al cargar la página web.
cite<blockquote>, <del>, <ins>, <q>
Contiene una URL que apúnta, a la fuente de la cita o cambio. Muy importante de cara a una correcta optimización SEO de la página.
classAtributo Global
Otorga una clase creada en CSS a un elemento HTML. Se usa principalmente para aplicar estilos a elementos con propiedades en común.
code<applet>
Especifica la URL del archivo de tipo applet que será cargado y ejecutado.
color<basefont>, <font>, <hr>
Atributo usado para indicar el color del texto de un elemento. En desuso, mejor aplicarle reglas CSS.
cols<textarea>
Dentro de una etiqueta <textarea>, se usa para definir el número de columnas que tendrá el campo de texto.
colspan<td>, <th>
Dentro de una tabla, define el número de columnas que una celda debe ocupar.
content<meta>
Un atributo que permite definir el contenido de la etiqueta HTML <meta> que acompaña.
contenteditableAtributo Global
Define si el contenido del elemento HTML podrá ser editable o no.
contextmenuAtributo Global
Define el ID del elemento <menu> que servirá, como menú de contexto para otro elemento.
controls<audio>, <video>
Indica si el navegador debe mostrar los controles multimedia del reproductor integrado al usuario.
coords<area>
Un conjunto de valores que especifican las coordenadas dentro de la etiqueta area.
data<object>
Especifica la URL, absoluta o relativa del objeto o recurso.
datetime<del>, <ins>, <time>
Permite definir la fecha y hora asociadas con el elemento.
default<track>
Con este atributo podrás definir que por defecto, una pista por ejemplo de subtítulos esté habilitada. Siempre y cuando las preferencias del usuario, no indiquen algo diferente.
defer<script>
Indica que el código debe ser ejecutado despues de que la página este cargada.
dirAtributo Global
Con este atributo puedes definir la dirección del texto en un elemento HTML. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname<input>, <textarea>
Similar a la anterior. Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>
Permite que un elemento HTML esté deshabilitado y el usuario no pueda interactuar con el.
download<a>, <area>
Si este atributo se añade al elemento HTML, el recurso indicado podrá descargarse al dispositivo del usuario.
draggableAtributo Global
Define si el elemento puede ser arrastrado.
for<label>, <output>
Atributo usado para asociar o describir elementos que pertenecen a éste.
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>
Atributo para indicar el formulario al que pertenece el elemento.
headers<td>, <th>
A través de «ids» indicados en los encabezados de una tabla <th> podrás asociarlos a diferentes elementos de la tabla <td>. Muy útil de cara a la accesibilidad y por lo tanto para el SEO.
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>
Permite especificar la altura de los elementos HTML indicados. Atributo en desuso, mejor, aplicar el estilo en el CSS.
hiddenAtributo Global
Este atributo permite indicar que el elemento HTML no debe ser visible. Es habitual usarlo por ejemplo, para ocultar elementos, que no deben ser visibles inicialmente, pero que después de una acción si deben verse.
high<meter>
El atributo especifica el intervalo donde el atributo «value» tomara el valor como alto.
href<a>, <area>, <base>, <link>
Define la URL (Uniform Resource Locator), ó Localizador de Recursos Uniforme, 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 página y como es leída por los exploradores.
idAtributo Global
Usado para asignar un identificador único a un elemento HTML. Usado generalmente para acceder al mismo desde CSS o Javascript. No pueden existir dos «ids» iguales en una misma página web.
ismap<img>
Indica que la imágen es parte, de un mapa de imágen del servidor.
itempropAtributo Global
Atributo que permite dar más información a Google, acerca de imágenes o datos dentro de cualquier tipo de etiquetas. Por ejemplo se puede indicar propiedades como: actores , clasificación, género, etc .
label<track>
Especifica el título de la pista con un formato legible por el usuario. Usado conjuntamente con el atributo «for»
langp>Atributo GlobalDefine el lenguaje utilizado en el elemento, ó en todo el documento.
language<script>
Define el lenguaje (de programación) utilizado en el script.
list<input>
Identifica una serie de valores predefinidos para ser sugeridos al usuario en un menú desplegable.
loop<audio>, <bgsound>, <marquee>, <video>
Atributo que habilita al medio a volver a reproducirse desde el principio cuando llega al final.
low<meter>
Similar al atributo high, solo que en este caso, permite definir cuando un valor estará en el rango bajo.
max<input>, <meter>, <progress>
Define el máximo valor aceptado.
maxlength<input>, <textarea>
Define el mayor número de caracteres aceptados.
media<a>, <area>, <link>, <source>, <style>
Indica el 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>
Define el valor mínimo aceptado.
multiple<input>, <select>
Atributo que define si se puede introducir múltiples valores.
muted<video>
Al reproducir un contenido audiovisual, este atributo indica si el audio será silenciado inicialmente al cargar la página.
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
Nombre del elemento. Utilizado a menudo por el servidor para identificar los campos en el envío de formularios.
novalidate<form>
Con este atributo indicamos al formulario que no valide el contenido del mismo.
open<details>
Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum<meter>
Con este atributo se define el valor numérico óptimo.
pattern<input>
Este atributo define una expresión regular con la cual el valor del elemento debe ser validado antes de aceptar el contenido del mismo.
ping<a>, <area>
Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utilice el vinculo.
placeholder<input>, <textarea>
Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo de un formulario por ejemplo. Muy util de cara a la accesibilidad.
poster<video>
Atributo que permite añadir una imágen que se mostrará mientras se carga un video en una web. En caso de que la URL del video este «rota», el poster seguirá cargándose consiguiendo con esto no ver un hueco vacio en la web.
preload<audio>, <video>
Indica si el recurso o partes del mismo deben ser precargadas.
readonly<input>, <textarea>
Con este atributo se define si el elemento puede o no ser editado por el usuario.
rel<a>, <area>, <link>
Especifica la relación entre el objeto destino y el objeto enlace. Importante de cara una correcta optimización SEO.
required<input>, <select>, <textarea>
Con este atributo hacemos que la etiqueta Html sea, o no, de obligada cumplimentación.
reversed<ol>
Con este atributo podemos modificar el comportamiento estándar de una lista ordenada haciendo que se vea listada en orden descendente en lugar 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>
En una tabla permite definir las celdas que la cabecera deberá ocupar en este elemento.
seamless<iframe>
Indica si el iframe debe ser cargado como parte del mismo documento.
selected<option>
Define un valor que aparecerá por defecto seleccionado al cargar la página.
size<input>, <select>
Define el ancho del elemento (en píxeles). En este caso es mejor por tanto usar reglas CSS. En cambio. si el atributo del elemento es del tipo «text» o «password», entonces es el número de carácteres, que se podrán introducir.
span<col>, <colgroup>
Indica el número de columnas que se agrupan en una tabla.
spellcheckAtributo Global
Con este atributo se permite que un texto pueda ser autocorregido ortográficamente, o no.
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>
La URL del contenido integrable en la etiqueta HTML que lo acompaña.
srcdoc<iframe>
Especifica el contenido de la página incluida.
srclang<track>
Especifica el lenguaje del contenido de la pista.
srcset<img>
Este atributo define diferentes versiones de la imágen, para mostrar una u otra según el tipo de pantalla.
start<ol>
Define el número inicial de la lista ordenada (si es diferente a 1).
styleAtributo Global
Define los estilos CSS, que anulan los estilos establecidos previamente, son llamados estilos en línea, ya que se introducen directamente en la etiqueta HTML en cuestión.
target<a>, <area>, <base>, <form>
Con este atributo se determina 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.
titleAtributo Global
Texto a ser mostrado cuando el cursor esté sobre el elemento. Muy útil de cara a la usabilidad y para una correcto posicionamiento SEO.
type<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>
Define el tipo de elemento HTML.
usemap<img>, <input>, <object>
Indica la URL parcial de un image map asociado con el elemento.
Este atributo no puede ser usádo, si el elemento <img> desciende de un <button> ó un <a>
value<button>, <option>, <input>, <li>, <meter>, <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. Aunque como en caso anteriores, lo correcto sería usar reglas CSS.
wrap<textarea>
Indica la forma de como debe comportarse, el texto, en estas etiquetas.
Bueno, pues si quieres dedicarte, a la elaboración de páginas web, conocer en profundidad, las etiquetas html y como pueden funcionar, en virtud a los atributos que le asignemos, es muy importante, como desarrollador. Por ello, espero que este listado de atributos HTML te sea de utilidad y puedas aprovecharlo en tus proyectos.
Para terminar, si tienes alguna duda, ó sugerencia, agradecería tu contacto. ¡Hasta la próxima!
