So I'm writing a list of todos in HTML. Some of these todos are, well, done.
<h1>TODO</h1>
<ul>
<li>I'm still to be done</li>
<li>I'm done</li>
</ul>
Now I'm wondering what the best way to mark up and style these items. When it's done, I could mark up each item with <s>
, which seems much more acceptable these days, as it's 'no longer relevant':
<li><s>I'm done</s></li>
I could go for <del>
as, in some sense, the user has edited the list and set this item for removal (kinda):
<li><del>I'm done</del></li>
I could add a class to say what this item means:
<li class="todo done">I'm done</li>
Or some combination of the three. Or something else entirely.
My concerns are accessibility and semantics - I want the markup to convey the meaning of a 'done' item.
What's the best way of doing this?
done
class solution, because its easier to implement as a toggle class.