Some HTML pages can run quite long. The longer the page, the more important clean, consistent navigation becomes.
Good Pattern
Link to the beginning of the table of contents at the end of each section
Example: https://codepen.io/Alexis-Kypridemos/pen/WbGQJmy
Why
It helps readers build a pattern. They know where to look for navigation. Also, if you’re coding the HTML compiler or transformation, it’s the easiest to implement.
Bad Patterns
1. Use CSS to create a paginated effect
All sections are hidden, except the one the reader selects from the table of contents.
Example: https://codepen.io/Alexis-Kypridemos/pen/PwGPaYO
Why
Too “magical” and brittle. For example, if you use the browser’s “Copy Link to Highlight” functionality, the behavior can become unpredictable. For most cases, making all sections visible and scrollable, one after the other, is the cleaner option for both the reader and implementer.
2. Include links to the previous and next sections, where applicable, as well as to the table of contents
Example: https://codepen.io/Alexis-Kypridemos/pen/LERprpR
Why
It’s too much. If all the content is on a single HTML page, the previous and next links are unnecessary and create visual “noise”. Readers are likely to find it more intuitive to just scroll up and down.
3. When linking to the table of contents, link to the specific bullet point for that section
Example: https://codepen.io/Alexis-Kypridemos/pen/RNGWJRL
Why
You break the pattern. Each time, a reader clicks a “Table of Contents” link, they get a slightly different result. Also, by jumping to a specific bullet, for example the last one, obscures valuable context. The other contents might not be visible on screen, and the reader has to scroll up to view them. It’s disorienting, even if momentarily.
