Implement footnotes in HTML with the <ruby> element

Looking for a way to implement footnotes in HTML, Thomas Steiner experimented with using the <ruby> element.

The MDN docs describe the ruby element as follows.

“The HTML <ruby> element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.”

Hmm 🤔, this sounds like it could fit the footnotes use case.

The markup looks like this:

<ruby tabindex="0">some term<rt>content for the footnote</rt></ruby>

Using CSS Counters number indicators are injected, and using :target the footnotes are shown.

Not sure if this is how <ruby> should be used, but it’s quite a nice solution. Let’s hope this will open up the discussion again to adding elements to allow native footnotes in HTML.

<ruby> HTML footnotes →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.