CHAPTER 17 ■ LAYOUTSLayout Links
Problem You want to enhance navigation within a document and to other documents using
specially styled links including skip-to-main-content, breadcrumb, sequential, more-info,
top, external, and footer links.
Solutions Section links allow you to link to any section in a document. You can assign each section
to a unique ID. The ID is an anchor that can be linked to by internal and external links.
Using the section ID as a selector, you can uniquely style the section and its elements.
There are five common sections: preheader, header, postheader, body, and footer. (The
terms preheader and postheader are my own.) Different types of links occur in each of these
sections.
Skip-to-main-content links allow users to jump directly to the main content of a
document. This link is useful for nonsighted users and users reading the document on
small devices. It occurs in the preheader and should be the first item in the document
other than perhaps the document heading.
Breadcrumb links are a series of links that lead back to the home page. They typically
occur in the postheader or header. To identify them as breadcrumbs, you can separate
them with a right-pointing arrow symbol.
Sequential links link to previous and next documents in a series. They typically have
names like Previous and Next, the former often preceded by a left-pointing arrow and the
latter followed by a right-pointing arrow.
More-info links allow content in a section to be abbreviated to make it easier to read
online. If users want more information, they can click a link to read more about it. The link
is often labeled some variation of More Info. You can visually set apart more-info links by
making them the last item in a section, embedding them in their own paragraph, aligning
them to the right, and preceding them with a right-pointing arrow symbol.
Top links allow users to jump to the top of a section or document. They typically occur in
the header of a section when they link back to the top of the document. They also occur as
the last item in a section when they link back to the top of the section. They’re often raised
above the baseline and are followed by an up-pointing arrow symbol.
External links are styled to show that they lead to an external web site. This helps users
decide whether they want to go to another web site. You can create a rule that adds right
padding to a link and displays a background image of an up-right-pointing arrow in this
padding.
Footer links occur in the footer section and link to information about the copyright,
licensing, privacy, company, disclaimers, affiliates, and so forth.
Pattern^
HTML LINK_CONTENT
CSS .LINK_TYPE { STYLES }
Related to Inline Elements (Chapter 2); Lists (Chapter 13)^
Location This pattern works anywhere.