Search code examples
htmlsemanticsbreadcrumbs

How to properly indicate the direction within a breadcrumbs?


We often see people use the "greater than" character (>) in their breadcrumbs' HTML code[1] to indicate the direction within their breadcrumbs. That obviously is incorrect because the "greater than" character is for mathematical use and doesn't actually have any directional meaning.

So is there an unicode character which is dedicated for directional use?

I searched some arrow shaped characters, such as this one: →, but many of them are for mathematical use as well. And some others' definitions are "nonspacing combining mark", which I guess doesn't have directional meaning either.



  1. It's fine if the "greater than" character is added through CSS generated content or background image.

Solution

  • Unicode encodes characters, not meanings. It does not have a character for an abstract concept of direction, for example. The arrow characters are characterized as being for multiple use; the Unicode Standard, chapter 15 says: “Arrows are used for a variety of purposes: to imply directional relation, to show logical derivation or implication, and to represent the cursor control keys.”

    Note that breadcrumbs are really not about direction but about hierarchy. This does not change the applicability of characters.

    The use of “>” and “­­»”, though somewhat illogical and impractical, has become so common that people are getting used to it. The main practical argument in favor of “→” or some other arrow character is that it is more recognizable than the tiny “»” and that it looks typographically better than “>”. The main practical problem is presentational, too: in some fonts, most notably Calibri, “→” is odd looking, with a huge arrowhead. But this problem can be avoided by using a different font.