September 8, 201015 yr 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
September 8, 201015 yr 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.
September 8, 201015 yr Author It's an inline menu. For some reason, I've developed a habit of doing this: <p><a href="">home</a> | <a href="">about us</a> | <a href......</p> 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?
September 8, 201015 yr <!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>
September 8, 201015 yr 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.
September 9, 201015 yr Author Thanks everyone. So - I'm guessing it IS relevant? Menus should be in a list?
September 9, 201015 yr 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>, <p> or <td>
September 9, 201015 yr @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.microsoft.com/en-us/library/cc351024(VS.85).aspx
September 9, 201015 yr Lol... forget IE8 didn't like last-child. Using it isn't the end of the world - he he
September 9, 201015 yr 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
September 9, 201015 yr 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.
September 9, 201015 yr i use a <p> for mine, but it doesnt affect you SEO. mainly like what matt said. They are only there for user accesibilty.
September 10, 201015 yr 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. <p><a href="#">link_1</a> | <a href="#">link_2</a> | <a href="#">link_3</a></p>
Create an account or sign in to comment