按鈕列表的語義 HTML 方式？

Question

假設我有一個按類別過濾內容的按鈕列表

<nav>
  <p>Please select your category:</p>
  <ul>
    <li>
      <button>Cats</button>
    </li>
    <li>
      <button>Dogs</button>
    </li>
    <li>
      <button>Lizards</button>
    </li>
    <li>
      <button>Chupacabras</button>
    </li>
  </ul>
</nav>

<nav>元素是正確的組件嗎？ <p>應該改為標題嗎？

我知道<input>字段可以在<fieldset>內的一個組中，頂部有一個<legend> ，但這是否適用於上面的示例？

謝謝

Answer 1

你可以使用你的代碼。 但在我看來你不需要但最好不要包裹在導航標簽中。 一個 div 標簽就足夠了。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav

HTML 元素表示頁面的一部分，其目的是在當前文檔或其他文檔中提供導航鏈接。 導航部分的常見示例是菜單、目錄和索引。

<div class="filter-buttons">
  <p>Please select your category:</p>
  <ul>
    <li>
      <button>Cats</button>
    </li>
    <li>
      <button>Dogs</button>
    </li>
    <li>
      <button>Lizards</button>
    </li>
    <li>
      <button>Chupacabras</button>
    </li>
  </ul>
</div>

Answer 2

如果它是您所說的過濾器，則不應使用導航元素。 <nav>元素“代表頁面的一部分，其目的是提供導航鏈接”。 過濾器按鈕不是鏈接。

如果您要求用戶 select 從一組選項中選擇一個選項，則一組單選按鈕或一個<select>元素似乎是最合適的。 這也將允許您在語義上將字段 label 綁定到該字段。

 <label for="filter-categories">Filter by category</label>: <select id="filter-categories"> <option value="all">All Animals</option> <option value="cats">Cats</option> <option value="dogs">Dogs</option> <option value="lizards">Lizards</option> <option value="chupacabras">Chupacabras</option> </select>

但是，如果沒有進一步的上下文，很難知道。