Atributos

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>&amp;</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.