I could use some help re-doing the HTML Semantics for my web page.
Currently, I have my Company Name as the <h1>, then a Navigation Bar composed of a <ul>, then a box in the main area with an <h2> as it’s name, and finally some unrelated boxes in the right margin.
Now here is a screen-shot of my NEW layout…
When I first created this layout 18 months ago, it worked great, because everything under my main box related to the tab selected (e.g. “Finance”).
But since things have grown, here are my new problems…
First of all, I just added the “Business Structure” and “Seasonal” boxes in the right margin, and they really relate to “Finance”. (But visually and semantically, they are unrelated, which is wrong.)
Secondly, I am further sub-dividing what is listed in the main box. So the new boxes like the “Economy” SubSection - and others below it - really should relate to a new label called “Featured (SubSections)”, and not “Finance”. (So the box I originally had is not longer accurate.)
Here is what I would ideally like to do…
1.) Make each “Section” on my Navigation Bar be an <h2> tag instead of <a> tag.
2.) Semantically speaking, make it so that everything beneath the chosen “Section” Navigation Tab is subordinate to it. (This will eliminate the need for the box I currently have called “Finance”.)
3.) Change label of the box in the main area from “<h2>Finance</h2>” to “<h3>Featured</h3>”. (However, this should semantically tie up to the “Finance” Navigation Tab.)
4.) Make any new boxes in the Right Margin <h3>'s. (Again, semantically these should tie up to the “Finance” Navigation Tab.)
Visually this seems really straight-forward.
But sematically, I’m afraid that browsers won’t know what I’m doing… (Especially since there is the concept of an “active tab” and “inactive tabs”.)
Hope that makes sense?!
So, is it possible to do what I just tried to describe?? :-/
Sincerely,
Debbie