包装搜索区域的最佳语义方式是什么？ [已关闭]

Question

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

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

• 它应该是一个 NAV，因为搜索是一种导航方法？
• 它应该是一个部分吗，因为它是页面的一个谨慎部分？
• 它应该是一个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），但您应该适应自己的需求。

例如，在上述出色贡献的基础上进行了一些补充：任何形式的第一个子级都应始终是

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

HTML5 规范对于

section

元素是这么说的：

角色必须是区域、文档、 应用程序、内容信息、主要、 搜索，警报，对话框，alertdialog， 状态，或日志

所以我会用它。

Answer 3

怎么样：

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

Answer 4

<section role="search">

role

属性是ARIA地标：

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

Answer 5

从 2023 年 3 月开始，

<search>

元素已进入规范：

搜索元素代表文档或应用程序的一部分 包含一组表单控件或与执行相关的其他内容 搜索或过滤操作。这可能是网络搜索 网站或应用程序；一种搜索或过滤搜索结果的方法 当前网页；或全球或互联网范围内的搜索功能。

来源：https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element

使用示例：

<header>
  <h1>Movie website</h1>
  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

来源： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search

相当好的支持：caniuse.com（目前 79%）