什麼是包裝搜索區域的最佳語義方式？

我想利用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

什麼是包裝搜索區域的最佳語義方式？

回答

相關問題