Los atributos se analizaron brevemente en la Descripción general de HTML. es hora de un análisis detallado.
Los atributos son lo que hace al HTML tan poderoso. Los atributos son nombres separados por espacios y pares nombre-valor que aparecen en la etiqueta de apertura. proporcionar información sobre el elemento y su funcionalidad.
Los atributos definen el comportamiento, las vinculaciones y la funcionalidad de los elementos. Algunos atributos son globales, es decir, pueden aparecer en la etiqueta de apertura de cualquier elemento. Otros atributos se aplican a varios elementos, pero no a todos, mientras que otros son específicos de cada elemento. relevante solo para un elemento. En HTML, todos los atributos, excepto los booleanos y, hasta cierto punto, los enumerados, requieren un valor.
Si el valor de un atributo incluye un espacio o caracteres especiales, el valor debe estar entre comillas. Por este motivo, y para mejorar la legibilidad, se recomienda usar citas.
Si bien HTML no distingue mayúsculas de minúsculas, algunos valores de atributos sí lo hacen. Los valores que forman parte de la especificación HTML no distinguen mayúsculas de minúsculas. Los valores de cadenas definidos, como los nombres de ID y de clase, distinguen mayúsculas de minúsculas. Si el valor de un atributo en HTML distingue mayúsculas de minúsculas, distingue mayúsculas de minúsculas cuando se usa como parte de un selector de atributos en CSS y JavaScript. de lo contrario, no lo será.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Atributos booleanos
Si hay un atributo booleano presente, siempre es verdadero. Los atributos booleanos incluyen autofocus
, inert
, checked
, disabled
,
required
, reversed
, allowfullscreen
, default,
loop
, autoplay
, controls
, muted
, readonly
, multiple,
y selected
.
Si uno (o más) de estos atributos está presente, el elemento se inhabilita, es obligatorio, es de solo lectura, etc. Si no está presente, no lo está.
Los valores booleanos pueden omitirse, establecerse en una cadena vacía o ser el nombre del atributo. pero el valor no tiene que
establecerse en la cadena true
. Todos los valores, incluidos true
, false
y 😀
, aunque no sean válidos, se resolverán como verdaderos.
Estas tres etiquetas son equivalentes:
<input required>
<input required="">
<input required="required">
Si el valor del atributo es falso, omite el atributo. Si el atributo es verdadero, inclúyelo, pero no proporciones un valor.
Por ejemplo, required="required"
no es un valor válido en HTML. pero, como required
es booleano, los valores no válidos se resuelven como verdaderos.
Sin embargo, dado que los atributos enumerados no válidos no necesariamente resuelven el mismo valor que los valores faltantes, es más fácil obtener
o el hábito de omitir valores de lo que es recordar qué atributos son booleanos, en comparación con los enumerados, y posiblemente proporcionen un valor no válido.
Cuando alternes entre verdadero y falso, agrega y quita el atributo por completo con JavaScript en lugar de activar o desactivar el valor.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
Ten en cuenta que en los lenguajes XML, como SVG, todos los atributos deben incluir un valor, incluidos los atributos booleanos.
Atributos enumerados
Los atributos enumerados a veces se confunden con los atributos booleanos. Son atributos HTML que tienen un conjunto limitado de valores válidos predefinidos.
Al igual que los atributos booleanos, tienen un valor predeterminado si el atributo está presente, pero falta el valor. Por ejemplo, si incluyes <style contenteditable>
,
El valor predeterminado es <style contenteditable="true">
.
Sin embargo, a diferencia de los atributos booleanos, omitir el atributo no significa que sea falso. un atributo actual con un valor faltante
no es necesariamente verdadera; y el valor predeterminado de los valores no válidos
no es necesariamente el mismo que una cadena nula. Siguiendo con el ejemplo,
El valor predeterminado de contenteditable
es inherit
si falta o no es válido, y se puede establecer de manera explícita como false
.
El valor predeterminado depende del atributo. A diferencia de los valores booleanos, los atributos no son "verdaderos" automáticamente. si están presentes. Si
incluir <style contenteditable="false">
, el elemento no se puede editar. Si el valor no es válido, como <style contenteditable="😀">
,
o, sorprendentemente, <style contenteditable="contenteditable">
, el valor no es válido y se establece de forma predeterminada como inherit
.
En la mayoría de los casos, con atributos enumerados, los valores faltantes y no válidos son los mismos. Por ejemplo, si el atributo type
en una <input>
falta, está presente pero no tiene un valor o tiene un valor no válido, el valor predeterminado es text
. Si bien este comportamiento es común, no es una regla.
Por ello, es importante saber qué atributos son booleanos y cuáles son enumerados. omitir valores si es posible para evitar cometer errores y buscar el valor según sea necesario.
Atributos globales
Los atributos globales son atributos que se pueden configurar en cualquier elemento HTML, incluidos los elementos de <head>
. Hay más de
30 atributos globales. Si bien, en teoría, todos estos elementos pueden agregarse a cualquier elemento HTML, algunos atributos globales no tienen efecto.
cuando se establece en algunos elementos; Por ejemplo, si estableces hidden
en una <meta>
como contenido meta, no se mostrará.
id
El atributo global id
se usa para definir un identificador único para un elemento. Tiene muchos propósitos, incluidos los siguientes:
- Destino del identificador de fragmento de un vínculo.
- Identificar un elemento para crear secuencias de comandos.
- Asociar un elemento de formulario con su etiqueta.
- Proporcionar una etiqueta o descripción para las tecnologías de asistencia.
- Estilos de segmentación con (alta especificidad o como selectores de atributos) en CSS
El valor id
es una cadena sin espacios. Si contiene un espacio, el documento no se romperá, pero deberás orientarlo al
id
con caracteres de escape en HTML, CSS y JS. Todos los demás caracteres son válidos. Un valor id
puede ser 😀
o .class
,
pero no es una buena idea. Para facilitar la programación para tu yo actual y futuro, haz que el primer carácter de id
sea una letra.
y usar solo letras y dígitos ASCII, _
y -
. Es una buena práctica crear una convención de nomenclatura id
y, luego, respetarla.
ya que los valores id
distinguen mayúsculas de minúsculas.
El elemento id
debe ser único para el documento. Es probable que el diseño de tu página no se dañe si se usa id
más de una vez.
pero es posible que las interacciones entre JavaScript, vínculos y elementos no funcionen como se espera.
Identificador de fragmento de vínculo
La barra de navegación incluye cuatro vínculos. Abordaremos el elemento de vínculo más adelante, pero, por ahora, ten en cuenta que los vínculos no están restringidos a URLs basadas en HTTP; Pueden ser identificadores de fragmentos de secciones de la página del documento actual (o de otros documentos).
En el sitio del taller de aprendizaje automático, la barra de navegación en el encabezado de la página incluye cuatro vínculos:
El atributo href proporciona el hipervínculo al que se dirige al usuario cuando se activa el vínculo. Cuando una URL incluye un numeral (#
)
seguida de una cadena de caracteres, esa cadena es un identificador de fragmento. Si esa cadena coincide con un id
de un elemento en el
página web, el fragmento es un ancla, o un favorito, a ese elemento. El navegador se desplazará hasta el punto en el que se definió el ancla.
Estos cuatro vínculos dirigen a cuatro secciones de nuestra página identificadas por su atributo id
. Cuando el usuario hace clic en cualquiera de los
cuatro vínculos en la barra de navegación, el elemento vinculado por el identificador de fragmento, el elemento que contiene el ID coincidente
menos el #
, se desplaza hasta la vista.
El contenido sobre <main>
del taller de aprendizaje automático tiene cuatro secciones con IDs. Cuando el visitante del sitio hace clic en uno de los
de <nav>
, se mostrará la sección con ese identificador de fragmento. El lenguaje de marcado es similar al siguiente:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
Si comparas los identificadores de fragmentos en los vínculos de <nav>
, notarás que cada uno coincide con el id
de un <section>
en <main>
.
El navegador nos ofrece una "parte superior de la página" gratuita. enlace. Si estableces href="#top"
, no distingue mayúsculas de minúsculas o simplemente href="#"
, se desplazará
al usuario en la parte superior de la página.
El separador de marca de hash en href
no forma parte del identificador de fragmento. El identificador de fragmento siempre es el último
de la URL y no se envía al servidor.
Selectores CSS
En CSS, puedes segmentar cada sección con un selector de ID, como #feedback
o, para menos especificidad, una función que distingue mayúsculas de minúsculas.
selector de atributos, [id="feedback"]
.
Guion
En MLW.com, hay un huevo de pascua solo para usuarios de mouse. Al hacer clic en el interruptor de luz, la página se enciende y se apaga.
El lenguaje de marcado de la imagen del interruptor de luz es el siguiente:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
El atributo id
se puede usar como parámetro para el método getElementById()
y, con un prefijo #
, como parte de un
para los métodos querySelector()
y querySelectorAll()
.
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Nuestra función única de JavaScript usa esta capacidad para segmentar elementos por su atributo id
:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
El elemento <label>
de HTML tiene un atributo for
que toma como su valor el id
del control de formulario con el que está asociado.
Crear una etiqueta explícita incluyendo un id
en cada control de formulario y vincular cada uno con el atributo for
de la etiqueta garantiza
que todos los controles de formularios tengan una etiqueta asociada.
Si bien cada etiqueta se puede asociar con exactamente un control de formulario, un control de formulario puede tener más de una etiqueta asociada.
Si el control de formulario está anidado entre las etiquetas de apertura y cierre <label>
, los atributos for
y id
no son obligatorios: esto se conoce como un argumento "implícito" etiqueta. Las etiquetas permiten que todos los usuarios sepan para qué sirve cada control de formulario.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
La asociación entre for
y id
pone la información a disposición de los usuarios de tecnologías de accesibilidad. Además,
hacer clic en cualquier parte de una etiqueta se enfoca en el elemento asociado y extiende el área de clic del control. Esto no solo es útil,
a personas con problemas de destreza que hacen que el mouse sea menos preciso. También ayuda a los usuarios
de dispositivos móviles con los dedos más anchos que una radio.
.
En este ejemplo de código, la quinta pregunta falsa de un cuestionario falso es una pregunta de opción múltiple de selección única. Cada control de formulario tiene un
etiqueta, con un id
único para cada uno. Para asegurarnos de no duplicar un ID por accidente, el valor del ID es una combinación del número de pregunta y el valor.
Cuando incluyes botones de selección, como las etiquetas describen el valor de los botones de selección, abarcamos todos los botones con el mismo nombre en una <fieldset>
.
<legend>
es la etiqueta o la pregunta de todo el conjunto.
Otros usos de accesibilidad
El uso de id
en la accesibilidad y usabilidad no se limita a las etiquetas. En la introducción al texto, se aplica un <section>
se convirtió en punto de referencia de la región haciendo referencia al id
de un <h2>
como el valor del aria-labelledby
de <section>
para proporcionar
el nombre accesible:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Hay más de 50 estados y propiedades aria-*
que se pueden usar para garantizar la accesibilidad. aria-labelledby
, aria-describedby
aria-details
y aria-owns
toman como valor una lista de referencia id
separada por espacios. aria-activedescendant
, que
identifica el elemento subordinado enfocado actualmente y toma como su valor una única referencia id
: la del elemento único
enfocado (solo un elemento puede enfocarse a la vez).
class
El atributo class
proporciona una forma adicional de segmentar elementos con CSS (y JavaScript), pero no tiene otro propósito.
en HTML (aunque los frameworks y las bibliotecas de componentes pueden usarlos). El atributo de clase toma como valor una lista separada por espacios
de las clases que distinguen mayúsculas de minúsculas para el elemento.
Crear una estructura semántica sólida permite orientar los elementos en función de su posición y función. Estructura de sonido permite el uso de selectores de elementos subordinados, selectores relacionales y selectores de atributos. Mientras aprendes sobre los atributos a lo largo de esta sección, considera cómo se puede aplicar estilo a los elementos con los mismos atributos o valores de atributos. No es que tú no debe usar el atributo de clase, es solo que la mayoría de los desarrolladores no se dan cuenta de que, a menudo, no necesitan hacerlo.
Hasta ahora, MLW no ha usado ninguna clase. ¿Se puede lanzar un sitio sin un solo nombre de clase? Ya veremos.
style
El atributo style
permite aplicar estilos intercalados, que son estilos que se aplican al elemento único en el que se establece el atributo.
El atributo style
toma como valor los pares de valores de las propiedades CSS, y la sintaxis del valor es la misma que el contenido de un
Bloque de estilo CSS: las propiedades van seguidas de dos puntos, al igual que en CSS, y el punto y coma termina cada declaración, después del valor.
Los estilos solo se aplican al elemento en el que se estableció el atributo, y los elementos subordinados heredan los valores de propiedad heredados de lo contrario.
anulada por otras declaraciones de estilo en elementos anidados, o en hojas de estilo o bloques <style>
. Dado que el valor comprende el equivalente del contenido
de un solo bloque de estilo aplicado únicamente a ese elemento, no se puede usar para generar contenido, crear animaciones de fotogramas clave ni aplicar
otras reglas at-Rules.
Si bien style
es un atributo global, no se recomienda su uso. En su lugar, define los estilos en uno o varios archivos separados.
Dicho esto, el atributo style
puede resultar útil durante el desarrollo para permitir un estilo rápido, por ejemplo, con fines de prueba. Luego, toma el
'solución' y márcala en tu archivo CSS vinculado.
tabindex
El atributo tabindex
se puede agregar a cualquier elemento para permitir que reciba el foco. El valor tabindex
define si
al orden de tabulación y, de forma opcional, a un orden de tabulación no predeterminado.
El atributo tabindex
toma como valor un número entero. Un valor negativo (la convención es usar -1
) hace que un elemento sea capaz
de recepción de foco, como a través de JavaScript, pero no agrega el elemento a la secuencia de tabulación. Un valor tabindex
de 0
hace que
el elemento es enfocable y accesible mediante tabulación, lo que se agrega al orden de tabulación predeterminado de la página en el orden del código fuente. Un valor de 1
o más pone el elemento en una secuencia de enfoque priorizada y no se recomienda.
En esta página, se muestra una función para compartir con un elemento personalizado <share-action>
que actúa como <button>
. El tabindex
de cero
se incluye para agregar el elemento personalizado al orden de tabulación predeterminado del teclado:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
El elemento role
de button
informa a los usuarios de lectores de pantalla que este elemento debe comportarse como un botón. JavaScript se usa para garantizar
se mantiene la promesa de funcionalidad del botón; lo que incluye el manejo de eventos de clic y keydown, así como el manejo de las teclas Intro y la barra espaciadora.
Los controles de formulario, los vínculos, los botones y los elementos de contenido editable pueden captar la atención. cuando un usuario que usa el teclado presiona la tecla Tab,
el enfoque se mueve al siguiente elemento enfocable como si tuviera configurado tabindex="0"
. Otros elementos no son enfocables de forma predeterminada. Agrega tabindex
a esos elementos les permite recibir el foco cuando, de otro modo, no lo harían.
Si un documento incluye elementos con una tabindex
de 1
o más, se incluyen en una secuencia de pestañas separada. Como observarás en el códec,
La tabulación comienza en una secuencia separada, en orden del valor más bajo al valor más alto, antes de pasar por las de la secuencia regular en orden de origen.
Al alterar el orden de tabulación puede crear una experiencia del usuario realmente mala. Dificulta la dependencia de las tecnologías de asistencia (teclados y lectores de pantalla por igual) para navegar tu contenido. También es difícil de administrar y mantener como desarrollador. El enfoque es importante; hay todo un módulo analizando el enfoque y su orden.
role
El atributo role
forma parte de la especificación de ARIA.
en lugar de la especificación HMTL de WHATWG. El atributo role
puede
usarse para proporcionar significado semántico al contenido, lo que permite que los lectores de pantalla informen a los usuarios del sitio sobre la interacción esperada de un objeto.
Hay algunos widgets de IU comunes, como los cuadros combinados,
barras de menú, listas de pestañas
y cuadrículas de árboles, que no tienen un equivalente HTML nativo.
Por ejemplo, cuando creas un patrón de diseño con pestañas, los elementos tab
, tablist
y
Se pueden usar los roles tabpanel
. Alguien que puede ver físicamente
la interfaz de usuario aprendió por experiencia a navegar por el widget y hacer clic en las pestañas asociadas para visualizar diferentes paneles.
Incluir el rol tab
con <button role="tab">
cuando se usa un grupo de botones para mostrar diferentes paneles permite al usuario del lector de pantalla saber
que el objeto <button>
que está enfocado puede activar o desactivar la visualización de un panel relacionado en lugar de implementar la funcionalidad típica de un botón.
El atributo role
no cambia el comportamiento del navegador ni altera las interacciones del teclado o el dispositivo del puntero. Para ello, agrega role="button"
a un <span>
.
no lo convierte en un <button>
. Por este motivo, se recomienda usar elementos HTML semánticos para su uso previsto. Sin embargo, cuando uses
no es posible el elemento correcto, el atributo role
permite informar a los usuarios de lectores de pantalla cuando se actualiza un elemento no semántico
en el rol de un elemento semántico.
contenteditable
Un elemento con el atributo contenteditable
establecido en true
se puede editar, se puede enfocar y se agrega al orden de tabulación como si
Se establecieron tabindex="0"
. Contenteditable
es un atributo enumerado que admite los valores true
y false
, con un valor predeterminado de inherit
si el atributo no está presente o tiene un valor no válido.
Estas tres etiquetas de apertura son equivalentes:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Si incluyes <style contenteditable="false">
, el elemento no se podrá editar (a menos que lo sea de forma predeterminada, como <textarea>
).
Si el valor no es válido, como <style contenteditable="😀">
o <style contenteditable="contenteditable">
, el valor predeterminado es inherit
.
Para alternar entre estados, consulta el valor de la propiedad de solo lectura HTMLElement.isContentEditable.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Como alternativa, se puede especificar esta propiedad si configuras editor.contentEditable
como true
, false
o inherit
.
Los atributos globales se pueden aplicar a todos los elementos, incluso a <style>
. Puedes usar atributos y un poco de CSS para crear un editor de CSS activo.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Intenta cambiar el color
de style
por uno distinto de inherit
. Luego, intenta cambiar style
a un selector p
.
No quites la propiedad de visualización, ya que, de lo contrario, el bloque de estilo desaparecerá.
Atributos personalizados
Solo tratamos la superficie de los atributos globales HTML. Hay aún más atributos que se aplican a un solo elemento o a un conjunto limitado de ellos. Incluso si existen cientos de atributos definidos, es posible que necesites un atributo que no esté en la especificación. HTML se encarga de todo.
Puedes crear el atributo personalizado que quieras agregando el prefijo data-
. Puedes asignarle al atributo cualquier nombre que comience con data-
seguida de cualquier serie de caracteres en minúscula que no comience con xml
y no contenga dos puntos (:
).
Aunque HTML es intolerante y no se dañará si creas atributos no admitidos que no comienzan con data
, o incluso si comienzas
Su atributo personalizado con xml
o si incluye un :
, existen beneficios de crear atributos personalizados válidos que comienzan con data-
.
Con los atributos de datos personalizados, tiene la certeza de que no está usando accidentalmente un nombre de atributo existente. Los atributos de datos personalizados están preparados para el futuro.
Si bien los navegadores no implementarán comportamientos predeterminados para ningún atributo con prefijo data-
específico, hay una API de conjuntos de datos integrada
para iterar a través de tus atributos personalizados. Las propiedades personalizadas son una excelente manera de comunicar información específica de la aplicación
a través de JavaScript. Agrega atributos personalizados a los elementos con el formato data-name
y accede a ellos a través del DOM usando dataset[name]
.
sobre el elemento en cuestión.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Puedes usar getAttribute()
con el nombre completo del atributo o aprovechar la propiedad dataset
, que es más sencilla.
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
La propiedad dataset
muestra un objeto DOMStringMap
de los atributos data-
de cada elemento. Hay varios atributos personalizados
en el <blockquote>
. La propiedad del conjunto de datos significa que no necesitas saber cuáles son esos atributos personalizados para acceder a sus
nombres y valores:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Los atributos de este artículo son globales, lo que significa que pueden aplicarse a cualquier elemento HTML (aunque no todos tienen un impacto en
esos elementos). A continuación, veremos los dos atributos de la imagen de presentación que no abordamos (target
y href
) y
y otros atributos específicos de cada elemento
mientras investigamos los vínculos.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los atributos.
El elemento id
debe ser único en el documento.
Selecciona el atributo personalizado con el formato correcto.
data-birthday
data:birthday
birthday