The Semantic HTML way for a buttons list?-CodePudding

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

CodePudding user response：

You can use your code. But in my opinion you dont need 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 >
  <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>

CodePudding user response：

I think all of your code is the best possible since it's the conventional way to do it. The <nav> element defines that a particular section is a navigation bar like it is in your code. The use of the <p> tag is correct since there is no other element which can replace it. The <title> tag is used only for defining the title of the page not for putting text on it. And you can use the <input> tag inside your code but since you are using HTML 5, you should use <button> instead.