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

Question

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

关于什么类型的元素应该包含在搜索区域中,是否存在一些共识？

• 它应该是资产净值,因为搜索是一种导航方法吗？
• 它应该是一个SECTION,因为它是一个谨慎的页面部分吗？
• 它应该是DIV,因为搜索相关元素的包装没有明确的语义吗？

标记是这样的:

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

谢谢你的想法.

Answer 1

HTML5规范说明了这个section元素:

角色必须是区域,文档,应用程序,contentinfo,main, search,alert,dialog,alertdialog,status或log

所以我会用它.

Answer 2

我知道这个问题已经有了一个选定的答案,但它在我的谷歌搜索"语义搜索表单"中排名如此之高,我认为需要从标准角度出发,提供我认为稍微好一点的答案.

<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)但你应该适应自己的需要.

例如,除了上面的优秀贡献之外还有一些补充:任何形式的第一个孩子应该始终是一个<fieldset>标签并<legend>附加(可见或不可见 - https://www.w3.org/TR/WCAG20-TECHS/H71 .html),并且所有<input>标签都应该<label>通过for和id属性连接标签(https://www.w3.org/TR/WCAG20-TECHS/H44.html - 我发现将输入包装在标签中更容易为了不忘记连接他们).所有号召性用语元素都应该有一个标题(用于搜索引擎优化和可用性,以加强用户在制作之前即将进行的操作)等.

Answer 3

怎么样:

<form>
   <input type="search" name="" value="" />
   <input type="submit" value="Search" />
</form>

Answer 4

<section role="search">

该role属性是一个ARIA 地标：

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