The best way to lay out a list of links — say, like those you would find in a footer — is typically to code them as an HTML list and use CSS for the presentation.
However, sometimes this is neither convenient nor practical (can you say, "legacy CMS"?).
In which case, here are some variations on how you can separate a list of links, starting with the old standby, the vertical bar or pipe.
1. Vertical bar
Copyright | Privacy | RSS Feed | Sitemap
2. Broken vertical bar
Copyright ¦ Privacy ¦ RSS Feed ¦ Sitemap
3. Medium list dot
Copyright · Privacy · RSS Feed · Sitemap
4. Big list dot
Copyright • Privacy • RSS Feed • Sitemap
5. Colon
Copyright : Privacy : RSS Feed : Sitemap
6. En-dash
Copyright – Privacy – RSS Feed – Sitemap
7. Forward slash
Copyright / Privacy / RSS Feed / Sitemap
8. Generic currency symbol
Copyright ¤ Privacy ¤ RSS Feed ¤ Sitemap
9. Lozenge
Copyright ◊ Privacy ◊ RSS Feed ◊ Sitemap
10. Diamond
Copyright ♦ Privacy ♦ RSS Feed ♦ Sitemap
Posted on: June 4, 2009 | 36 Comments






36 Comments Posted
interesting...and i may use this. thanks for posting!
1. Posted by tina on June 04, 2009
The vertical line (1) is probably still the best but i really like the medium list dot in your examples too (3)
I think the forward slash option (7) may confuse people as that is usually reserved for breadcrumbs...
2. Posted by David on June 05, 2009
I've seen the double colon used a few times too (also used as a separator in page titles):
Copyright :: Privacy :: RSS Feed :: Sitemap
3. Posted by Richard@Home on June 05, 2009
hey thats cool. I see vertical line all the time but the others are nice to keep it fresh.
4. Posted by VPS Web Hosting on June 06, 2009
wah I have tried different methods for the dropping out links. this posting has cool 10 link methods. I have used few of them already, let me try the others also.
5. Posted by Shapia web designs on June 08, 2009
I use the vertical bar.
Yes, I agree the forward slash is confusing.
6. Posted by zoliky on June 08, 2009
Interesting stuff sneaky. This is useful
7. Posted by Tom Web on June 08, 2009
thanks for this list. i am probably gonna use some of them.
bookmarked!
8. Posted by web design beijing on June 09, 2009
I tend to prefer using a vertical bar though small dots are ok.
9. Posted by Evan Skuthorpe on June 10, 2009
Nice roundup of options, I would say the vertical bar and the dash are the most common, double colons work well too for seperating links or for in page titles (seen them used in bread crumbs as well).
May have to try the small dot in the future.
10. Posted by Chris Walton Liverpool Web Design on June 11, 2009
I still stick to the traditional Vertical bar, but big list dot seem anther good option.
11. Posted by Terrance(OXP) on June 15, 2009
I find myself using the medium list dot more and more these days.
12. Posted by Martin Bean on June 16, 2009
I've used a "~" to separate links. It's look though, depends on the font used.
13. Posted by vsr on June 16, 2009
I tend to use the vertical bar. I like the double colons as well.
14. Posted by Victor Zuniga on June 16, 2009
Why not just ?
Copyright Privacy RSS Feed Sitemap
15. Posted by sefat on June 16, 2009
Cause it looks like a long sentece and makes no sense. I use / for breadcrump navigations and | for seperation. The | is also very good for the title because google ignore them so you can easy combine keywords and keep it a nice view for the user.
16. Posted by Lichtathlet on June 17, 2009
Handy article. I tend to use double semi-colons.
Copyright :: Privacy :: RSS Feed :: Sitemap
17. Posted by Colin Hardie on June 17, 2009
I feel it is better to use colon(:), piping(¦), and the line(|). This would give the visitor the exact idea of the flow of links.
18. Posted by Shapiawebdesigns on June 18, 2009
Nice List. Another method I sometimes use is square brackets around the links.
e.g.
[Link1] [Link2] [Link3]
It tends to define the link space well and guide user mouseclicks
19. Posted by Ganesh Shankar on June 21, 2009
I generally layout a list of links in a ul tag and then use the css content property to add the marks after each note. This approch won't work in IE, but at least I won't be adding the visual elements into the markup. I'd also be careful with some of the lower examples using entities, a lot of devices might not render them correctly and leave the reader with the nasty question mark (missing character) for a missing character.
20. Posted by Portland Web Design on June 22, 2009
Why does the search engines and specifically google recognise "the line" as an advantage for seo?
21. Posted by website design cape town on July 01, 2009
Don't let your visitors get confused with 'exotic' characters... I use the (|) or just nothing....
22. Posted by Edgar Leijs on July 06, 2009
I agree with the above. When I design web sites I use either the vertical line or empty space to layout my footer links.
Forward slash should be reserved for breadcrumbs and the diamond, lozenge etc should not be used.
This would fall into the zone of best practices.
23. Posted by vancouver web design on July 07, 2009
Nice post it is very informative for me
24. Posted by John on July 07, 2009
All cool but you can't beat the vertical bar (pipe). It's just synonomous with division for me.
25. Posted by iWantiPhone on July 08, 2009
Vertical bar is used all over the web, most standard i guess.
26. Posted by Webdesign Limburg on July 11, 2009
I like to make the bullets as interesting as possible. Using images, arrows, anythng other than a boring dot. Horizontal list all the way!
27. Posted by Alex Peterson on July 15, 2009
What about nothing at all, its clean effective and still easy to read. Also if you are using a vertical bar do most of you use border-right: 1px or actually use | ? just curious.
28. Posted by Surf Side Design on July 15, 2009
hi buddy nice information for us keep it up ill be visiting again
29. Posted by ntiremeadia on July 20, 2009
It's amazing that something this simple can draw so much interest. I vote for the |, but I am too conservative at times.
30. Posted by Right Point Web on July 21, 2009
Nice tutorial on a list. I have a photographers blog may be i would use this styles to experement on it.
31. Posted by codingmind on July 27, 2009
Very interesting. I never really thought about separating my links with anything different. I've always used forward slashed or vertical bars. In all my experience I never thought of that! Well that's why it is good to read blogs you find new and innovative ways to do things.
32. Posted by Black Rhino Marketing on August 01, 2009
Nice Lists, i tend to use vertical bars
33. Posted by Dan Smith on August 05, 2009
Thanks for this list. I'll probably use some of them.
34. Posted by Andrey on August 06, 2009
I prefer using a HTML list of course with proper valid CSS styling, then using background images on the < li > elements.
Hmm, each to their own I guess!
35. Posted by Unibands on August 12, 2009
I guess this all depends on the design and purpose of the site in question. I would agree with Unibands above...it's all about CSS and images right now.
36. Posted by Hypnotherapy on August 12, 2009