Semantic markup of navigation and search area

Question

I'm trying to learn semantic HTML5 markup by converting a simple site I once made for an old magazine. Now I've come to the navigation and search area. You should be able to select a specific article to read or search within the database. There are two tabs and when the first one is active you see the contents of the selected issue like this:

When clicking on the search tab you come to a search field, like so:

And when you've made a search the results are presented in a similar fashion to the contents above:

The present markup looks something like this:

<div id="nav">
    <div id="tabs">
        <div class="tab">Browse</div>
        <div class="tab">Search</div>
    </div>
    <div id="browse">
        <form>
            <div>
                <label>Year:</label>
                <select>
                    <option>1985</option>
                </select>   
            </div>
            <div>
                <label>Issue:</label>
                <select>
                    <option>1</option>
                </select>
            </div>
        </form>
        <div id="contents">
            <h1>Contents</h1>
            <ul>
                <li><a>Lorem ipsum</a></li>
            </ul>
        </div>
    </div>
    <div id="search">
        <form>
            <label>Search for anything:</label>
            <input type="text">
            <input type="submit" value="Ok">
        </form>
        <div id="results">
            <!--    
                <h1>Sorry, we couldn't find anything.</h1> 
                <ul>
                    <li><a>Various stuff</a></li>
                </ul>
            -->
        </div>
    </div>
</div>

As for semantic elements, I have considered various options, none of which seems like the solution.

My first problem is whether I should wrap the whole thing inside nav tags or just the browse part, or even just the contents part of the browse part. I'm somewhat inclined to consider the whole thing a single main navigational area.

As for the inner parts, I assume they could be divided into section elements, primarily a browse section and a search section. If so, it would have been nice to get the tab text into those sections as headings, but that will complicate things presentational-wise too much (I know I shouldn't worry about CSS and JS at this stage, but I do). And sections without headings seem like a bad idea.

Another option would be to regard the div#contents and the div#results as subsections. One problem with that is that the results area doesn't have any content until a search has been made.

I can think of some other options as well, but I don't see any point in mentioning them all just to show research effort. I would still need just as much help. And I'd appreciate it too.

Answer 1

My first problem is whether I should wrap the whole thing inside nav tags or just the browse part...

Looking at the definition of the nav element in the HTML5 spec

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

...tells us that it should be used for the id="browse" element. I think it should also wrap the form because it contains controls to filter these navigation items.

The id="search" element should, according to the aria role search

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

Get a role="search".

The tab list on the top should get the proper aria treatment for tabs with role="tablist" and role="tab". As shown in this snippet:

<div id="tabs" role="tablist">
    <div class="tab" role="tab" aria-controls="browse">Browse</div>
    <div class="tab" role="tab" aria-controls="search">Search</div>
</div>