html - 包装搜索区域的最佳语义方式是什么？

Question

我想利用 html5 改进的语义。我正在创建一个搜索区域，搜索区域应该有背景并包含与搜索相关的内容，例如自动完成和搜索提示。

对于像搜索区域这样的元素应该包裹在什么类型的元素中是否有一些共识？

• 它应该是 NAV，因为搜索是一种导航方法吗？
• 它应该是一个 SECTION，因为它是页面的一个隐蔽部分吗？
• 是否应该是 DIV，因为搜索相关元素的包装没有明确的语义？

标记是这样的:

<?whatElement?>
  <input type="search" placeholder="Search for a name or ID..." required />
  <a href="#" class="search button">Search</a>
</?whatElement?>

谢谢你的想法。

Answer 1

我知道这个问题已经有一个选择的答案，但它在我的谷歌搜索中对 “语义搜索表单” 的排名如此之高，我觉得有必要贡献我认为稍微有点从语义和标准的角度来看，更好的答案。

<section role="search">
    <form action="#" method="get">
        <fieldset>
            <legend>Search this website:</legend>
            <label for="s">
                <input type="search" name="s" id="s" placeholder="Search..." maxlength="200" />
            </label>
            <button type="submit" title="Search this website now">Submit</button>
        </fieldset>
    </form>
</section>

当然，我做了一系列假设并使用一些默认值(action、get、输入的 id 和名称等)填充了 HTML，并且没有元素的类名(我总是倾向于在喜欢通用的元素名称，或者，天堂禁止，ID)，但你应该适应你自己的需要。

例如，在上述优秀贡献之上的一些补充:任何形式的第一个 child 应该总是 <fieldset>标记并有一个 <legend>附加(可见或不可见 - https://www.w3.org/TR/WCAG20-TECHS/H71.html )，以及所有 <input>标签应该有一个连接 <label>通过 for 标记和 id属性(https://www.w3.org/TR/WCAG20-TECHS/H44.html - 我发现将输入包装在标签中更容易，以免忘记连接它们)。所有号召性用语元素都应该有一个标题(为了 SEO 和可用性，以强调用户在执行操作之前将要执行的操作)等。