Keep semantic and things mullable via css

Question

Just working on some Spark view engine ASP.Net MVC code. Simplified example (but I've probably written same thing a few times over in similar style). Just doing of thinking..

<content name="main">
      <ul>
      <for each="var userViewModel in ViewData.Model">
        <li>
          <ul>
            <li>${userViewModel.Identity}</li>
            <li>${userViewModel.Name}</li>
            <li>${userViewModel.Email}</li>
              <!-- about to add here -->
          </ul>
        </li>
      </for>
    </ul>
</content>

Next I'm tempted to add

    <li>
<button class="edit-item-button">Edit</button>
    <button class="confirm-delete-item-button">Delete</button>
    </li>

(okay it might be cleaner than above with accessibility etc..) but along those lines. But this doesn't seem very semantic to me, and also reduced mullable-ness should I reuse a similar HTML template in a different project with different CSS/UI.

Im actually tempted... given in non JS mode read-only is fine, to dynamically add edit controls to items on page ready. Would this be a cardinal sin?