HTML では定義リスト (<dl>, <dt>, <dd>) で参考文献リストを書くと扱いやすいのではないかという記事です。

背景・方法

本文中で参考文献を参照したいとき、TeX なら参考文献をラベルで参照でき＆ビルド時に自動採番できますが、HTML + CSS では自動採番を参照できないので、しばしば番号を自分で数えて参照することになり、参考文献を追加・削除するときなど面倒だと思います。

そこで、定義リスト (<dl>, <dt>, <dd>) で参考文献リストを書き、ユニークな引用ラベルで参照すれば、途中への追加・削除があっても平気です。グリッドレイアウトにして ::before ::after 擬似要素で角括弧を付ければ、見た目もそれっぽくなります (下図; 本文の内容及び参考文献は出鱈目です)。

さらに、JavaScript を書いてもよい環境なら、引用箇所から参考文献リストに自動でリンクを張れます (下図)。

ただ、どうせ JavaScript で DOM 操作するなら、引用ラベルを番号に置き換えてしまうことも可能です (下図)。

HTML + CSS

以下で、グリッドレイアウト・角括弧付きの定義リストになります。ただし引用側では明示的に角括弧を付ける想定です。

<html>
<head>
<style>
dl.ref {
  display: grid;
  grid-template-columns: auto 1fr;
}
dl.ref > dt {
  grid-column: 1;
}
dl.ref > dt::before {
  content: '[';
}
dl.ref > dt::after {
  content: ']';
}
dl.ref > dd {
  grid-column: 2;
  margin: 0;
  padding-left: 0.5em;
}
</style>
</head>
<body>
<p>
先行研究では、バナナの形状と内部品質の関係について、
果皮の局所曲率と糖度分布の関連が指摘されている [Sato(2031)]。
また、輸送過程における力学的ストレスが果実形状に影響を与え、
湾曲の微細な変動が変化しうることも報告されている [Suzuki(2032)]。
これらを踏まえると、バナナの湾曲は成熟だけでなく
外的環境も反映する指標である可能性がある。
</p>

<h3>参考文献</h3>
<dl class="ref">
<dt>Sato(2031)</dt>
<dd>
Taro Sato.
Relationship between banana shape and internal quality.
Journal of Banana, vol. 1, no.1, pp. 1-11, 2031.
</dd>
<dt>Suzuki(2032)</dt>
<dd>
Hanako Suzuki.
The effects of mechanical stress on bananas during transport.
Journal of Banana, vol. 2, no.1, pp. 1-11, 2032.
</dd>
</dl>
</body>
</html>

JavaScript (引用箇所にリンクを張る版)

JavaScript を書いてもよいなら、以下を記述すれば引用箇所に自動でリンクを張れます。ただし、引用箇所は p タグ内にあることを想定しています。また、参考文献リストに同一の引用ラベルが 2 つ以上登場した場合は、2 つ目以降を赤字にして警告します。

<script>
function linkRefs() {
  const seen = new Set();
  const dts = document.querySelectorAll('dl.ref dt');
  dts.forEach((dt, i) => {
    const key = dt.textContent.trim();
    if (seen.has(key)) {
      dt.style.color = 'red';
      return;
    }
    seen.add(key);
    const id = 'ref' + String(i + 1).padStart(2, '0');
    dt.id = id;
    document.querySelectorAll('p').forEach(p => {
      p.innerHTML = p.innerHTML.replaceAll(
        `[${key}]`, `<a href="#${id}">[${key}]</a>`,
      );
    });
  });
}
document.addEventListener('DOMContentLoaded', linkRefs);
</script>

JavaScript (さらに引用ラベルも番号に戻す版)

どうせ JavaScript を書くなら、引用ラベルを番号に置き換えることもできます。

<script>
function linkRefs() {
  const seen = new Set();
  const dts = document.querySelectorAll('dl.ref dt');
  dts.forEach((dt, i) => {
    const key = dt.textContent.trim();
    if (seen.has(key)) {
      dt.style.color = 'red';
      return;
    }
    seen.add(key);
    dt.innerHTML = `${i + 1}`;
    const id = 'ref' + String(i + 1).padStart(2, '0');
    dt.id = id;
    document.querySelectorAll('p').forEach(p => {
      p.innerHTML = p.innerHTML.replaceAll(
        `[${key}]`, `<a href="#${id}">[${i + 1}]</a>`,
      );
    });
  });
}
document.addEventListener('DOMContentLoaded', linkRefs);
</script>