Atributo HTML

Los atributos HTML son palabras especiales que se utilizan dentro de la etiqueta de apertura para controlar el comportamiento del elemento. Los atributos HTML son un modificador de un tipo de elemento HTML . Un atributo modifica la funcionalidad predeterminada de un tipo de elemento o proporciona funcionalidad a ciertos tipos de elementos que no pueden funcionar correctamente sin ellos. En la sintaxis HTML, un atributo se agrega a una etiqueta de inicio HTML .

Se han reconocido varios tipos de atributos básicos, incluidos: (1) atributos obligatorios , necesarios para que un tipo de elemento en particular funcione correctamente; (2) atributos opcionales , utilizados para modificar la funcionalidad predeterminada de un tipo de elemento; (3) atributos estándar , compatibles con muchos tipos de elementos; y (4) atributos de evento , utilizados para hacer que los tipos de elementos especifiquen scripts que se ejecutarán en circunstancias específicas.

Algunos tipos de atributos funcionan de manera diferente cuando se utilizan para modificar distintos tipos de elementos. Por ejemplo, el nombre del atributo se utiliza en varios tipos de elementos, pero tiene funciones ligeramente diferentes en cada uno de ellos. ^[1]

Los atributos HTML generalmente aparecen como pares nombre-valor , separados por =, y se escriben dentro de la etiqueta de inicio de un elemento, después del nombre del elemento:

<element attribute= "value" > contenido del elemento </element>  

Donde elementnombra el tipo de elemento HTML y attributees el nombre del atributo, establecido en el valor proporcionado value. El valor puede estar entre comillas simples o dobles, aunque los valores que constan de ciertos caracteres pueden dejarse sin comillas en HTML (pero no en XHTML). ^{[2] [3]} Dejar los valores de los atributos sin comillas se considera inseguro. ^[4]

Aunque la mayoría de los atributos se proporcionan como nombres y valores emparejados, algunos afectan al elemento simplemente por su presencia en la etiqueta de inicio del elemento ^[5] (como el ismapatributo del imgelemento ^[6] ).

El elemento de abreviatura, abbr, se puede utilizar para demostrar estos diversos atributos:

< abbr  id = "anId"  class = "aClass"  style = "color:blue;"  title = "Lenguaje de marcado de hipertexto" > HTML </ abbr >

Este ejemplo se muestra como HTML en azul sin ser un enlace y, en la mayoría de los navegadores, al apuntar el cursor a la abreviatura, debería aparecer el texto del título "Lenguaje de marcado de hipertexto" dentro de un fondo amarillo flotante ( información sobre herramientas ).

< div  style = "text-align: center;" > Texto centrado </ div >

En este otro ejemplo, su texto se verá así:

La mayoría de los elementos también toman los atributos relacionados con el lenguaje langy dir.

Generalmente, los elementos HTML pueden tomar cualquiera de los atributos estándar más comunes (ver la lista completa):

• El idatributo proporciona un identificador único para un elemento en todo el documento. ^{[7] [8] [9]} Puede utilizarse como selector CSS para proporcionar propiedades de presentación, por parte de los navegadores para centrar la atención en el elemento específico o por parte de los scripts para modificar el contenido o la presentación de un elemento. Si se añade a la URL de la página, la URL apunta directamente al elemento específico dentro del documento, normalmente una subsección de la página. Por ejemplo, el ID "Atributos" en http://en.wikipedia.org/wiki/HTML#Attributes(para hacer referencia a la sección "Atributos" en la página "HTML").
• El classatributo proporciona una forma de clasificar elementos similares. Se pueden agregar varios nombres de clase separándolos con espacios. ^{[10] [11]} Semánticamente, por ejemplo, las clases se utilizan en microformatos . Además, los autores de hojas de estilo pueden construir selectores que coincidan con los elementos por clase para fines de estilo. Por ejemplo, un documento HTML puede utilizar la designación class="notation"para indicar que todos los elementos con este valor de clase están subordinados al texto principal del documento. Dichos elementos se pueden reunir como notas al pie de una página, en lugar de aparecer en el lugar sugerido por su posición dentro del código fuente HTML. El autor de la hoja de estilo también puede definir una regla con el .notationselector y definir la propiedad font-size: small;.
• El styleatributo proporciona una forma de aplicar reglas de estilo específicas del elemento. Se pueden agregar múltiples declaraciones de estilo separándolas con punto y coma y un espacio opcional, donde cada declaración incluye un nombre de propiedad CSS y un valor separado por dos puntos y un espacio opcional (Ejemplo: style="color: red; text-align: center;"). ^{[12] [13] [14]} El styleatributo se puede usar en cualquier elemento HTML (se validará en cualquier elemento HTML; sin embargo, no es necesariamente útil). Se considera una mejor práctica agregar la información de estilo a una hoja de estilo , a menudo realizada con selectores que coinciden con la clase o ID del elemento. A veces, sin embargo, se prefieren los estilos en línea donde las hojas de estilo se consideran demasiado engorrosas para una especificación de estilo simple y específica o ad hoc.
• El titleatributo se utiliza para adjuntar una explicación subtextual a un elemento. En la mayoría de los navegadores, este atributo se muestra como lo que se suele denominar información sobre herramientas .

Los atributos HTML generalmente se clasifican en atributos obligatorios , atributos opcionales , atributos estándar y atributos de evento :

• Generalmente los atributos obligatorios y opcionales modifican elementos HTML específicos
• Si bien los atributos estándar se pueden aplicar a la mayoría de los elementos HTML. ^[15]
• Los atributos de evento, agregados en la versión 4 de HTML, permiten que un elemento especifique scripts que se ejecutarán en circunstancias específicas. ^[16]

• <a> y <area> :
  • coords — coordenadas de un <área> o un <enlace> dentro de ella.
  • forma: forma de un <área> o de un <enlace> dentro de ella. Valores: predeterminado, rectángulo, círculo, polígono.
• <a> y <link> :
  • hreflang — Código de idioma del documento vinculado. ( <a> , <link> )
  • rel — Naturaleza del documento vinculado (relativo a la página que se muestra actualmente). Texto libre para <a> , pero <link> utiliza un conjunto de términos (alternativa, apéndice, marcador, capítulo, contenido, derechos de autor, glosario, ayuda, inicio, índice, siguiente, anterior, sección, inicio, hoja de estilo, subsección).
  • rev — Naturaleza de la página mostrada actualmente (en relación con el documento vinculado). Varía para <a> y <link>, al igual que para rel.
• <applet> y <object> :
  • archivo — URL(s) de archivo ( <applet> , <object> )
  • codebase — URL base ( <applet> , <object> )
• <fuente base> y <fuente> :
  • color — color del texto (obsoleto) ( <basefont> , <font> )
  • face — familia de fuentes (obsoleta) ( <basefont> , <font> )
• <col> y <colgroup> :
  • span — número de columnas abarcadas ( <col> , <colgroup> )
• <del> y <ins> :
  • datetime — fecha y hora de la eliminación o inserción del texto .
• <form> y <input> :
  • aceptar — tipos de archivos aceptados al cargar <form> o <input>
• <frame> y <iframe> :
  • frameborder — valor (0 o 1) especifica si se debe mostrar un borde alrededor de <frame> o <iframe> .
  • marginheight — márgenes superior e inferior en píxeles alrededor de <frame> o <iframe> .
  • desplazamiento: el valor (sí, no, automático) especifica si se deben mostrar barras de desplazamiento alrededor de <frame> o <iframe> .
  • marginwidth — márgenes izquierdo y derecho en píxeles alrededor de <frame> o <iframe> .
• <conjunto de marcos> y <área de texto >:
  • cols — número de columnas visibles en <frameset> o <textarea> (alguna variación)
  • filas — número de filas visibles en <frameset> o <textarea> (alguna variación)
• <img> y <object> :
  • usemap — especifica el nombre de un elemento de mapa para usar con <img> -o- URL de un mapa de imagen para usar con <object> .
• <entrada> y <área de texto >:
  • readonly — especifica texto de solo lectura para <input> y <textarea> .
• <link> y <style> :
  • media — especifica el dispositivo de visualización para <link> y <style> . Valores: all, aural, braille, handheld, print, projection, screen, tty, TV.
• <optgroup> y <opción> :
  • etiqueta — texto descriptivo para un <optgroup> o <option> .
• <td> y <th> :
  • abbr — versión abreviada de una celda o encabezado de tabla .
  • eje: nombre de categoría para una celda o encabezado de tabla .
  • colspan: número de columnas abarcadas por una celda o encabezado de tabla .
  • nowrap — (obsoleto) evita el ajuste de una celda o encabezado de tabla .
  • rowspan — número de filas abarcadas por una celda o encabezado de tabla .
  • alcance: no tiene efecto en la visualización normal del navegador, pero marca una celda o encabezado de tabla como encabezado lógico para otras celdas. Valores: col, colgroup, row, rowgroup.

• alinear — <applet> , <col> , <colgroup> , <object> , <tbody> , <td> , <tfoot> , <th> , <thead>

• La alineación también está obsoleta en <caption> , <div> , <h1> a <h6> , <hr> , <iframe> , <img> , <input> , <legend> , <p> , <table>

• alt — <applet> , <área> , <img> , <entrada>
• bgcolor — <cuerpo> , <tabla> , <td> , <th> , <bgcolor>
• borde — <img> , <objeto> , <tabla>
• char — <char> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
• charoff — <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
• conjunto de caracteres — <a> , <link> , <script>
• citar — <blockquote> , <del> , <ins> , <q>
• compacto — <dir> , <menú> , <ol> , <ul>
• deshabilitado — <botón> , <entrada> , <grupo de opciones> , <opción> , <seleccionar> , <área de texto>
• altura — <applet> , <iframe> , <img> , <object> . También obsoleto en <td> , <th>
• href — <a> , <área> , <base> , <enlace>
• hspace — <applet> , <object> . También obsoleto en <img>
• longdesc — <marco> , <iframe> , <img>
• nombre — <a> , <applet> , <button> , <form> , <frame> , <iframe> , <input> , <map> , <meta> , <object> , <param> , <select> , <textarea>
• tamaño — <fuente base> , <fuente> , <hr> , <entrada> , <selección>
• src — <marco> , <iframe> , <img> , <entrada> , <script>
• objetivo — <a> , <área> , <base> , <formulario> , <enlace>
• tipo — <botón> , <entrada> , <li> , <enlace> , <objeto> , <ol> , <parámetro> , <script> , <estilo> , <ul>
• valign — <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
• valor — <botón> , <entrada> , <li> , <opción> , <parámetro>
• vspace — <applet> , <img> , <objeto>
• ancho — <applet> , <col> , <colgroup> , <hr> , <iframe> , <img> , <object> , <pre> , <table> , <td> , <th>

Los atributos estándar también se conocen como atributos globales y funcionan con una gran cantidad de elementos. ^[17] Incluyen los atributos estándar básicos: estos incluyen accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title . También hay algunos experimentales. Tanto xml:lang como xml:base han quedado obsoletos. Los atributos múltiples aria-* mejoran la accesibilidad. ^[17] Los atributos del controlador de eventos se enumeran más adelante.

Técnicamente, todos los atributos estándar deben ser aceptados por todos los elementos, aunque no funcionarán con algunos elementos. ^[18] La siguiente tabla enumera algunos atributos estándar comunes y algunos elementos con los que pueden funcionar.

Los atributos estándar incluyen los atributos del controlador de eventos . Todos tienen el prefijo on-: ^[17]

Los atributos de evento, añadidos en la versión 4 de HTML, permiten que un elemento especifique los scripts que se ejecutarán en circunstancias específicas. La siguiente tabla enumera algunos atributos de controlador de eventos comunes y algunos elementos con los que pueden funcionar.

• Elemento HTML