Search code examples
htmlsemantic-markup

Are login/signup links a semantic use-case of HTML5 <menu>

Live Example

HTML5 <menu> element

HTML5:

<menu type="list">
  <li><a href="/signup/"> Sign Up </a></li>
  <li><a href="/login/"> Log In </a></li>
</menu>

I want to add a signup / login menu to my website.

  • Would using <menu> be semantic?
  • Should I use <ul> instead?

Edit: I'm using semantic HTML5. Browser support is irrelevant.

Solution

  • As I'm sure you're aware:

    The menu element represents a list of commands.

    It really just depends on how you define "list" and "commands." Are "Login" and "Sign up" commands? Or are they list items? Personally I think they're commands. A list (ul or ol) is more akin to something longer, two items just don't seem to make a list, to me. Login and Sign up seem like commands because they're what Stephen Krug, in Don't Make Me Think calls "Utilities":

    Utilities are links to important elements of the site that aren't really part of the content hierarchy.

    These are contrasted with what he calls "Sections":

    links to the main sections of the site: the top level of the site's hierarchy [navigation]

    This makes sense semantically: You use <nav> for Krug's "sections" (navigation) and <menu> for utilities or commands (Log in, Sign Up, Search, etc.)