On the art of citing in HTML

For any scientific work, good citation is essential, but even for layman's research, a good citation practise enables the reader to validate the basis used for reasoning. Thus, I try to use a valid way of citing sources, but there are some challenges on my way. One thing is, most of my sources are on the internet. Not wanting to revisit the referenced sources every other year, results in outdating links. In addition, many of my historic sources are hundreds of years old and therefore stay the same source while being referenced by a multitude of secondary or tertiary sources. Even the secondary sources are very old in some cases, so it is questionable, how they can be cited correctly. I follow the Basic Principles (APA, 2022) to a large extend, but adapt them to my needs and to HTML5 based on WHATWG - Standards (WHATWG, cont.).

Clarification of terms used

Citing (or quoting)
The act of giving credit to someone else's work. Microsoft Copilot: Your AI companion (Copilot, 2024)
Quote
Using the exact words from someone else's work. (Copilot, 2024)
to cite
Giving credit to the original sources ... include[s] quotes, paraphrases, or summaries. (Copilot, 2024)
Citation
An act of quoting. Merriam-Webster: America's Most Trusted Dictionary (Webster, 2024)
Reference
The detailed information about the source you cited or quoted. It usually includes the author, title, publication date, and more. It's what you list in your bibliography or work cited page. (Copilot, 2024)

Where I deviate

Full quote

In scholarly writing, it is essential to acknowledge how others contributed to your work. By following the principles of proper citation, writers ensure that readers understand their contribution in the context of the existing literature - how they are building on, critically examining, or otherwise engaging the work that has come before.
In-Text Citations (APA, 2022)

<figure>
    <img width=553 height=93
        src="https://apastyle.apa.org/Content/Images/megamenu/images@2x/apa-style-med-sml.png"
        title="APA Style Icon" />
    <blockquote>
        In scholarly writing, it is essential to acknowledge how others contributed to your work. 
        By following the principles of proper citation, writers ensure that readers understand 
        their contribution in the context of the existing literature - how they are building on, 
        critically examining, or otherwise engaging the work that has come before.
    </blockquote>
    <figcaption>
        <a href="#apa-2022"><cite>In-Text Citations</cite> (APA, 2022)</a>
    </figcaption>
</figure>

Inline quote

In the Author-Date Citation System each work used in a paper has two parts: an in-text citation and a corresponding reference list entry In-Text Citations (APA, 2022). Both are linked by a reference in brackets containing the author and the publishing year.


In the Author-Date Citation System <span class="figure">
<img width=55.3 height=9.3
    src="https://apastyle.apa.org/Content/Images/megamenu/images@2x/apa-style-med-sml.png"
    title="APA Style Icon" />
<q>each work used in a paper has two parts: an in-text citation 
    and a corresponding reference list entry</q>
<span class="figcaption"><a href="#apa-2022"><cite>In-Text Citations</cite>
    (APA, 2022)</a></span></span>.
Both are linked by a reference in brackets containing the author and the publishing year.

Paraphrases or indirect citing

In APA (2022) defined a quotation style originally for social reasearch documents, that very well fits other topics and hypertext markup language (HTML).


In <a href="#apa2022">APA (2022)</a> defined...

Simple Reference


<ul><li>
<a name="apa-2022">American Psychological Association (APA). (<time>2022</time>).</a>
<cite>In-Text Citations</cite>.
APA Style Homepage.
<a href="https://apastyle.apa.org/style-grammar-guidelines/citations"
>https://apastyle.apa.org/style-grammar-guidelines/citations</a>.
Published <time>2022</time>.
<a href="https://web.archive.org/web/20241203024949/https://apastyle.apa.org/style-grammar-guidelines/citations">Archived</a> on <time datetime="2024-12-03T02:49:49Z">3 Dec 2024</time>.
Retrieved in <time datetime="2025-01">Jan 2025</time>.
</li></ul>

CSS formatting


figure {border: 1pt solid lightgrey; width: max-content; text-align: center;}            
figure img, figure figcaption {text-align: center;}
figure blockquote {text-align: center; white-space: pre;}
figure figcaption a, span.figcaption a {text-decoration: gray dotted underline; color: black;}

Complex situations in historical research

Artifical example: About 1200 a type of person wore a specific dress. This dress was described in Latin 1250 by a monk of a monastery in St. Gallen. The original was lost, but a 16th century translation into French exists, whose origins are lost, but which is known as the Thornwright manuscript because family Thornwright kept it until they gave it to the British Library in 1957. In addition, a picture of an unknown artist exists in Louvre, which shows the situation, that had been described in the manuscript. The Thornwright is relevant for other information quoted elsewhere in the document, too. How to cite?

Idea: The main text of the research document contains a quote of manuscript, translated to English, and the latter picture. Both are needed to explain context. Both are cited with the original event in English (e.g., coronation of xyz) and the original year without an author. The reference to this citation contains nested evidence.

Translated quote of the French manuscript, which has nothing in common with above picture except the coincidence, that both refer to the same occasion.
Coronation of xyz (1200)

Context, context, and reasoning...

...

Coronation of xyz. (1200).

Event documented by Louvre 1957 and Thornwright ~1550.

Desciption of the event

Musée du Louvre, Paris. (n.d.). Coronation de le roi xyz.

Louvre website, restricted access. #louvre/picid/47110815. Artist, original place and date are lost. Picture shows Coronation of xyz. (1200).

Thornwright. (1550). Memoire des les Alpes.

British Library. e12/14 https://bl.uk/pid/e12/14. Original text was Latin written by a St. Gallen monk in 1250, but is lost. Text describes Coronation of xyz. (1200) and ...

French original text

<!-- Main text -->
<figure>
    <img width=553 height=93
        src="#louvre/picid/47110815"
        title="Coronation of xyz, 1200, drawn by an unknown artist, Louvre" />
    <blockquote>
        Translated quote of the French manuscript, which has nothing in common with above
        picture except the conincidence, that both refer to the same occasion.
    </blockquote>
    <figcaption>
        <a href="#coronation-xyz-1200"><cite>Coronation of xyz</cite> (1200)</a>
    </figcaption>
</figure>
<p>
    Context, context, and reasoning...
</p>
...
<!-- References -->
<h3>
    <a name="coronation-xyz-1200">Coronation of xyz. (1200).</a>
</h3>
<p>
    Event documented by 
    <a href="#louvre-1957">Louvre 1957</a> and
    <a href="#thornwright-1550">Thornwright ~1550</a>.
</p>
<p>Desciption of the event</p>
<h3>
    <a name="louvre-1957">Musée du Louvre, Paris. (n.d.).</a>
    <cite lang="frm">Coronation de le roi xyz</cite>.
</h3>
<p>
    Louvre website, restricted access.
    <a href="#louvre/picid/47110815"
    >#louvre/picid/47110815</a>.
    Artist, original place and date are lost.
    Picture shows <a href="#coronation_xyz_1200">Coronation of xyz. (1200)</a>.
</p>
<img src="#louvre/picid/47110815"
title="Coronation of xyz, 1200, drawn by an unknown artist, Louvre" />
<h3>
    <a name="thornwright-1550">Thornwright. (1550).</a>
    <cite>Memoire des les Alpes</cite>.
</h3>
<p>
    British Library. e12/14
    <a href="https://bl.uk/pid/e12/14"
    >https://bl.uk/pid/e12/14</a>.
    Original text was Latin written by a St. Gallen monk in 1250,
    but is lost.
    Text describes <a href="#coronation_xyz_1200">Coronation of xyz. (1200)</a> and ...
</p>
<blockquote lang="fr">French original text</blockquote>

References

  1. American Psychological Association (APA). (2022). In-Text Citations. APA Style Homepage. https://apastyle.apa.org/style-grammar-guidelines/citations.
  2. WHATWG (Apple, Google, Mozilla, Microsoft). (cont.). WHATWG - Standards. WHATWG Homepage. https://spec.whatwg.org/.
  3. Mozilla. (cont.). WHATWG - Standards. MDN (Mozilla Developers' Network) Web Docs. https://developer.mozilla.org/en-US/.
  4. Merriam-Webster, Incorporated. (cont.). Merriam-Webster: America's Most Trusted Dictionary. https://www.merriam-webster.com/
  5. Microsoft Copilot (2024). Microsoft Copilot: Your AI companion. Microsoft Corp. https://copilot.microsoft.com/

Languages

While the document body is written in a modern language, the citations come from a rich variety of languages:

non
Old Norse
ghc
Hiberno-Scottish Gaelic
gla
Scottish Gaelic
gle
Irish
mga
Middle Irish (900-1200)
sga
Old Irish (to 900)
lat
Latin
en
Englisch
ang
Old English (ca. 450-1100)
enm
Middle English (1100-1500)
de
German
goh
Old High German (ca. 750-1050)
gmh
Middle High German (ca. 1050-1500)
nds
Low German
gml
Middle Low German
nl
Dutch
odt
Old Dutch
dum
Middle Dutch (ca. 1050-1350)
ofs
Old Frisian
fry
Western Frisian
frr
Northern Frisian
frs
Eastern Frisian
fr
French
fro
Old French (842-ca. 1400)
frm
Middle French (ca. 1400-1600)
pro
Old Provençal (to 1500)
oc
Occitan (post 1500)
ca
Catalan
xno
Anglo-Norman