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，搜索，提醒，对话，alertdialog，状态或日志

所以我会用它。

Answer 2

我知道这个问题已经有了一个选定的答案，但它在我的Google搜索＆＃34;语义搜索表单＆＃34; 中的排名如此之高，我认为需要贡献我的内容从语言和标准的角度来看，我认为这是一个稍好的答案。

＆＃13;

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

＆＃13;

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

例如，在上面的优秀贡献之上添加了一些内容：任何表单的第一个子项应始终为<fieldset>标记并附加<legend>（可见或不可见 - {{3}所有<input>代码都应该通过<label>和for属性（https://www.w3.org/TR/WCAG20-TECHS/H71.html标记符号连接id - 我发现更容易将其包裹起来在标签中输入，以免忘记连接它们）。所有号召性用语元素都应该有一个标题（用于搜索引擎优化和可用性，以加强用户在制作之前即将进行的操作）等。

Answer 3

怎么样：

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

Answer 4

<section role="search">

role属性为ARIA landmark：

一个地标区域，其中包含一组项目和对象，这些项目和对象作为一个整体组合在一起以创建搜索工具。

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

4 个答案: