Marking up Navigation Tabs

HTML & CSS
1

In the past when I created navigation tabs, I used an unordered list.

But now I am wondering if that is correct.

Here is my reasoning…

Let’s say you had a website about sports, and your navigation tabs across the top of your website were: Football, Basketball, Baseball, Racing, Golf, Misc

If you only had one of those tabs, it would likely be a heading, for example…

<h1>The Ultimate Sports Website</h1>

<h2>Football</h2>

<h3>Ohio State Wins 1st College Bowl Championship</h3>
<p>On Monday night, the Buckeyes made history by...</p>

<ul>
<li>NFL</li>
<li>NCAAF</li>
<li>CFL</li>
<li>Columns</li>
<li>Breaking News</li>
</ul>

So that makes me want to make each navigation tab a heading, maybe like…

<ul>
<li><h2>Football</h2></li>
<li><h2>Basketball</h2></li>
<li><h2>Baseball</h2></li>
<li><h2>Racing</h2></li>
<li><h2>Golf</h2></li>
<li><h2>Misc</h2></li>
</ul>

What do you think about that?

2

That’s not bad logic, but the main point here is that you DON’T just have one tab. You having mulitple items can be grounds to make it into an unordered list. So unless you have a situation of only having one tab, then sure go with the header, but semantics change as the HTML changes.

3

Ryan,

I follow what you are saying, but if I had a website about sports, and someone selected the “Football” tab, then it seems that semantically the page is about “Football” and should be marked as such, right?

Otherwise, you would end up with all of these disparate items that don’t logically have anything to tie up to (e.g. “Football”).

Maybe I am over-thinking this like my last thread, but I just wonder about these things…

4

mikey_w,

You seem to be having a bad tag day.

An <h2> tag is supposed to be a high level header. Putting an <h2> tag inside of a list item is semantically illogical, not to mention unnecessary markup. If you need to style the text you can do so in the <li> tag, or add a <div> or even a <span> and give the tag a class of .h2 (if you’re obsessed enough to do that (yes, I’ve done that )). Any of the latter would be more correct than putting an <h2> inside a <li>. Really.

1 Like
5

Just trying to do things the right way.

My question isn’t about styling.

While placing an < h2> inside an < li > may always be wrong, I don’t think this topic is as obvious as most think.

Navigation tab represent PAGES for all intents and purposes. So even though you are on index.html (Home Page), when you navigate between the “Football” and “Baseball” and “Hockey” tabs, it is as if you are looking at an entirely new page.

If < h1 > was associated with the website, then < h2 > might represent “Football” and everything below that related to football would come thereafter (i.e. < h3 >, < h4 >, < h5 >, etc)

Most people would just make the navigation bar an unordered list and call it quits. However the problem as I was trying to explain above is that by doing so you lose a level in the content hierarchy.

If “World’s Greatest Sports Website” is < h1 >, and each sports section (e.g. Football, Baseball, Hockey, etc) is level < h2 >, and other content (e.g. articles) are < h3 >, then if you make the navigation bar a < ul > then you just lost your 2nd level.

If this website were a BOOK, then the you could think of each type of sports as a Chapter and maybe assign it an < h2 >, and then the paragraph heading inside each sports chapter might be an < h3 >.

This would make sense…

<h1>World's Greatest Sports Website</h1>
<h2>Football</h2>
<h3>Ohio State makes BCS History!!<h3>

This doesn’t really make sense…

<h1>World's Greatest Sports Website</h1>
<ul<li>Football</li></ul>
<h3>Ohio State makes BCS History!!</h3>

Again, I am not arguing what was said about sticking an < h2 > inside an < li >.

I just feel that my navigation bar is both an unordered list, but with each “tab” representing an important section that should receive a heading to be semantically correct.

It is almost as if the designers of HTML4 never thought about this all too common scenario…

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.