Footer menu - does it have to be a list?

#1 mrsminkie

Expert

Group: Members
Posts: 588
Joined: 23-December 09
Reputation: 21
Gender:Female
Location:South Yorkshire
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 08 September 2010 - 08:32 PM

This may be a daft question, but hey, I don't know the answer....

The menu in the footer of a website - does it have to be a list, can it be within paragraph tabs or does it really not matter? I recall reading something about it being relevant for SEO but don't remember.

Thanks

#2 bocaj

The First Messiah of Javology

Group: Members
Posts: 3,383
Joined: 11-January 09
Reputation: 99
Gender:Male
Location:The West Country.
Experience:Web Guru
Area of Expertise:Entrepreneur

Posted 08 September 2010 - 08:41 PM

It depends what the content of the footer is.

If it's a list of links, then go with a list. If it's just a paragraph of text, or a disclaimer, then go with the paragraph tag.

Whatever suits the content best.

#3 mrsminkie

Expert

Group: Members
Posts: 588
Joined: 23-December 09
Reputation: 21
Gender:Female
Location:South Yorkshire
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 08 September 2010 - 09:39 PM

It's an inline menu. For some reason, I've developed a habit of doing this:

<a href="">home</a> | <a href="">about us</a> | <a href......

I think it was a shortcut when first starting out to get those '|' inbetween the items. Should I be using a proper unordered list or is this method ok?

#4 Lev

Group: Members
Posts: 3,946
Joined: 28-October 09
Reputation: 257
Gender:Male
Location:Russia
Experience:Advanced
Area of Expertise:Web Designer

Posted 08 September 2010 - 09:53 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<style>
ul#footermenu {list-style-type: none; padding: 0; margin 0;}
ul#footermenu li {display: inline; padding: 0;}
ul#footermenu li a {margin: 3px 5px;}
</style>
<ul id="footermenu">
<li><a href="#">Item 1</a></li>
<li>|</li>
<li><a href="#">Item 2</a></li>
<li>|</li>
<li><a href="#">Item 3</a></li>
<li>|</li>
<li><a href="#">Item 4</a></li>
</ul>
</body>
</html>

#5 BlueDreamer

Web Guru

Group: Moderators
Posts: 5,674
Joined: 23-October 07
Reputation: 192
Gender:Male
Location:Northampton (where?)
Experience:Advanced
Area of Expertise:Web Developer

Posted 08 September 2010 - 10:09 PM

If you want horizontal dividers the "sematic" way to do it would be something like:

<ul class="bottomlinky">
<li><a href="#">Link title</a></li>
<li><a href="#">Link title</a></li>
<li><a href="#">Link title</a></li>
</ul>

ul.bottomlinky { list-style: none; padding; 0; margin: 0; }
ul.bottomlinky li { display: inline; padding: 0 10px; border-right: 1px solid #000; }
ul.bottomlinky li:last-child { border-right: 0; }

The last style :last-child simply removes the border from the last <li> element.

#6 mrsminkie

Expert

Group: Members
Posts: 588
Joined: 23-December 09
Reputation: 21
Gender:Female
Location:South Yorkshire
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 09 September 2010 - 07:26 AM

Thanks everyone.

So - I'm guessing it IS relevant? Menus should be in a list?

#7 Lev

Group: Members
Posts: 3,946
Joined: 28-October 09
Reputation: 257
Gender:Male
Location:Russia
Experience:Advanced
Area of Expertise:Web Designer

Posted 09 September 2010 - 08:45 AM

Whether or no, it is quite logical, because navigational menu is no other than a LIST of links.

...But nobody have the right to force you to use <li> instead of <div>, or <td>

#8 bocaj

The First Messiah of Javology

Group: Members
Posts: 3,383
Joined: 11-January 09
Reputation: 99
Gender:Male
Location:The West Country.
Experience:Web Guru
Area of Expertise:Entrepreneur

Posted 09 September 2010 - 11:48 AM

@BlueDreamer

Another approach could be like this

<ul class="bottomlinky">
<li><a href="#">Link title</a></li>
<li><a href="#">Link title</a></li>
<li><a href="#">Link title</a></li>
</ul>
 
ul.bottomlinky { list-style: none; padding: 0; margin: 0; }
ul.bottomlinky li { display: inline; padding: 0 0px; }
ul.bottomlinky li:before{content: ' > '}
ul.bottomlinky li:first-child:before{content:''}

The benefit of this method, is you're not limited to using a 'pipe'. You can put any symbol between the links. A good example would be using '>' for breadcrumb navigation.

The downside to this method, is you're restricted on the padding between the seperators. You can faux it by adding spaces into the content attribute, but i personally think it's a little iffy.

ul.bottomlinky li:after{content:'      |      '}

Edit: IE8 doesn't seem to support :last-child, however it does support first-child: i've updated the css to take this into account.

Update: Tested and working in IE8+, FF2+, Chrome, Safari 3+, Opera 9+

IE7 doesn't work (no :after or :before support), but degrades gracefully.

http://msdn.microsof...024(VS.85).aspx

#9 BlueDreamer

Web Guru

Group: Moderators
Posts: 5,674
Joined: 23-October 07
Reputation: 192
Gender:Male
Location:Northampton (where?)
Experience:Advanced
Area of Expertise:Web Developer

Posted 09 September 2010 - 01:29 PM

Lol... forget IE8 didn't like last-child. Using it isn't the end of the world - he he

#10 tules

Forum Newcomer

Group: Members
Posts: 25
Joined: 02-September 10
Reputation: 0
Gender:Male
Location:Korea
Experience:Intermediate
Area of Expertise:Web Developer

Posted 09 September 2010 - 02:54 PM

I wont make much difference to your Google ranking if any. On page factors are looking more at things like keywords in your meta-tags and headers and even that is worth about a tenth of off page factors like inbound links. However yeah it would be better to use an unordered list. In fact if you wanna be clever you could even use HTML5 which has proper semantic tags for navigation and other things. This is gradually gonna become more important as an onp age factor in the next few years, so it's good to be prepared

#11 devmatt

Forum Newcomer

Group: Members
Posts: 13
Joined: 27-August 10
Reputation: 0
Gender:Male
Location:Cumbria, UK
Experience:Advanced
Area of Expertise:Web Developer

Posted 09 September 2010 - 03:27 PM

It won't affect your SEO whichever way you do it.

The purpose of these link is for human usability and to provide a good internal linking structure to all pages. Whether that's in a paragraph or a list is not relevant.

#12 Ash Scott

Competition Manager

Group: Members
Posts: 1,410
Joined: 25-May 10
Reputation: 53
Gender:Male
Location:Kent
Experience:Advanced
Area of Expertise:Designer/Coder

Posted 09 September 2010 - 03:59 PM

i use a for mine, but it doesnt affect you SEO. mainly like what matt said. They are only there for user accesibilty.

#13 After9

Forum Newcomer

Group: Members
Posts: 1
Joined: 10-September 10
Reputation: 0

Posted 10 September 2010 - 02:36 PM

BlueDreamer, on 08 September 2010 - 10:09 PM, said:

If you want horizontal dividers the "sematic" way to do it would be something like:

<ul class="bottomlinky">
<li><a href="#">Link title</a></li>
<li><a href="#">Link title</a></li>
<li><a href="#">Link title</a></li>
</ul>

ul.bottomlinky { list-style: none; padding; 0; margin: 0; }
ul.bottomlinky li { display: inline; padding: 0 10px; border-right: 1px solid #000; }
ul.bottomlinky li:last-child { border-right: 0; }

The last style :last-child simply removes the border from the last <li> element.

I think the last-child chooser is not supported by IE browser.
and also, I think just use the codes below should be ok for the footer.
<a href="#">link_1</a> | <a href="#">link_2</a> | <a href="#">link_3</a>