Making semantic sidenotes without JavaScript
Making semantic sidenotes without JavaScript
Sidenotes can enrich plain text by providing background information or jokes without cluttering the main article. While semantically similar to footnotes, their visual implementation on the web poses challenges. This article by Koos Looijesteijn presents a new and improved approach to creating semantic sidenotes using only HTML and CSS, without JavaScript.
Note
their 2025 update was meaningful. unfortunately css anchor positioning still has some work needed, but it can be used to decrease a few of the hacks.
Published
2020
Summary
Sidenotes can enrich plain text by providing background information or jokes without cluttering the main article. While semantically similar to footnotes, their visual implementation on the web poses challenges. This article by Koos Looijesteijn presents a new and improved approach to creating semantic sidenotes using only HTML and CSS, without JavaScript.
Image
