Los atributos de HTML son palabras especiales utilizadas dentro de la etiqueta de apertura para controlar el comportamiento del elemento. Los atributos de HTML son un modificador de un tipo de elemento de HTML, proporcionando funcionalidad adicional. En sintaxis HTML, un atributo se añade a una etiqueta de inicio de HTML.
Se reconocen varios tipos de atributos básicos, que incluyen: (1) atributos requeridos, necesarios para que un tipo de elemento funcione correctamente; (2) atributos opcionales, que modifican la funcionalidad por defecto de un tipo de elemento; (3) atributos estándares, soportados por muchos tipos de elementos; y (4) atributos de evento, utilizados para especificar guiones o script que se ejecutan bajo circunstancias concretas para cierto tipo de elementos.
Algunos tipos de atributo funcionan de manera diferente al ser utilizados para modificar diferentes tipos de elemento. Por ejemplo, el atributo name (nombre) se emplea en varios tipos de elementos, pero tiene funciones ligeramente diferentes en cada uno.[1]
Los atributos de HTML generalmente se muestran como una pareja nombre-valor, separados por =, y están escritos dentro de la etiqueta de inicio de un elemento, después del nombre del elemento:
<element attribute="value">element content</element>
Dónde element nombra el tipo element
del HTML, y atributte es el nombre del atributo puesto al value
(valor) proporcionado. El valor puede estar encerrado en comillas simples o dobles, aunque hay valores compuestos de ciertos caracteres y que pueden quedar descomillados en HTML (pero no en XHTML).[2][3] Dejar valores de atributo descomillados se considera inseguro.[4]
A pesar de que la mayoría de los atributos se proporcionan como nombres y valores parejados, algunos afectan a la simplicidad del elemento con su presencia en la etiqueta de inicio del elemento (como el atributo ismap
para el elementoimg
).[5][6]
El elemento de abreviatura, abbr
, se puede usar para mostar estos distintos atributos:
<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>
Este ejemplo visualiza como HTML, y en la mayoría de los navegadores, al apuntar con el cursor en la abreviatura, debería mostrar el texto de título: "Hypertext Markup Language."
La mayoría de elementos también toman la los atributos relativos a lenguas lang
y dir
.
La mayoría de elementos pueden tomar cualquiera de varios de los atributos comunes:
id
(identidad) proporciona un identificador único en el ámbito de todo el documento para un elemento.[7][8][9] Este puede ser utilizado como selector CSS para proporcionar propiedades presentationales, por los navegadores para centrar la atención en el elemento concreto, o por scripts (guiones) para alterar los contenidos o la presentación de un elemento. Anexado a la URL de la página, la URL directamente apunta el elemento concreto dentro del documento, típicamente una subsección de la página. Por ejemplo, los #ID "Atributtes" en http://en.wikipedia.org/wiki/html#Atributtesclass
proporciona una manera de clasificar elementos similares.[10][11] Esto puede ser utilizado para propósitos semánticos, o para propósitos de presentación. Semantically, por ejemplo, las clases se utilizan en microformatos. Presentacionalmente, por ejemplo, un documento HTML podría utilizar la designaciónclass="notation"
, para indicar que todos los elementos con esta clase de valor están subordinados al texto principal del documento. Tales elementos podrían ser reunidos juntos y presentados como notas al pie en una página, en vez de aparecer en el sitio donde se encuentran en la fuente de HTML. Otro uso sería como selector CSS.style
para un elemento particular.El atributo de estilo se puede utilizar en cualquier elemento de HTML ( se validará en cualquier elemento HTML; aun así, no es necesariamente útil). Se consiera mejor práctica usar los atributos idd
o class
de un elemento para seleccionar el elemento con una stylesheet (hoja de estilo), aunque a veces esto puede ser demasiado pesado para una aplicación de propiedades de estilo simple y específico o ad hoc.title
(título) se suele usar para unir explicación subtextual a un elemento. En la mayoría de los navegadores, este atributo se muestra como lo que a menudo se llama un tooltip o globo.Los atributos HTML se clasifican generalmente en requeridos, opcionales, estándares (también denominados globales) y de evento. Normalmente los atributos requeridos y opcionales modifican elementos de HTML concretos, mientras que los atributos estándares pueden aplicarse a la mayoría de elementos de HTML.[12] Los atributos de evento, añadidos en versión HTML 4, permiten que un elemento especifiquen guiones o script que se ejecutaran en ciertas circunstancias .<re
Los atributos globales, también conocidos como atributos estándares, funcionan con un gran número de elementos.[13] Incluyen los atributos estándares básicos: entre los que se encuentran accesskey, class, contenteditable, contextmenu, data, dir, hidden (escondido), id, lang, style (estilo), tabindex, títle. Hay también algunos experimentales. Tanto xml:lang , como xml:base ha sido depreciados. Los atributos aria-* múltiples mejoran la accesibilidad. Los atributos de manejador de eventos, se listan más adelante en esta página.
Técnicamente todos los atributos globales tienen que ser aceptados por todos los elementos, aunque no funcionen con algunos de ellos.[14] La tabla inferior lista algunos atributos globales comunes, y algunos de los elementos con los que pueden funcionar.
Elemento | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
---|---|---|---|---|---|---|---|---|---|
<param> | id | ||||||||
<head> | dir | lang | xml:lang | ||||||
<html> | dir | lang | xml:lang | ||||||
<meta> | dir | lang | xml:lang | ||||||
<title> | dir | lang | xml:lang | ||||||
<style> | title | dir | lang | xml:lang | |||||
<applet> | id | class | style | title | |||||
<br> | id | class | style | title | |||||
<frame> | id | class | style | title | |||||
<frameset> | id | class | style | title | |||||
<iframe> | id | class | style | title | |||||
<basefont> | id | class | style | title | dir | lang | |||
<center> | id | class | style | title | dir | lang | |||
<dir> | id | class | style | title | dir | lang | |||
<font> | id | class | style | title | dir | lang | |||
<menu> | id | class | style | title | dir | lang | |||
<s> | id | class | style | title | dir | lang | |||
<strike> | id | class | style | title | dir | lang | |||
<u> | id | class | style | title | dir | lang | |||
<abbr> | id | class | style | title | dir | lang | xml:lang | ||
<acronym> | id | class | style | title | dir | lang | xml:lang | ||
<address> | id | class | style | title | dir | lang | xml:lang | ||
<b> | id | class | style | title | dir | lang | xml:lang | ||
<big> | id | class | style | title | dir | lang | xml:lang | ||
<blockquote> | id | class | style | title | dir | lang | xml:lang | ||
<body> | id | class | style | title | dir | lang | xml:lang | ||
<caption> | id | class | style | title | dir | lang | xml:lang | ||
<cite> | id | class | style | title | dir | lang | xml:lang | ||
<code> | id | class | style | title | dir | lang | xml:lang | ||
<col> | id | class | style | title | dir | lang | xml:lang | ||
<colgroup> | id | class | style | title | dir | lang | xml:lang | ||
<dd> | id | class | style | title | dir | lang | xml:lang | ||
<del> | id | class | style | title | dir | lang | xml:lang | ||
<dfn> | id | class | style | title | dir | lang | xml:lang | ||
<div> | id | class | style | title | dir | lang | xml:lang | ||
<dl> | id | class | style | title | dir | lang | xml:lang | ||
<dt> | id | class | style | title | dir | lang | xml:lang | ||
<em> | id | class | style | title | dir | lang | xml:lang | ||
<fieldset> | id | class | style | title | dir | lang | xml:lang | ||
<form> | id | class | style | title | dir | lang | xml:lang | ||
<hn> | id | class | style | title | dir | lang | xml:lang | ||
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> | id | class | style | title | dir | lang | xml:lang | ||
<i> | id | class | style | title | dir | lang | xml:lang | ||
<img> | id | class | style | title | dir | lang | xml:lang | ||
<ins> | id | class | style | title | dir | lang | xml:lang | ||
<kbd> | id | class | style | title | dir | lang | xml:lang | ||
<li> | id | class | style | title | dir | lang | xml:lang | ||
<link> | id | class | style | title | dir | lang | xml:lang | ||
<map> | id | class | style | title | dir | lang | xml:lang | ||
<noframes> | id | class | style | title | dir | lang | xml:lang | ||
<noscript> | id | class | style | title | dir | lang | xml:lang | ||
<ol> | id | class | style | title | dir | lang | xml:lang | ||
<optgroup> | id | class | style | title | dir | lang | xml:lang | ||
<option> | id | class | style | title | dir | lang | xml:lang | ||
<p> | id | class | style | title | dir | lang | xml:lang | ||
<pre> | id | class | style | title | dir | lang | xml:lang | ||
<q> | id | class | style | title | dir | lang | xml:lang | ||
<samp> | id | class | style | title | dir | lang | xml:lang | ||
<small> | id | class | style | title | dir | lang | xml:lang | ||
<span> | id | class | style | title | dir | lang | xml:lang | ||
<strong> | id | class | style | title | dir | lang | xml:lang | ||
<sub> | id | class | style | title | dir | lang | xml:lang | ||
<sup> | id | class | style | title | dir | lang | xml:lang | ||
<table> | id | class | style | title | dir | lang | xml:lang | ||
<tbody> | id | class | style | title | dir | lang | xml:lang | ||
<td> | id | class | style | title | dir | lang | xml:lang | ||
<tfoot> | id | class | style | title | dir | lang | xml:lang | ||
<th> | id | class | style | title | dir | lang | xml:lang | ||
<thead> | id | class | style | title | dir | lang | xml:lang | ||
<tr> | id | class | style | title | dir | lang | xml:lang | ||
<tt> | id | class | style | title | dir | lang | xml:lang | ||
<ul> | id | class | style | title | dir | lang | xml:lang | ||
<var> | id | class | style | title | dir | lang | xml:lang | ||
<label> | id | class | style | title | dir | lang | xml:lang | accesskey | |
<legend> | id | class | style | title | dir | lang | xml:lang | accesskey | |
<object> | id | class | style | title | dir | lang | xml:lang | tabindex | |
<select> | id | class | style | title | dir | lang | xml:lang | tabindex | |
<a> | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
<area> | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
<button> | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
<input> | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
<textarea> | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
Los atributos estándar o globales incluyen los atributos de manejo de evento. Todos tienen el prefijo -:[13]
Los atributos de evento, añadidos en HTML versión 4, permiten a un elemento especificar guiones o script que serán ejecutados bajo determinadas circunstancias. La tabla de más abajo lista algunos de los atributos de manejador de evento más comunes, y algunos elementos con los que pueden funcionar.
Element | At | At | At | At | At | At | At | At | At | At | At | At | At | At | At | At | At |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<frameset> | onload | onunload | |||||||||||||||
<body> | onload | onunload | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||
<abbr> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<acronym> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<address> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<b> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<big> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<blockquote> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<caption> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<center> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<cite> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<code> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<col> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<colgroup> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<dd> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<del> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<dfn> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<dir> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<div> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<dl> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<dt> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<em> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<fieldset> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<hr> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<i> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<ins> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<kbd> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<legend> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<li> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<link> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<map> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<menu> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<noframes> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<noscript> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<object> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<ol> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<optgroup> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<option> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<p> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<pre> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<q> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<s> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<samp> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<small> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<span> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<strike> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<strong> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<sub> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<sup> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<table> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<tbody> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<td> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<tfoot> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<th> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<thead> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<tr> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<tt> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<u> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<ul> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<var> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
<img> | onabort | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||
<a> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
<area> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
<button> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
<form> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
<label> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | |||||
<select> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | ||||
<input> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | onselect | |||
<textarea> | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | onselect |