Opinions plz

[glenelkins]

Hi

 

I just need some opinions on the best way to setup a navigation bar in html!

 

I have my views, i personally think the best method is along these lines:

 

<ul>
    <li><a href="">Text</a></li>
</ul>

 

This to be styled accordingly in css.

 

But what do people think of using a table? In my opinion a navbar is part of layout?!

[SuperBlue]

Using list for navigation is the generally accepted way.

 

I would recommend that you have a heading before each list as well, usually you have some text right before the list, briefly describing the list, such as "navigation", "menu", "articles", "news", or whatever..

 

So the list would usually look something like the below.

<h2>Navigation</h2>
<ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
</ul>

 

People with screen-readers often jump through the headings, which would make the SR read the heading, followed by "list with x links".

 

If you don't like the headings to be shown in visual browsers, then i would hide them with something like below.

.SR {
  height: 0;
  width: 0;
  overflow: hidden;
}

 

Since screen readers fail to read out text hidden with display:none;

 

 

Tables should only be used when appropriate. I.e for charts and such..

[glenelkins]

hi

 

the only reason i asked was some of my css and html work has been undermined by a client by going to ( and frankly pathetically poor quality ) developer to criticise the work. Even though I work as a developer for an established company. The report this guy made was silly on an incompleted website, and after checking his own site the guy had to room to comment...i was just checking out what people thought here with this guy using tables!

 

I mean the guy picked up on a css invalidation on an honest spelling mistake!

 

and usually to hide the text i would use something like

 

text-indent: -3000px;

overflow: hidden;

 

works the same as your SR really! Though the issue i face with this if the user has images disabled then the text links are not visible either!

 

 

[haku]

You have the right idea. Don't use tables for navigation, as navigation isn't tabular data, and therefor not semantic. Search engines like semantic markup, so you will be hurting your chances in the search engines.

 

Those terms should be good enough for the client.

[glenelkins]

yes this is what i explained to him. The critic guy is supposed to be an SEO pro, but i checked all his keywords and his HTML markup and he is talking a load of shit!

[glenelkins]

hi

 

the only reason i asked was some of my css and html work has been undermined by a client by going to ( and frankly pathetically poor quality ) developer to criticise the work. Even though my full time job is a web developer . The report this guy made was silly on an incompleted website, and after checking his own site the guy had to room to comment...i was just checking out what people thought here with this guy using tables!

 

I mean the guy picked up on a css invalidation on an honest spelling mistake!

 

and usually to hide the text i would use something like

 

text-indent: -3000px;

overflow: hidden;

 

works the same as your SR really! Though the issue i face with this if the user has images disabled then the text links are not visible either!

 

 

[haku]

Ya, that's the problem with this industry. Anyone who can figure out how to steal dreamweaver and look up the term SEO is all of a sudden a 'Web Designer and SEO Master'.