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, se agrega un atributo a una etiqueta de inicio HTML .

Se han reconocido varios tipos de atributos básicos, incluidos: (1) atributos requeridos , que necesita un tipo de elemento particular para que ese tipo de elemento 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 eventos , 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 usan para modificar diferentes tipos de elementos. Por ejemplo, el nombre del atributo es utilizado por varios tipos de elementos, pero tiene funciones ligeramente diferentes en cada uno. ^[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 atributo= "valor" > 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 inicial del elemento ^[5] (como el ismapatributo del imgelemento ^[6] ).

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

< abbr  id = "anId"  class = "aClass"  style = "color:azul;"  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 se debe mostrar el texto del título "Lenguaje de marcado de hipertexto" dentro de un fondo amarillo flotante ( información sobre herramientas ).

< estilo div  = "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 idioma langy dir.

Atributos comunes

Por lo general, los elementos HTML pueden tomar cualquiera de los atributos estándar más comunes (consulte la lista completa):

• El idatributo proporciona un identificador único en todo el documento para un elemento. ^{[7] [8] [9]} Esto puede usarse como selector de CSS para proporcionar propiedades de presentación, por parte de los navegadores para centrar la atención en el elemento específico o por scripts para alterar el contenido o la presentación de un elemento. Adjunta a la URL de la página, la URL apunta directamente al elemento específico dentro del documento, generalmente una subsección de la página. Por ejemplo, el ID "Atributos" en http://en.wikipedia.org/wiki/HTML_classes/HTML#Attributes(para consultar la sección "Atributos" en la página "HTML").
• El classatributo proporciona una forma de clasificar elementos similares. Se pueden agregar varios nombres de clases 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 hagan coincidir elementos por clase con fines de estilo. Por ejemplo, un documento HTML podría usar la designación class="notation"para indicar que todos los elementos con este valor de clase están subordinados al texto principal del documento. Estos elementos podrían agruparse como notas a pie de página en una página, en lugar de aparecer en el lugar sugerido por su posición dentro de la fuente HTML. El autor de la hoja de estilo también podría 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 de elementos. 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 utilizar 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 , lo que a menudo se logra con selectores que coinciden con la clase o ID del elemento. A veces, sin embargo, se prefieren los estilos en línea cuando 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 a menudo se denomina información sobre herramientas .

Variedades

Los atributos HTML generalmente se clasifican como atributos obligatorios , atributos opcionales , atributos estándar y atributos de eventos :

• Por lo general, los atributos obligatorios y opcionales modifican elementos HTML específicos.
• Mientras que los atributos estándar se pueden aplicar a la mayoría de los elementos HTML. ^[15]
• Los atributos de evento, agregados en HTML versión 4, permiten que un elemento especifique secuencias de comandos que se ejecutarán en circunstancias específicas. ^[dieciséis]

Requerido y opcional

Utilizado por dos elementos.

• <a> y <área > :
  • coords: coordenadas de un <area> o un <link> dentro de él.
  • forma: forma de un <area> o un <link> dentro de él. Valores: predeterminado, rect, círculo, poli.
• <a> y <enlace> :
  • hreflang : código de idioma del documento vinculado. ( <a> , <enlace> )
  • rel: naturaleza del documento vinculado (en relación con la página que se muestra actualmente). Texto libre para <a> , pero <enlace> utiliza un conjunto de términos (alternativo, 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 que se muestra actualmente (en relación con el documento vinculado). Varía para <a> y <link> en cuanto a rel.
• <applet> y <objeto> :
  • archivo — URL(s) de archivo ( <applet> , <objeto> )
  • base de código: URL base ( <applet> , <objeto> )
• <fuente base> y <fuente> :
  • color — color del texto (obsoleto) ( <basefont> , <font> )
  • face — familia de fuentes (en desuso) ( <basefont> , <font> )
• <col> y <colgrupo> :
  • span: número de columnas distribuidas ( <col> , <colgroup> )
• <del> y <ins> :
  • datetime: fecha y hora de eliminación o inserción del texto .
• <formulario> y <entrada> :
  • aceptar: tipos de archivos aceptados al cargar <formulario> o <entrada>
• <marco> y <iframe> :
  • frameborder: valor (0 o 1) especifica si se mostrará un borde alrededor del <frame> o <iframe> .
  • marginheight: márgenes superior e inferior en píxeles alrededor del <frame> o <iframe> .
  • desplazamiento: el valor (sí, no, automático) especifica si se muestran barras de desplazamiento alrededor del <frame> o <iframe> .
  • marginwidth: márgenes izquierdo y derecho en píxeles alrededor del <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 <objeto> :
  • usemap: especifica el nombre de un elemento de mapa para usar con <img> -o- URL de un mapa de imágenes para usar con <object> .
• <entrada> y <área de texto > :
  • readonly: especifica texto de solo lectura para <input> y <textarea> .
• <enlace> y <estilo> :
  • media: especifica el dispositivo de visualización para <link> y <style> . Valores: todo, auditivo, braille, portátil, impreso, proyección, pantalla, tty, TV.
• <grupoopt> y <opción > :
  • etiqueta: texto de descripción de un <optgroup> o <option> .
• <td> y <th> :
  • abbr: versión abreviada de una celda o encabezado de una tabla .
  • eje: nombre de categoría para una celda o encabezado de una tabla .
  • colspan: número de columnas abarcadas por una celda o encabezado de una tabla .
  • nowrap: (en desuso) evita el ajuste de una celda o encabezado de una tabla .
  • intervalo de filas: número de filas que abarca una celda o encabezado de una tabla .
  • alcance: no tiene efecto en la visualización normal del navegador, pero marca una celda o encabezado de la tabla como encabezado lógico para otras celdas. Valores: col, colgroup, fila, grupo de filas.

Utilizado por múltiples elementos.

• alinear - <applet> , <col> , <colgroup> , <objeto> , <tbody> , <td> , <tfoot> , <th> , <thead>

• align también está en desuso 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> , <enlace> , <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> , <objeto> . También en desuso en <td> , <th>
• href - <a> , <área> , <base> , <enlace>
• hspace - <applet> , <objeto> . También en desuso en <img>
• longdesc — <marco> , <iframe> , <img>
• nombre : <a> , <applet> , <botón> , <formulario> , <marco> , <iframe> , <entrada> , <mapa> , <meta> , <objeto> , <param> , <seleccionar> , <área de texto>
• tamaño : <fuente base> , <fuente> , <hora> , <entrada> , <seleccionar>
• src - <marco> , <iframe> , <img> , <entrada> , <script>
• destino : <a> , <área> , <base> , <formulario> , <enlace>
• tipo : <botón> , <entrada> , <li> , <enlace> , <objeto> , <ol> , <param> , <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> , <objeto> , <pre> , <tabla> , <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 clave de acceso, clase, contenteditable, menú contextual, datos, directorio, oculto, identificación, idioma, estilo, índice de tabulación, título . También hay algunos experimentales. Tanto xml:lang como xml:base han quedado obsoletos. Los múltiples atributos aria-* mejoran la accesibilidad. ^[17] Los atributos del controlador de eventos se enumeran más adelante.

Técnicamente, todos los elementos deben aceptar todos los atributos estándar, 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-: ^[17]

• abortar
• en autocompletar
• error de autocompletado
• en la falta de definición
• cancelar
• oncanplay
• oncanplaythrough
• en cambio
• al hacer clic
• cerrar
• menú contextual
• cambio de señal
• hacer clic
• arrastrar
• ondragend
• ondragente
• ondragexit
• ondragleave
• ondragover
• ondragstart
• caer
• onduracióncambio
• uno vaciado
• terminado
• error
• enfocado
• en entrada
• en inválido
• onkeydown
• al presionar una tecla
• encendido
• cargar
• datos cargados
• metadatos cargados
• inicio de carga
• en el mouse abajo
• onmouseenter
• dejar el mouse
• mover el mouse
• en el mouse
• el ratón por encima
• en el ratón
• en la rueda del mouse
• pausa
• en juego
• jugando
• en progreso
• cambio de tasa
• reiniciar
• cambiar el tamaño
• desplazamiento
• buscado
• buscando
• al seleccionar
• en el programa
• ordenar
• instalado
• al enviar
• suspender
• actualización a tiempo
• alternar
• cambio de volumen
• esperando

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

Ver también

• elemento HTML

Referencias

1. "Índice de los atributos HTML 4". W3C . Consultado el 13 de febrero de 2015 .
2. "Sobre SGML y HTML". Consorcio Mundial de la red . Consultado el 16 de noviembre de 2008 .
3. "XHTML 1.0: diferencias con HTML 4". Consorcio Mundial de la red . Consultado el 16 de noviembre de 2008 .
4. Korpela, Jukka (6 de julio de 1998). "Por qué los valores de los atributos siempre deben citarse en HTML". Cs.tut.fi. ​Consultado el 16 de noviembre de 2008 .
5. "Etiquetas utilizadas en HTML". Consorcio Mundial de la red. 3 de noviembre de 1992 . Consultado el 16 de noviembre de 2008 .
6. "Objetos, imágenes y subprogramas en documentos HTML". Consorcio Mundial de la red. 24 de diciembre de 1999 . Consultado el 16 de noviembre de 2008 .
7. Sin embargo, es posible que se apliquen varios identificadores al mismo elemento; en particular, un elemento puede estar dentro de otro elemento, teniendo cada uno un identificador.
8. "Identificación HTML". Escuelas W3 . Archivado desde el original el 27 de abril de 2020 . Consultado el 27 de abril de 2020 .
9. "Atributo de identificación global HTML". Escuelas W3 . Consultado el 27 de abril de 2020 .
10. "Clases HTML". Escuelas W3 . Consultado el 27 de abril de 2020 .
11. "Atributo de clase global HTML". Escuelas W3 . Consultado el 27 de abril de 2020 .
12. "Estilos HTML". Escuelas W3 . Consultado el 12 de mayo de 2023 .
13. "Atributo de estilo global HTML". Escuelas W3 . Consultado el 12 de mayo de 2023 .
14. "Sintaxis CSS". Escuelas W3 . Consultado el 12 de mayo de 2023 .
15. "Atributos globales HTML". Escuelas W3.
16. "Atributos de eventos HTML". Escuelas W3.
17. "Atributos globales: HTML (lenguaje de marcado de hipertexto)". Documentos web de MDN . Consultado el 12 de febrero de 2015 .
18. "Referencia HTML: HTML (lenguaje de marcado de hipertexto)". Documentos web de MDN . Consultado el 13 de febrero de 2015 .