Articulo de referencia

atributo HTML

Los atributos del lenguaje de marcado de hipertexto son palabras especiales que se utilizan para ajustar el comportamiento o la visualización de un elemento HTML . Un atributo m...

Los atributos del lenguaje de marcado de hipertexto son palabras especiales que se utilizan para ajustar el comportamiento o la visualización de un 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, entre ellos: (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 que los tipos de elementos especifiquen scripts que se ejecutarán en circunstancias específicas.

Doctype HTML es una declaración que le indica al navegador en qué versión de HTML está escrito el documento.

Algunos tipos de atributos funcionan de manera diferente cuando se utilizan para modificar distintos tipos de elementos. Por ejemplo, el atributo nombre se utiliza en 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 attribute= "value" > contenido del elemento </element>

Donde elementindica el tipo de elemento HTML y attributees el nombre del atributo, establecido al valor proporcionado value. El valor puede ir 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 pares de nombres y valores, algunos afectan al elemento simplemente por su presencia en la etiqueta de inicio del elemento [ 5 ] (como el ismapatributo para el 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 colocar el cursor sobre la abreviatura debería mostrarse 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, tu 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 aceptar cualquiera de los atributos estándar más comunes ( consulte la lista completa ):

  • El idatributo proporciona un identificador único para un elemento en todo el documento. [ 7 ] [ 8 ] [ 9 ] Esto puede usarse como selector CSS para proporcionar propiedades de presentación, por 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. Agregado 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 referirse 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 elementos por clase para 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. Dichos elementos podrían agruparse como notas al pie en 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 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 para cada 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 separados 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. Sin embargo, a veces 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.
  • Este 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 comúnmente se denomina información sobre herramientas .

Variedades

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

  • Por lo general, 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, añadidos en la versión 4 de HTML, permiten que un elemento especifique scripts que se ejecutarán bajo 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 un <enlace> dentro de ella. Valores: predeterminado, rectángulo, círculo, polígono.
  • <a> y <link> :
    • hreflang — Código de idioma del documento enlazado. ( <a> , <link> )
    • rel — Naturaleza del documento vinculado (relativa a la página que se muestra actualmente). Texto libre para <a> , pero <link> utiliza un conjunto de términos (alternativo, apéndice, marcador, capítulo, contenido, derechos de autor, glosario, ayuda, inicio, índice, siguiente, anterior, sección, comienzo, 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> como para rel.
  • <applet> y <objeto> :
    • archivo — URL(s) del archivo ( <applet> , <object> )
    • código base — URL base ( <applet> , <objeto> )
  • <basefont> y <font> :
    • 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> :
    • fecha y hora: fecha y hora de 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 del <frame> o <iframe> .
    • marginheight — márgenes superior e inferior en píxeles alrededor del <frame> o <iframe> .
    • desplazamiento — valor (sí, no, automático) especifica si se deben mostrar barras de desplazamiento alrededor del <frame> o <iframe> .
    • marginwidth — márgenes izquierdo y derecho en píxeles alrededor del <frame> o <iframe> .
  • <frameset> y <textarea> :
    • 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- la URL de un mapa de imagen para usar con <object> .
  • <input> y <textarea> :
    • 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 <option> :
    • 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 de tabla o encabezado .
    • colspan: número de columnas que abarca una celda o encabezado de tabla .
    • nowrap — (obsoleto) impide el ajuste de una celda de tabla o encabezado .
    • rowspan: número de filas que abarca una celda de tabla o un encabezado .
    • ámbito: no afecta a 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>
  • align también está obsoleto en <caption> , <div> , <h1> a <h6> , <hr> , <iframe> , <img> , <input> , <legend> , <p> , <table>
  • alt <applet> , <area> , <img> , <input>
  • bgcolor<body> , <table> , <td> , <th> , <bgcolor>
  • borde<img> , <object> , <table>
  • char<char> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
  • charoff<col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
  • charset<a> , <link> , <script>
  • citar<blockquote> , <del> , <ins> , <q>
  • compacto<dir> , <menu> , <ol> , <ul>
  • deshabilitado<button> , <input> , <optgroup> , <option> , <select> , <textarea>
  • altura<applet> , <iframe> , <img> , <object> . También obsoleto en <td> , <th>
  • href<a> , <area> , <base> , <link>
  • hspace<applet> , <object> . También obsoleto en <img>
  • longdesc<frame> , <iframe> , <img>
  • nombre<a> , <applet> , <button> , <form> , <frame> , <iframe> , <input> , <map> , <meta> , <object> , <param> , <select> , <textarea>
  • tamaño<basefont> , <font> , <hr> , <input> , <select>
  • src<frame> , <iframe> , <img> , <input> , <script>
  • objetivo<a> , <area> , <base> , <form> , <link>
  • tipo<button> , <input> , <li> , <link> , <object> , <ol> , <param> , <script> , <style> , <ul>
  • valign<col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
  • valor<button> , <input> , <li> , <option> , <param>
  • vspace<applet> , <img> , <object>
  • 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: accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title . También hay algunos experimentales. Tanto xml:lang como xml:base han sido descontinuados. Los múltiples atributos 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 de ellos. [ 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 ellos tienen el prefijo on-: [ 17 ]

  • en aborto
  • onautocomplete
  • onautocompleteerror
  • en desenfoque
  • cancelar
  • oncanplay
  • oncanplaythrough
  • en cambio
  • al hacer clic
  • al cerrar
  • en el menú contextual
  • cambio de señal
  • ondblclick
  • ondrag
  • ondragend
  • ondragente
  • ondragexit
  • ondragleave
  • ondragover
  • al arrastrar
  • ondrop
  • cambio de duración
  • uno vacío
  • terminado
  • onerror
  • enfocado
  • al ingresar
  • en inválido
  • onkeydown
  • al presionar la tecla
  • onkeyup
  • al cargar
  • datos cargados
  • onloadedmetadata
  • al cargar
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • al pasar el ratón por encima
  • onmouseup
  • en la rueda del ratón
  • en pausa
  • en reproducción
  • en reproducción
  • en curso
  • sobre el cambio de tasa
  • al reiniciar
  • redimensionar
  • onsproll
  • buscado
  • en busca
  • al seleccionar
  • en el programa
  • onsort
  • instalado
  • al enviar
  • en suspensión
  • actualización a tiempo
  • activar/desactivar
  • al cambiar el volumen
  • en espera

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

Véase también

Referencias

  1. "Índice de los atributos de HTML 4" . W3C . Consultado el 13 de febrero de 2015 .
  2. "Sobre SGML y HTML" . Consorcio World Wide Web . Consultado el 16 de noviembre de 2008 .
  3. "XHTML 1.0 – Diferencias con HTML 4" . Consorcio World Wide Web . Consultado el 16 de noviembre de 2008 . 
  4. Korpela, Jukka (6 de julio de 1998). "Por qué los valores de los atributos siempre deben ir entre comillas en HTML" . Cs.tut.fi. Consultado el 16 de noviembre de 2008 .
  5. "Etiquetas utilizadas en HTML" . Consorcio World Wide Web. 3 de noviembre de 1992. Consultado el 16 de noviembre de 2008 .
  6. "Objetos, imágenes y applets en documentos HTML" . Consorcio World Wide Web. 24 de diciembre de 1999. Consultado el 16 de noviembre de 2008 .
  7. Sin embargo, pueden aplicarse varios identificadores al mismo elemento; en particular, un elemento puede estar dentro de otro elemento, cada uno con un identificador.
  8. "HTML id" . W3Schools . Archivado del original el 27 de abril de 2020. Consultado el 27 de abril de 2020 .
  9. "Atributo de ID 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 de HTML" . W3Schools.
  16. "Atributos de eventos HTML" . W3Schools.
  17. 1 2 3 "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 .