[BLOG] Semantic weight in HTML navigation
I've been running into a recurring problem in my designs lately. I like the idea of navigational elements (like tabs or a breadcrumb trail) that double as a page title. The issue is that I don't know how to add semantic weight to the current page as opposed to all the other options.
For instance, look at the tabs at the top of this page. It's obvious to you, the reader, that you're on the Blogs tab right now. According to the HTML markup, however, the blog tab is no different than the others.
The navigation is in an unordered list, like this:
When you're creating a web page, you always want to keep semantic weight in mind. An H1 header is more important than an H2 header, H2 more than H3, and so on down the line, and a paragraph tag is less important than all of them. On Icrontic, the Icrontic banner is the H1 tag across the site, and the article or discussion title is in an H2 tag.
If you're looking at the Forum though, shouldn't that location be somehow conveyed semantically? Shouldn't it have more weight than the other items in the navigation list? I'm stymied as to how to do this. First, I'm not clear if you're allowed to use an H2 inside an unordered list (I'd assume not, but I couldn't find a straight-forward answer via Google) and, even if you could, the semantics would seem to indicate the header would be for that list item, not for the page.
On the Icrontic forum, the breadcrumb trail presented a similar problem, but because it isn't embedded in a list, I simple wrapped an H2 tag around the last piece of the breadcrumb trail and was done. Easy. It's the darn tabs that don't seem to offer any solution.
For instance, look at the tabs at the top of this page. It's obvious to you, the reader, that you're on the Blogs tab right now. According to the HTML markup, however, the blog tab is no different than the others.
The navigation is in an unordered list, like this:
- Tech
- Gaming
- Forum
- Blogs
When you're creating a web page, you always want to keep semantic weight in mind. An H1 header is more important than an H2 header, H2 more than H3, and so on down the line, and a paragraph tag is less important than all of them. On Icrontic, the Icrontic banner is the H1 tag across the site, and the article or discussion title is in an H2 tag.
If you're looking at the Forum though, shouldn't that location be somehow conveyed semantically? Shouldn't it have more weight than the other items in the navigation list? I'm stymied as to how to do this. First, I'm not clear if you're allowed to use an H2 inside an unordered list (I'd assume not, but I couldn't find a straight-forward answer via Google) and, even if you could, the semantics would seem to indicate the header would be for that list item, not for the page.
On the Icrontic forum, the breadcrumb trail presented a similar problem, but because it isn't embedded in a list, I simple wrapped an H2 tag around the last piece of the breadcrumb trail and was done. Easy. It's the darn tabs that don't seem to offer any solution.
0
Comments