71941

HTML5 semantics for multiple nav elements?

Question:

I'm learning HTML5 and have been given a project of converting CSS Zen Gardens into a HTML5 semantic version. I've been able to convert most of it with ease, however the links / navigation at the bottom are giving me some problems. <br />What would be the best way of converting this / handling multiple navigations?

<div id="linkList2"> <div id="lselect"> <h3 class="select"><span>Select a Design:</span></h3> <ul> <!-- Links --> </ul> </div> <div id="larchives"> <h3 class="archives"><span>Archives:</span></h3> <ul> <!-- Links --> </ul> </div> <div id="lresources"> <h3 class="resources"><span>Resources:</span></h3> <ul> <!-- Links --> </ul> </div> </div>

At the moment I'm torn between thinking linkList2 should be a section, and each of the child div elements should be nav elements, or that linkList2 should be a nav, with the child div elements being sections.

Answer1:

If you make linkList2 a section then your semantics are 'here is navigation for this section'. Note that nav is already <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#sectioning-content" rel="nofollow">sectioning content</a>, so wrapping it in a section would be somewhat redundant.

Also note that <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element" rel="nofollow">the spec</a> says:

<blockquote>

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks.

</blockquote>

There's no need to put every set of links in a nav just for the sake of it. I think your approach of making linkList2 a nav would be best, though I wouldn't worry too much about making the child elements section:

<nav id="linkList2"> <div id="lselect"> <h1 class="select"><span>Select a Design:</span>

<ul> <!-- Links --> </ul> </div> <div id="larchives"> <h1 class="archives"><span>Archives:</span>

<ul> <!-- Links --> </ul> </div> <div id="lresources"> <h1 class="resources"><span>Resources:</span>

<ul> <!-- Links --> </ul> </div> </nav>

As I mentioned above, nav is sectioning content, so all the headings should really be h1 as they are all the highest level headings in their respective sections (I've changed them above). However I think it is still permissible, from a practical accessibility standpoint, to leave them as h3 if they are preceded by h2 and h1 headings in the markup.

The other approach which would be fine is:

<div id="linkList2"> <nav id="lselect"> <h1 class="select"><span>Select a Design:</span>

<ul> <!-- Links --> </ul> </nav> <nav id="larchives"> <h1 class="archives"><span>Archives:</span>

<ul> <!-- Links --> </ul> </nav> <nav id="lresources"> <h1 class="resources"><span>Resources:</span>

<ul> <!-- Links --> </ul> </nav> </div>

As I mentioned before, don't wrap in a section (or article), nav is enough.

A final point, since your question is about semantics. I know you're working on CSS Zen Garden's markup so the point is probably to have elements in your new page to correspond to all the old ones so that all the stylesheets still work, but you should know that this is <em>not</em> an example of good 'semantic markup'. Here are some things you should be aware of:

<ul><li>This markup was <a href="http://en.wikipedia.org/wiki/CSS_Zen_Garden" rel="nofollow">created in 2003</a>, so it is never going to a great example of what we <em>currently</em> consider good semantic markup .</li> <li>By design, the markup on CSS Zen Garden <em>has</em> to stay the same - it is a demo of CSS, not a demo of HTML.</li> <li>Because in <a href="http://www.onestat.com/html/aboutus_pressbox18.html" rel="nofollow">2003 IE6 was the dominant browser</a> and no-one else had really got very far with CSS3 anyway, this markup contains a lot of unnecessary extra elements as affordances for styling. Notably all the span elements within the headings and (more arguably) the child div elements lselect, larchives and lresources.</li> <li>As well as a lack of <a href="https://github.com/stubbornella/oocss/wiki/faq" rel="nofollow">OOOCSS</a>, this markup demonstrates <a href="http://www.steveworkman.com/html5-2/standards/2009/classitis-the-new-css-disease/" rel="nofollow">classitis</a> - there is no need to have multiple id and class attributes everywhere. For instance there is no need to have both an id of lselect and a class of select, instead you could just use a selector #lselect h1.</li> <li>Finally, linkList2 is a terrible id semantically. It's not on a linked list and whether or not it's the second one depends on all the rest of the markup. The ids and class names used are also part of semantic markup.</li> </ul>

Recommend

  • Ignore inherited class when serializing object
  • How do I specify the database isolation level to be used, at a high level?
  • Should we call the super class before or after we execute some code
  • c# closing sqlconnection and sqldatareader or not?
  • Can a C compiler add padding before the first element in a structure?
  • MethodNotAllowedHttpException while update record in laravel
  • C# linq to sql - selecting tables dynamically
  • PHP: How to access elements within a multidimensional associative array [closed]
  • containing a video background to a specific div
  • Angular2 linq style property accessor
  • Install imutils within ROS
  • Python Pandas - Day and Month mix up
  • How to add multi DbContext With UnitOfWork & DatabaseFactory & Generic Repository
  • kube-apiserver high CPU and requests
  • OWL Api, move class from parent A to B
  • sending emails in python weird behaviour
  • Proper Form of API request to Blogger using Java/App Engine -error 401
  • Simple Donut Chart with Raphael
  • Jquery Skill bar effect starts when you scroll to the section
  • Google Cloud dataflow : Read from a file with dynamic filename
  • How to hide 'Add To Cart' for variable products, but keep product variations visible
  • How to split a string into a list by digits? [duplicate]
  • How to convert SVG to jVectorMap format
  • remove date from DateTimePicker for Compact Framework
  • characters not allowed in DOM ids by spec, and by browser
  • Smarter Removing Unnecessary WhiteSpace CSV
  • Modifying native query cannot have named parameter bindings?
  • Use AutoIt with java applications
  • Connect to a local database from phpmyadmin with R
  • Arraylist of strings into one comma separated string
  • Query takes almost two seconds but matches only two rows - why isn't the index helping?
  • How to make Rss News Reader application in android …? [closed]
  • Set SelectedIndex of ListView in FlipView_SelectionChanged event
  • Getting the type of a “Type” in C# reflection
  • Rotating Towards Path in OpenGL
  • How to handle div that is created dynamically in a table