CHAPTER 3 The Vanilla Web Diet
<footer>
<p class="back"><a href="#nav">Back to menu</a></p>
</footer>
</article>
</section>Granted, this is a lot more HTML, but here’s the thing: you get a boatload
of benefits from this structure.- It works without any JavaScript or CSS. Visitors get a list of links
that point to parts of the document, a tried and true way to skip to
the interesting bits in a large document. The links back to the menu
allow you to easily return. - By using real targets in the document in the shape of IDs on
elements (the days of named anchors really are over by now), our
panel can be bookmarked automatically and seed the history of the
browser without having to use pushState or the horrible hack of
hashbangs. - We have a lot of hooks in there for styles and JavaScript. We could
even use the :target selector in CSS and not need JavaScript at all. - When browsers eventually do something useful with the outline al-
gorithm of sections, articles and nav (for example, they could cre-
ate an automatic table of contents, like Word does, or make them
discoverable in screen readers like headings and lists and links are
now), we’ll already have the right HTML in place — we can build for
things to come instead of simulating them. - Assistive technology loves this. Users are informed that the navi-
gation consists of a list of six items, or they could circumvent the
whole thing and jump from heading to heading.