Sobre cómo agregar identificaciones a los encabezados

Aquí hay una revisión de dos segundos. Si un elemento tiene un ID, puede vincularlo con el comportamiento natural del navegador. Es genial si los títulos los tienen, porque a menudo es útil vincular directamente a una sección específica de contenido.

h3Step 2/a

Si así lo quisiera, podría vincular directamente a este encabezado, ya sea desde una URL, como https://my-website.com/#step-2, o un vínculo en la página, como:

a href="#step-2"Jump to Step 2/a

Por lo tanto, es ideal si todos los encabezados tienen ID únicos.

Sin embargo, me parece demasiado trabajo agregar manualmente ID a todos mis encabezados. Durante años y años, lo hice así usando jQuery en este mismo sitio (demándame):

// Adjust this for targetting the headers important to have IDsconst $headers = $(".article-content  h3");$headers.each((i, el) = {  const $el = $(el);  // Probably a flexbox layout style page  if ($el.has("a").length != 0) {    return;  }  let idToLink = "";  if ($el.attr("id") === undefined) {    // give it ID    idToLink = "article-header-id-" + i;    $el.attr("id", idToLink);  } else {    // already has ID    idToLink = $el.attr("id");  }  const $headerLink = $("a /", {    html: "#",    class: "article-headline-link",    href: "#" + idToLink  });  $el.addClass("has-header-link").prepend($headerLink);});

Ese script va un paso más allá de simplemente agregar ID (si aún no tiene uno) al agregar un #enlace dentro del encabezado que enlaza con ese encabezado. El objetivo de esto es demostrar que los encabezados tienen ID y facilitan hacer cosas como hacer clic derecho en copiar un enlace. Aquí está esa demostración , si quieres verla.

¡Problema! De repente esto dejó de funcionar.

No el guión en sí, funciona bien. Pero el comportamiento nativo del navegador que le permite saltar al encabezado cuando se carga la página es lo que está roto. Me imagino que es una condición de carrera:

1. Llega el HTML
2. La página comienza a renderizarse.
3. El navegador busca el ID en la URL para desplazarse hacia abajo
4. No lo encuentra…
5. ¡Oh, espera, ahí está!
6. Desplácese hasta allí.

¡ Oh, espera, ahí está! El paso es desde el script ejecutando y poniendo esa ID en el encabezado. Realmente no culpo a los navegadores por no saltar a enlaces insertados dinámicamente. Me sorprende que esto haya funcionado durante tanto tiempo.

Es mucho mejor tener los ID en los títulos cuando llegue el HTML. Este sitio es WordPress, así que sabía que podía hacerlo con algún tipo de filtro de contenido. Resulta que ni siquiera tuve que molestarme porque, por supuesto, hay un complemento para eso: Add Anchor Links de Karolína Vyskočilová . Funciona muy bien para mí. Su técnica es que agrega la identificación en el enlace de anclaje, lo cual también está totalmente bien. Supongo que esa es otra forma de evitar alterar las identificaciones existentes.

Si no tuviera WordPress, habría encontrado otra forma de procesar el lado del servidor HTML para asegurarme de que haya algún tipo de enlace de encabezado de alguna manera. Siempre hay una manera. De hecho, si fuera demasiado extraño o engorroso o lo que fuera hacer durante el proceso de compilación o en un filtro del lado del servidor, consideraría hacerlo en un trabajador de servicio. Me he divertido jugando con HTMLRewriter de Cloudflare , que es totalmente capaz de hacer esto.