Question

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

Screenshot

点击搜索标签时，您会进入搜索字段，如下所示：

Screenshot

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

Screenshot

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

<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"元素。我认为它也应该包装表单，因为它包含过滤这些导航项的控件。

根据aria role search

，id="search"元素应该

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

获取role="search"。

顶部的标签列表应为role="tablist"和role="tab"的标签获得适当的咏叹调处理。如此片段所示：

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

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

1 个答案: