导航和搜索区域的语义标记

Question

我正在尝试通过转换我曾经为一本旧杂志制作的简单网站来学习语义 HTML5 标记。现在我来到了导航和搜索区域。您应该能够 select 阅读或搜索特定文章的数据库。有两个选项卡，当第一个选项卡处于活动状态时，您会看到 selected 问题的内容，如下所示：

单击搜索选项卡时，您会来到一个搜索字段，如下所示：

当您进行搜索时，结果的显示方式与上述内容类似：

当前的标记如下所示：

<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>

至于语义元素，我考虑了多种选择，none其中似乎是的解决方案。

我的第一个问题是我是应该将整个内容包裹在 nav 标签内，还是只包裹浏览部分，甚至只包裹浏览部分的内容部分。我有点倾向于将整个事物视为一个主要导航区域。

至于内部部分，我假设它们可以被 div 放入 section 元素中，主要是浏览 section 和搜索 section。如果是这样，最好将选项卡文本作为标题放入这些部分，但这会使事情 presentational-wise 过于复杂（我知道在这个阶段我不应该担心 CSS 和 JS ，但是我愿意）。没有标题的部分似乎不是个好主意。

另一种选择是将 div#contents 和 div#results 视为小节。一个问题是，在进行搜索之前，结果区域没有任何内容。

我也可以想到其他一些选项，但我认为仅仅为了展示研究成果而提及它们没有任何意义。我仍然需要同样多的帮助。我也会很感激。

Answer 1

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

查看 HTML5 规范中的 definition of the nav element

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.

...告诉我们它应该用于 id="browse" 元素。我认为它还应该包装表单，因为它包含用于过滤这些导航项的控件。

id="search"元素应该根据aria role search

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

得到一个role="search".

顶部的选项卡列表应该对带有 role="tablist" 和 role="tab" 的选项卡进行适当的 aria 处理。如该片段所示：

<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>

导航和搜索区域的语义标记

Semantic markup of navigation and search area

html

semantic-markup

nav