HTML Breadcrumbs Tutorial
Breadcrumbs are a useful secondary navigation system for creating HyperText Markup Language (HTML) web pages. These pieces of linked text provide a method for visitors to use when journeying through a website and keeping track of where they are. You can utilize this technique relatively easily for your own pages, and provide your web visitors an enhanced experience.
-
Adding Breadcrumbs
-
Many options exist for adding breadcrumbs to the top of web pages. Choose from a variety of common separators to provide a visual representation of parent and child pages.
To start, a popular option for separating breadcrumbs is to use right arrows between each linked word. To do this, enter the word, link the text to the appropriate page and then simultaneously press the "Shift" and ">" arrow key. Do this for each entry and make sure to press the space bar after each arrow is added. For example:
<a href="home.html">Home</a> > <a href="glasswork.html">Glass Work</a> > <a href="sculptures.html">Sculptures</a>The next separator is known as a "pipe", which is a single vertical line that goes up and down between each page link. Use this option by adding the linked text and pressing the "Shift" and "|" line button at the same time. Repeat this action for every link and space each line appropriately. For instance:
<a href="home.html">Home</a> | <a href="resume.html">Resume</a> | <a href="bio.html">Biography</a>Following, use colons to distinguish each breadcrumb. Again, type in the linked pages and this time press the "Shift" and ":" colon buttons together, directly after the ending "</a>" anchor tag. Space each link after the colon. To illustrate:
<a href="home.html">Home</a>: <a href="shows.html">Shows</a>: <a href="cali.html">California</a>To continue, slashes are also included in the separator list. Do this by typing in your linked text, follow it with a space, press the "/" slash button (coupled with the question mark on the keyboard) and provide another space before the next entry. Enter the following:
<a href="home.html">Home</a> / <a href="info.html">Information</a> / <a href="contact.html">Contact</a>Finally, bullets are a simple way to make the distinction between links. To use these, enter the linked text, press the space bar, type in the unicode text "●" and add another space. This unicode provides the code for the "black circle", which is more pronounced that the standard "." period symbol. For example:
<a href="home.html">Home</a> ● <a href="pubs.html">Publications</a> ● <a href="mags.html">Magazines</a>
Styling Breadcrumbs
-
In order to maintain an effective navigation, follow some simple steps to make sure breadcrumbs are as useful as possible.
First, if the page title is between one to three words, use the full title in the navigation. Longer titles, more than three words, are harder to follow and must be shortened. In addition, stay away from abbreviations that are not well known to avoid baffling visitors.
Next, make sure that all navigation links contain a capitalized first letter; however, articles and short connectors (i.e., a, an, the, and to by, etc.) do not follow this rule.
Following, take care in the number of breadcrumbs that you actually use, so that your viewers do not get lost in it all. A good rule of thumb is to stick to six or less crumbs, or 90 or fewer characters. Further, if pages are available from various paths, use a clear navigation in the menu to guide visitors along the most-used route.
Finally, evaluate the breadcrumb to make sure that only essential links are included. Select only the most important pages for your navigation because crumbs should never display aimless links.
-
