Atributo HTML

Palabras especiales utilizadas dentro de la etiqueta de apertura para controlar el comportamiento del elemento

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]

Descripción

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í:

Texto centrado

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

Atributos comunes

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_class/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 .

Variedades

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]

Obligatorio y opcional

Utilizado por dos elementos

• <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.

Utilizado por múltiples elementos

• 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>

Atributos estándar

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.

Atributos del evento

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

• abortar
• en autocompletar
• enerror de autocompletar
• Desenfoque
• encancelar
• enpuedejugar
• enpuedejugar
• encambio
• al hacer clic
• al cerrar
• en el menú contextual
• cambio de señal
• hacer doble clic
• Arrastrar
• arrastrando
• arrastrador
• salida de dragado
• en arrastrar hojas
• sobredragover
• Arranque en marcha
• en gota
• cambio de duración
• vaciado
• terminado
• en un error
• en foco
• en la entrada
• no válido
• al presionar una tecla
• al pulsar una tecla
• Activar la tecla
• cargar
• datos cargados
• metadatos cargados
• al iniciar la carga
• con el ratón hacia abajo
• enmouseenter
• al salir del ratón
• onmousemov
• fuera del ratón
• al pasar el ratón por encima
• al poner el ratón arriba
• en la rueda del ratón
• en pausa
• en juego
• en juego
• En progreso
• cambio de tasa
• al reiniciar
• al cambiar el tamaño
• Desplazarse hacia arriba
• buscado
• Buscando
• al seleccionar
• en exhibición
• onsort
• Instalado
• al enviar
• en suspensión
• actualización a tiempo
• alternar
• encambiodevolumen
• en espera

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.

Véase también

• Elemento HTML

Referencias

1. "Índice de atributos HTML 4". W3C . Consultado el 13 de febrero de 2015 .
2. "Sobre SGML y HTML". World Wide Web Consortium . Consultado el 16 de noviembre de 2008 .
3. "XHTML 1.0 – Diferencias con HTML 4". World Wide Web Consortium . Consultado el 16 de noviembre de 2008 .
4. Korpela, Jukka (6 de julio de 1998). "Por qué los valores de los atributos siempre deben estar entrecomillados en HTML". Cs.tut.fi. Consultado el 16 de noviembre de 2008 .
5. "Etiquetas utilizadas en HTML". World Wide Web Consortium. 3 de noviembre de 1992. Consultado el 16 de noviembre de 2008 .
6. "Objetos, imágenes y subprogramas en documentos HTML". World Wide Web Consortium. 24 de diciembre de 1999. Consultado el 16 de noviembre de 2008 .
7. Sin embargo, pueden aplicarse múltiples identificadores al mismo elemento; en particular, un elemento puede estar dentro de otro elemento, cada uno con un identificador.
8. "HTML id". W3Schools . Archivado desde el original el 27 de abril de 2020 . Consultado el 27 de abril de 2020 .
9. "Atributo de identificación global HTML". W3Schools . Consultado el 27 de abril de 2020 .
10. "Clases HTML". W3Schools . Consultado el 27 de abril de 2020 .
11. "Atributo de clase global HTML". W3Schools . Consultado el 27 de abril de 2020 .
12. "Estilos HTML". W3Schools . Consultado el 12 de mayo de 2023 .
13. "Atributo de estilo global HTML". W3Schools . Consultado el 12 de mayo de 2023 .
14. "Sintaxis CSS". W3Schools . Consultado el 12 de mayo de 2023 .
15. "Atributos globales HTML". W3Schools.
16. "Atributos de eventos HTML". W3Schools.
17. «Atributos globales – HTML (lenguaje de marcado de hipertexto)». MDN Web Docs . Consultado el 12 de febrero de 2015 .
18. "Referencia HTML – HTML (lenguaje de marcado de hipertexto)". MDN Web Docs . Consultado el 13 de febrero de 2015 .