Handling Citations and/or Footnotes

I was wondering how y’all implement in-text citations or footnotes! In particular how you indicate which section of text is attributed to a source. Of course you can give an basic in-text citation at the end of a sentence, but how about if you want to credit one source for three consecutive sentances without repeating the same citation at the end of each sentence?

I was thinking about making a div with a class for a chunk of text from one source and the last link would be the citation which would be styled differently from the other links, maybe even in the margin of possible. The div would have a very faint box or corners on it to indicate which part of the text is being credited.

However this sounds annoying for when I want to reorder or update info. I also am not sure the appropriate way to indicate a section of text is associated with the source link for screen reader users :thinking:

1 Like

Since I use Eleventy, which has the markdown-it plugin built in to render Markdown as HTML, to build my website, I use the markdown-it-footnote plugin to generate footnotes, with additional configurations to make the output more accessible and screen reader friendly.

My website pages that use footnotes include the trivia page of my A Summer’s End — Hong Kong 1986 shrine and the facts page of my Cassette Beasts shrine. Feel free to look at the HTML and CSS for reference.

Kitty Giraudel wrote an article about accessible footnotes, which teaches the method of using the combination of HTML aria-describedby attribute and CSS counters to add numbered references, to reduce the hassle of manually re-numbering all existing footnotes in case you want to update or reorder the references. She also created an accessible footnote plugin for Eleventy, which I had tried out once, with this method.

Unfortunately, a known limitation of the CSS counter method is not being able to reference the same footnote multiple times, so I use markdown-it-footnote with additional configurations.


Regular hyperlinks. Least effort required to implement, but to be fair, not the most flexible solution.


Wow thanks for the indepth reply! I don’t use any kind of ssg but I will definitely have to check out your code on those pages when I’m on a computer :eyes:

1 Like

You are welcome! :slight_smile: Footnotes are indeed tricky to implement on web pages, so I am happy to share what I learned.