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

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

围绕什么类型的元素像搜索区域应该包裹在一起有一些共识吗？

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

标记是这样的：

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

感谢您的想法。

来源

2010-12-22 SimplGy

我知道这个问题已经有一个选定的答案，但它在我的谷歌搜索排名这么高的“语义搜索形式”，我觉得有必要做出贡献什么，我认为是一个稍微好一点的答案从语义上和从标准的角度来看。

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

当然，我做了一系列的假设，人口的HTML一些默认值（动作，获取ID和输入的姓名等），并与无类名的元素（我总是倾向于使用通用元素名称或天堂禁止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 - 我发现将输入包装在标签中以便不要忘记将它们连接起来更容易）。所有号召性用语元素都应该有一个标题（用于搜索引擎优化和可用性，以加强用户即将做出之前的行动）等。

来源

2016-07-18 22:02:51 ViorelMocanu

如何：

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

来源

2010-12-22 13:53:33 antonj

我以前曾经这样做过，但Safari移动版添加了一个不可逆转的6像素在BUTTON和INPUT type = submit元素上填充左侧和右侧，所以我使用了fakey按钮。 – SimplGy 2010-12-22 21:00:33

你的问题是关于语义的，风格可以通过CSS来改变（http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/）没有表单和输入的语义[type = submit]元素你会失去很多良好的默认浏览器行为 – antonj 2010-12-22 23:20:33

那么``标签呢？ – takeshin 2010-12-26 16:56:09

HTML5规范说这对section元素：

角色必须是区域，文档，应用，contentinfo，主，搜索， alert，dialog，alertdialog， status，or log

所以我会使用它。

来源

2010-12-22 13:57:42

<section role="search">

的role属性是ARIA landmark：

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

来源

2013-02-04 16:29:34 Kornel

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

回答

相关问题