10 Quick and Dirty Ways to Lay Out a List of Links

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

CopyrightPrivacyRSS FeedSitemap

5. Colon

Copyright : Privacy : RSS Feed : Sitemap

6. En-dash

CopyrightPrivacyRSS FeedSitemap

7. Forward slash

Copyright / Privacy / RSS Feed / Sitemap

8. Generic currency symbol

Copyright ¤ Privacy ¤ RSS Feed ¤ Sitemap

9. Lozenge

CopyrightPrivacyRSS FeedSitemap

10. Diamond

CopyrightPrivacyRSS FeedSitemap

Posted on: June 4, 2009 | 36 Comments

Recent Entries in "Web Design"

36 Comments Posted

interesting...and i may use this. thanks for posting!

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...

I've seen the double colon used a few times too (also used as a separator in page titles):

Copyright :: Privacy :: RSS Feed :: Sitemap

hey thats cool. I see vertical line all the time but the others are nice to keep it fresh.

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.

I use the vertical bar.
Yes, I agree the forward slash is confusing.

Interesting stuff sneaky. This is useful

thanks for this list. i am probably gonna use some of them.
bookmarked!

I tend to prefer using a vertical bar though small dots are ok.

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.

I still stick to the traditional Vertical bar, but big list dot seem anther good option.

I find myself using the medium list dot more and more these days.

I've used a "~" to separate links. It's look though, depends on the font used.

I tend to use the vertical bar. I like the double colons as well.

Why not just ?

Copyright Privacy RSS Feed Sitemap

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.

Handy article. I tend to use double semi-colons.

Copyright :: Privacy :: RSS Feed :: Sitemap

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.

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

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.

Why does the search engines and specifically google recognise "the line" as an advantage for seo?

Don't let your visitors get confused with 'exotic' characters... I use the (|) or just nothing....

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.

Nice post it is very informative for me

All cool but you can't beat the vertical bar (pipe). It's just synonomous with division for me.

Vertical bar is used all over the web, most standard i guess.

I like to make the bullets as interesting as possible. Using images, arrows, anythng other than a boring dot. Horizontal list all the way!

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.

hi buddy nice information for us keep it up ill be visiting again

It's amazing that something this simple can draw so much interest. I vote for the |, but I am too conservative at times.

Nice tutorial on a list. I have a photographers blog may be i would use this styles to experement on it.

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.

Nice Lists, i tend to use vertical bars

Thanks for this list. I'll probably use some of them.

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!

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.

Subscribe

Subscribe to my RSS FeedSubscribe to my RSS Feed

Categories

Proud member of 9rules network