As discovered in #5567, some `id` attributes are using translation/content which makes it hard to track using CSS, especially in a multi-language context.

It seems, Anchor.js is doing this because there is no `id` set.
~~Adding the `id` in <https://github.com/quarto-dev/quarto-cli/blob/main/src/format/html/format-html-appendix.ts#L337-L354> could solve this (not sure, if it's the right place).~~
It seems, the TypeScript `prependHeading()` probably needs an id argument for when it is used in `insertReferencesTitle()` (https://github.com/quarto-dev/quarto-cli/blob/main/src/format/html/format-html-appendix.ts#L143-L150).

Generally, when "anchored" class is added, an `id` should also be set.
I did not see this issue elsewhere (_i.e._, anywhere else but appendix citation) when quickly looking at the codebase.

For example, the h2 title for appendix section is given the content as the `id` attribute.

````qmd
---
title: "Quarto Playground"
author: "Quarto"
format: html
citation: true
lang: es
---

This is a playground for Quarto.
````

<table>
<tr>
<th>Raw</th>
<th>Processed</th>
</tr>
<tr>
<td>

````html
<div id="quarto-appendix" class="default">
  <section class="quarto-appendix-contents">
    <h2 class="anchored quarto-appendix-heading">Cómo citar</h2>
    <div>
      <div class="quarto-appendix-secondary-label">BibTeX</div>
      <pre class="sourceCode code-with-copy quarto-appendix-bibtex">
        <code class="sourceCode bibtex">
        @online{untitled,
          author = {, Quarto},
          title = {Quarto Playground},
          langid = {es}
        }
        </code>
        <button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
      </pre>
      <div class="quarto-appendix-secondary-label">Por favor, cita este trabajo como:</div>
      <div id="ref-untitled" class="csl-entry quarto-appendix-citeas" role="listitem">
        Quarto. n.d. <span>“Quarto Playground.”</span>
      </div>
    </div>
  </section>
</div>
````

</td>
<td>

````html
<div id="quarto-appendix" class="default">
  <section class="quarto-appendix-contents">
    <h2 class="anchored quarto-appendix-heading" id="cómo-citar">Cómo citar<a class="anchorjs-link " aria-label="Anchor"
        data-anchorjs-icon="" href="#cómo-citar"
        style="font: 1em / 1 anchorjs-icons; margin-left: 0.1875em; padding-right: 0.1875em; padding-left: 0.1875em;"></a>
    </h2>
    <div>
      <div class="quarto-appendix-secondary-label">BibTeX</div>
      <pre class="sourceCode code-with-copy quarto-appendix-bibtex">
        <code class="sourceCode bibtex">
          @online{untitled,
            author = {, Quarto},
            title = {Quarto Playground},
            langid = {es}
          }
        </code>
        <button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
      </pre>
      <div class="quarto-appendix-secondary-label">Por favor, cita este trabajo como:</div>
      <div id="ref-untitled" class="csl-entry quarto-appendix-citeas" role="listitem">
        Quarto. n.d. <span>“Quarto Playground.”</span>
      </div>
    </div>
  </section>
</div>
````

</td>
</tr>
</table>
dragonstyle
2023-05-25T16:54:40Z
mcanouil
enhancement triaged-to
open
Set `id` attribute for "anchored" links (to keep id independent of lang content)
https://github.com/quarto-dev/quarto-cli/issues/5685