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

Question

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

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

当您进行搜索时，结果会以与上述内容类似的方式呈现：

当前的标记看起来像这样：

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

至于语义元素，我考虑过各种选择，但似乎都不是解决方案。

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

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

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

我也可以想到其他一些选项，但我认为将它们全部提及只是为了表明研究努力没有任何意义。我仍然需要同样多的帮助。我也很感激。

Answer 1

我的第一个问题是我是否应该将整个东西包裹在导航中 标签或只是浏览部分...

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

nav 元素代表页面的一部分，该部分链接到其他页面 页面或页面内的部分：带有导航链接的部分。

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

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

包含项目和对象集合的地标区域 作为一个整体，它们结合起来创建了一个搜索工具。

获取role="search"。

顶部的选项卡列表应该对带有role="tablist" 和role="tab" 的选项卡进行适当的咏叹调处理。如这个sn-p所示：

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