HTML5 navigation, structure and semantics

I've been asking a lot of questions lately, but hopefully this will be the last one for a while.

I've put up an example at: http://myhideout.eu/menu/

Basically it's all about the menu for my new site, the structural design which is a bit different than what you usually see, semantics and all such thing

Basically it consist of a number of tabs, which are not actual links, though they could be. Below is a predefined area which will serve one of two purposes.

Assuming that the use is not browsing the menu, the area will be used for something not related to navigation. For example displaying a banner image. Defined as main content. When the menu is in use, this main content will not be displayed. The area will instead be used for the sub menus.

I should think that is simple enough, and assuming there's no serious browser compatibility issues with newer browsers, which at this time do not include ie8 and older. I may chose to support ie8, all in good time, b8ut in reality that will be more about supporting windows xp.

Now that is all well an good, and it works, but there are some questions that I'd like answered and some issue I should like solved.

First of all, if I can avoid using divs, I'd like to. If there's another element that is more suited, please let me know.

Secondly, it quickly gets confusing with all the :hover and what not. The CSS as it is, is a mess, and all suggestions will be most welcome.

Thirdly I've found, regarding the defined width of the li elements displayed as table-cells, that they act rather weird. If I set a width of 100%, the first cell will be made as wide as possible, while still displaying the others, but if I set an absolute pixel value that is too high, it all lines up perfectly. This is actually rather nice I think, which is why the width is currently set equal to the width of the navigation area, but is this a good approach and can I expect it to work in other never browsers, also in the future? Or is it better to just calculate the appropriate width?

Lastly, the main div, which is shown while the navigation isn't used, is not actually related to the navigation, but I haven't figured out how to do it without placing that element in the element. Comments on this will also be appreciated.

There are probably issues which I haven't noticed or questions I've forgotten to pose, so again, any comments are very welcome.

I do hope to get some hight quality feedback here, and I expect I will ;)

So that's it for now.

Thanks in advance and best regards.

Edit: Taking some of your advice and thinking a bit, I've altered the structure a bit: http://jsfiddle.net/hJuym/39/

I still haven't found a better alternative to display: table-cell No matter what I end up with weird margins/paddings or untidy borders.

EDIT2: I have now trie开发者_如何学God everything I can imagine, but am still unable to fix one tiny bitty problem.

I'm told that the table-cell attribute is a no go. While that is all well and good, it actually works EXACTLY as I want it too now, using the table-cell display attribute.

since table-cell is bad, apparently, I've tried to make it work with inline, which result in an odd top 1.5px padding or margin, which I can't get rid of, but more importantly, I'm unable to set a width on the li elements. Also the border are very hard to manage if you want them to look perfect. where as table-cell simply tread the border between two cells as one, apparently.

Then of course I've tried inline-block, which have had the most succes, though I'm forced to to remove certain spaces and line breaks in the html, which is annoying, but still I am unable to set a fixed width, though apparently I should be able to, and still the border are a mess.

Of course I've tried messing around with floats to, but that just gives me a headache. So I want 10 tabs. fine, just take the total width and divide by 10. Ya it works, unless you're unable to set width or want to use borders... jabba jabba jabba nit pick.

I'm not angry or anything, but I am confused, tired and giving up.

Please tell me why I can't just use what actually works, mainly the table-cell attribute, and assuming that there is a good reason, please do explain to me, in detail, what the alternative is, because I don't see it.l

example of newest working draft in last edit.

Best regards.

1. Div, as mentioned. means "division". It's perfect for many scenarios and needn't be replaced except as mentioned by colinross in his answer. If you just need to group some markup in a convenient placeholder, don't be afraid to use div
2. I've tried to clean up your code a bit. See this JSFiddle: http://jsfiddle.net/hJuym/35/. Obviously there's some arbitrary measurements (like the width, height, and various offsets) but that wouldn't be difficult to change.
3. Don't use table-cell for display. Use block, inline, or inline-block, as colinross mentioned.
4. As shown in my jsfiddle above (http://jsfiddle.net/hJuym/35/), you don't have to. Wrap everything in a header, then split the header up into navigation and normal display content. The code explains itself.

EDIT: I added some explanatory comments to the fiddle above. For the commented version, see: http://jsfiddle.net/hJuym/36/

In particular, the html 5 spec defined a few 'standout' new elements which I believe you are referencing here.

<header> (and <footer>), <nav>, and <article>, etc. are all just semantic containers if you will. Some, semantically, can be nested, like a <nav> element inside an <article> for article-level navigation (like jump to footnote).

The thing to remember is that they are inherently-linked to their parent elements, therefore

<body>
<header>Hi there!</header>
<nav>This would be site-level navigation</nav>
<article>
<header>Welcome to *this page*</header>
<nav>This would be page-level navigation</nav>
<p> Here is the actual page content </p>
</article>

You can imagine this code representing, semantically, that the site is saying "Hi There!", where as the page is saying "Welcome to this page".

Please be more specific for a better example/explanation.

Quick notes: don't define non-table-cells to be display: table-cell unless you want really weird behavior across browsers. Stick to display: {none, block, inline, inline-block}

Div stands for *div*ision

Adding on to my previous answer, when push comes to shove, the new elements introduced are, in general, purely for semantics. The W3C (Working Group) identified that a vast majority of websites were using divs to separate out their headers, footers, and navigation blocks. They added the elements in an effort to give consistency to websites so that browsers and other rendering engines, such as ARIA-compatable screen readers, and/or pragmatically developed parsers (like web crawlers) would be able to determine the semantic nature of the elements more consistently (like ignoring body header and body navigation elements and starting to read the page aloud to the user at the first <article> element.

Hope that helps