Question

What's more semantic for organizing menus that change when you click any of their links into another menu? My idea is to have an "Edit" button and, when clicked, the buttons will change to show the proper edit actions for a text in that same page. First the user can only see the text, but when clicked on the edit button he can edit it. This is how I have it right now:

<ul>
  <li class = "displaymode">
    <a class = "edit">
      Edit
    </a>
  </li>
  <li class = "displaymode">
    <a href = "/notes/history/<?= $id; ?>">
      History
    </a>
  </li>
  ...
  <li class = "editmode">
    <a class = "save">
      Save
    </a>
  </li>
  <li class = "editmode">
    <a class = "cancel">
      Cancel
    </a>
  </li>
</ul>
<div id = "fulltext">
  <p>
    This is some demo text that is supposed to be edited by the user when they change from the display mode to the edit mode.
  </p>
</div>

Then with javascript it's simple to show/hide the classes with the editmode or displaymode. However, I have other ideas that would also work. One is having different full lists and showing/hiding the full lists:

<ul class = "displaymode">
  <li>
    <a class = "edit">
      Edit
    </a>
  </li>
  <li>
    <a href = "/notes/history/<?= $id; ?>">
      History
    </a>
  </li>
  ...
</ul>
<ul class = "editmode">
  <li>
    <a class = "save">
      Save
    </a>
  </li>
  <li>
    <a class = "cancel">
      Cancel
    </a>
  </li>
</ul>
<div id = "fulltext">
  <p>
    This is some demo text that is supposed to be edited by the user when they change from the display mode to the edit mode.
  </p>
</div>

And the last one is to just insert/remove the <li> elements with javascript. However this is not nice for translations nor for SEO. So, which way of the above or from what you've used has better semantics and why? I don't see any advantage/disadvantage from one to another of the ones shown here. From the names of the classes I think it's clear my objective, but if you need any further explanation don't hesitate to ask in the comments.

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top