Atributo HTML

palabras especiales usadas dentro de una etiqueta de apertura de un elemento HTML para controlar el comportamiento del elemento

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]

Descripción editar

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.

Atributos comunes editar

La mayoría de elementos pueden tomar cualquiera de varios de los atributos comunes:

  • El atributo 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#Atributtes
  • El atributo class 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.
  • Un autor puede utilizar propiedades no presentacionales de código atribucional de 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 iddo classde 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.
  • El atributo de 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.

Variedades editar

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 .[13]

Requerido y opcional editar

Utilizado por un elemento editar

Utilizado por dos elementos editar

Utilizado por múltiples elementos editar

Atributos globales editar

Los atributos globales, también conocidos como atributos estándares, funcionan con un gran número de elementos.[14]​ 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 este página.

Técnicamente todos los atributos globales tienen que ser aceptados por todos los elementos, aunque no funcionen con algunos de ellos.[15]​ 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

Atributos de evento editar

Los atributos estándar o globales incluyen los atributos de manejo de evento. Todos tienen el prefijo -:[14]

  • onabort
  • onautocomplete
  • onautocompleteerror
  • onblur
  • oncancel
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • onclose
  • oncontextmenu
  • oncuechange
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreset
  • onresize
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onsort
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • ontoggle
  • onvolumechange
  • onwaiting

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

Véase también editar

Referencias editar

  1. «Index of the HTML 4 Attributes». W3C. Consultado el 13 de febrero de 2015. 
  2. «On SGML and HTML». World Wide Web Consortium. Consultado el 16 de noviembre de 2008. 
  3. «XHTML 1.0 - Differences with HTML 4». World Wide Web Consortium. Consultado el 16 de noviembre de 2008. 
  4. Korpela, Jukka (6 de julio de 1998). «Why attribute values should always be quoted in HTML». Cs.tut.fi. Archivado desde el original el 21 de noviembre de 2008. Consultado el 16 de noviembre de 2008. 
  5. «Tags used in HTML». World Wide Web Consortium. 3 de noviembre de 1992. Consultado el 16 de noviembre de 2008. 
  6. «Objects, Images, and Applets in HTML documents». World Wide Web Consortium. 24 de diciembre de 1999. Consultado el 16 de noviembre de 2008. 
  7. However, multiple identifiers may apply to the same element; in particular an element may be inside another element, each having an identifier.
  8. «HTML id». www.w3schools.com. Consultado el 27 de abril de 2020. 
  9. «HTML Global id Attribute». www.w3schools.com. Consultado el 27 de abril de 2020. 
  10. «HTML Classes». www.w3schools.com. Consultado el 27 de abril de 2020. 
  11. «HTML Global class Attribute». www.w3schools.com. Consultado el 27 de abril de 2020. 
  12. «HTML / XHTML Standard Attributes». w3schools.com. 
  13. «HTML / XHTML Standard Event Attributes». w3schools.com. 
  14. a b «Global attributes - HTML (HyperText Markup Language) MDN». Consultado el 12 de febrero de 2015. 
  15. «HTML reference - HTML (HyperText Markup Language) MDN». Consultado el 13 de febrero de 2015.