Good and Bad Navigation Patterns for Long HTML Pages

Source: Dev.to

Good Pattern

Link to the beginning of the table of contents at the end of each section

Example:

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:

Why
Too “magical” and brittle. For example, if you use the browser’s “Copy Link to Highlight” functionality, the behavior can become unpredictable. In 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:

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:

Why
You break the pattern. Each time a reader clicks a “Table of Contents” link, they get a slightly different result. Jumping to a specific bullet (e.g., the last one) obscures valuable context; other contents might not be visible on screen, forcing the reader to scroll up. This is disorienting, even if momentarily.