This styling is blatantly ripped from the 1994 Routledge edition of Eve Kosofsky Sedgwickʼs Tendencies. You can see it in‑use on page 03 of my journal.
Page content should either all be inside <body> or inside of an <article> child ; in the latter case, each element child of the <article> will create a separate scrollbox, laid out horizontally like on this page. The hope with this design is that it will make longer articles easier to read in multiple passes, as flipping between sections is a simple matter of horizontal scrolling, while scanning within sections happens along the vertical. You can use a <div> to wrap content ( such as the header and introductory section ) which should go together. On non‑screen devices ( eg, when printing ) both layouts are approximately the same.
For ease of navigation, this page is scripted ; the scripts simply provide scroll‑snapping and autofocusing features to make the page navigate in an intuitive manner via mouse or keyboard. All styling is done via CSS ; the page works fine with JavaScript disabled.
It is recommended, but not required, that you set tabindex="0" on the children of <article> for ease‑of‑navigation purposes.
Footnotes can be created using links inside of <sup> elements, like this1 ; the notes themselves should be placed in a <ol> in a <footer> at the bottom of the page. Use <small class="RETURN"><a href="#mark-id">[Return to text.]</a></small> or similar to provide a return link from footnotes ; these will only be rendered visually when the containing list item is targeted.
<footer>s also provide useful navigation features for people without horizontal scrolling capabilities ; a link which is the last child of the <footer> element will be displayed in a special manner, intended for use as a link targeting the following section. See the footer at the bottom of this page for an example. If the href of this link is an exact match for "#", then it is a toplink and will be left‑justified instead of right‑.
If you need more advanced navigation capabilities, you can use a <nav> containing a list of links inside the <footer> instead ; this will be rendered as a 3×n grid.