Comments on: HTML5: The nav element http://www.webteacher.ws/2009/07/09/html5-the-nav-element/ Tips, web design book reviews, resources and observations for teaching and learning web development. Wed, 08 Feb 2012 16:58:53 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Lars Gunther http://www.webteacher.ws/2009/07/09/html5-the-nav-element/comment-page-1/#comment-6121 Lars Gunther Fri, 10 Jul 2009 08:02:15 +0000 http://www.webteacher.ws/?p=2855#comment-6121 Looking at the actual links in your example they seemed to represent site navigation, not a sidebar navigation... I suppose the links you have to the right with the heading CATEGORIES could be a nav-element, within an aside. I still think it would be appropriate to have the heading inside the nav-tags, though. Looking at the actual links in your example they seemed to represent site navigation, not a sidebar navigation…

I suppose the links you have to the right with the heading CATEGORIES could be a nav-element, within an aside. I still think it would be appropriate to have the heading inside the nav-tags, though.

]]> By: vdebolt http://www.webteacher.ws/2009/07/09/html5-the-nav-element/comment-page-1/#comment-6118 vdebolt Fri, 10 Jul 2009 01:49:22 +0000 http://www.webteacher.ws/?p=2855#comment-6118 I saw that aside was "tangentially related" but I also saw someone's HTML5 tutorial where it was used like a sidebar div and contained a nav element. Some confusion might come from the use of the word "sidebar" in this in the working draft. "The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography." I saw that aside was “tangentially related” but I also saw someone’s HTML5 tutorial where it was used like a sidebar div and contained a nav element.

Some confusion might come from the use of the word “sidebar” in this in the working draft. “The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”

]]> By: Lars Gunther http://www.webteacher.ws/2009/07/09/html5-the-nav-element/comment-page-1/#comment-6116 Lars Gunther Thu, 09 Jul 2009 22:52:12 +0000 http://www.webteacher.ws/?p=2855#comment-6116 Short answer. The nav element is basically just a more semantic div. It can be nested, although it does not need to. The problem I saw in your original version was not that nav was nested per se, but that it should not be nested inside aside. Aside should be "tangentially related" to the article (or something like that). Like a quick facts box, pull quotes or specific read more links related to the article. I think this article explains the new structural elements best: http://www.alistapart.com/articles/previewofhtml5 Note, however, that it is slightly wrong when discussing header, since a new element, hgroup, is better suited for some of the use cases. (And, no, I don't know why blockquote is not deemed worthy of being used for pull quotes...) Short answer. The nav element is basically just a more semantic div. It can be nested, although it does not need to.

The problem I saw in your original version was not that nav was nested per se, but that it should not be nested inside aside.

Aside should be “tangentially related” to the article (or something like that). Like a quick facts box, pull quotes or specific read more links related to the article.

I think this article explains the new structural elements best: http://www.alistapart.com/articles/previewofhtml5

Note, however, that it is slightly wrong when discussing header, since a new element, hgroup, is better suited for some of the use cases.

(And, no, I don’t know why blockquote is not deemed worthy of being used for pull quotes…)

]]> By: vdebolt http://www.webteacher.ws/2009/07/09/html5-the-nav-element/comment-page-1/#comment-6115 vdebolt Thu, 09 Jul 2009 16:12:40 +0000 http://www.webteacher.ws/?p=2855#comment-6115 Lars, I removed the aside based on your suggestion. However, I've been searching Google for some explanation as to how the semantic elements such as nav can be nested and I'm not finding much helpful information. Are you saying that a nav element never needs to be nested? If that's the case, I may have further changes to make. Lars, I removed the aside based on your suggestion. However, I’ve been searching Google for some explanation as to how the semantic elements such as nav can be nested and I’m not finding much helpful information. Are you saying that a nav element never needs to be nested? If that’s the case, I may have further changes to make.

]]> By: Lars Gunther http://www.webteacher.ws/2009/07/09/html5-the-nav-element/comment-page-1/#comment-6112 Lars Gunther Thu, 09 Jul 2009 14:17:19 +0000 http://www.webteacher.ws/?p=2855#comment-6112 OK, your WP-install butchered that comment. The idea was that you should put the nav-tags where you have the aside-tags now, enclosing the whole block, including the heading. <abbr><em><abbr><em>Lars Gunthers last blog post.. <a href="http://www.keryx.se/blogg-55" rel="nofollow">Piratpartiet liknar Humanisterna</a></em></abbr></abbr></em> OK, your WP-install butchered that comment. The idea was that you should put the nav-tags where you have the aside-tags now, enclosing the whole block, including the heading.

Lars Gunthers last blog post.. Piratpartiet liknar Humanisterna

]]> By: Lars Gunther http://www.webteacher.ws/2009/07/09/html5-the-nav-element/comment-page-1/#comment-6111 Lars Gunther Thu, 09 Jul 2009 14:14:18 +0000 http://www.webteacher.ws/?p=2855#comment-6111 I'm sorry to say this, Virginia, but I actually believe that you should no wrap your navigation in aside. And it is really not necessary either. This is ok (hoping the pre-tag will work): The Navigation <a href="/" rel="nofollow">Home</a> <a href="/software" rel="nofollow">Software</a> <a href="/support" rel="nofollow">Support</a> <a href="/about" rel="nofollow">About</a> I’m sorry to say this, Virginia, but I actually believe that you should no wrap your navigation in aside.

And it is really not necessary either. This is ok (hoping the pre-tag will work):

The Navigation

Home
Software
Support
About

]]>