Web-equivalents to Traditional Paper/Book Pages and Footnotes

A book or paper traditionally can have these features:

  • Heading or title page
  • Table of Contents
  • Pages
  • Chapters
  • Parts
  • Footnotes
  • Sidenotes
  • References
  • Indexes
  • Lines
  • Sections
  • Paragraphs
  • ...

It is divided into primary chunks which are pages.

While a web page shares almost everything in common with a traditional paper or book (i.e. has lines, paragraphs, sections, toc, headings, etc.), on the other hand it is like a scroll and doesn't have any "pages".

A website like Wikipedia contains references (which are basically the Index), but it kind of merges the idea of Footnotes into references/indexes, so it doesn't really have footnotes. The medium.com image below shows what could be considered a Sidenote (if it were more of a comment lets say), and perhaps from a UX perspective you could show footnotes like the popup shown below on the screen. But otherwise I don't think I've really seen "footnotes" on the web.

Wikipedia also has Table of Contents, which some other places have, and sections. Many websites have headings.

In addition, you can arbitrarily "paginate" your content into multiple web pages, but these don't really correspond to traditional paper/book pages. Rather, they are more like Chapters or Parts, as you see on a lot of documentation websites (with the table of contents on the left).

So basically, webpages don't have all of the vertical stuff, mainly pages and footnotes, because it's more of a scroll.

I am wondering if there is any solution to this problem from a User Experience perspective. How pages would/could look on the web. For example, this project is focused on putting research papers on the web, but it doesn't include the idea of pages. It is formatted sort of like Wikipedia, with the index/references at the end.

I'm wondering though what a modern interpretation of the page would look like on the web. If it would be a thing with constant size, and how that would look without feeling out of place in the scrolling environment. Viewing PDFs on the web, where it scales up and down like an image, and you have to zoom in, doesn't fit super well with the modern web UX. If instead as you resize the screen or zoom, the text readjusts like in regular web layout/flow, the question would be how a page would then look. If all pages were the same size, then when the screen adjusts and (say) the page adjusts to fit its original content, some of the pages might not be able to fit their content in their new layout, so they would either have to grow/shrink slightly, or pass on the content to a new page, which would mean the meaning of a page is slightly different than a book page. But even still, maybe pages would be like a breathing point in the content, where you could place a footnote like you would a figure, that doesn't necessarily need to contain a specific set of content. That is, the screen would resize, the content might slightly change now on each "page", but there are still pages, and footnotes at the bottom of each page. You could think of the page break as sort of a place to put ads. Wired has what seems like are pages (second image below).

Anyway, those are just some initial thoughts are on what could be a "page" and footnotes on the web. Wondering if there is any solution to this problem, any standards, or design principles.


enter image description here


enter image description here