我想利用
html5的改进语义.我正在创建一个搜索区域,搜索区域应该有一个背景并包含搜索相关的内容,例如自动完成和搜索提示.
关于什么类型的元素应该包含在搜索区域中,是否存在一些共识？
>它应该是资产净值,因为搜索是一种导航方法吗？
>它应该是一个部分,因为它是一个谨慎的页面部分？
>它应该是DIV,因为搜索相关元素的包装没有明确的语义吗？
标记是这样的：
<?whatElement?> <input type="search" placeholder="Search for a name or ID..." required /> <a href="#" class="search button">Search</a> </?whatElement?>
谢谢你的想法.
解决方法
我知道这个问题已经有了一个选定的答案,但是在我的谷歌搜索“语义搜索表单”中排名如此之高,我认为需要从标准角度出发,提供我认为稍微好一点的答案.
<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 – 我发现在标签中包装输入更容易,以免忘记连接它们).所有号召性用语元素都应该有一个标题(用于搜索引擎优化和可用性,以加强用户在制作之前即将进行的操作)等.
