The Semantic HTML way for a buttons list?

Question

Let's say I have a list of buttons that filter content by category

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

Is the <nav> element the right component? Should the <p> be a heading instead?

I know that <input> fields can be in a group inside <fieldset>, with a <legend> on top, but is this applicable to the above example?

Thanks

Answer 1

You can use your code. But in my opinion you dont need but better you should not to wrap in a nav tag. A div tag would be enough.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

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