Correct markup for a menu (not a nav)

Question

I have a list of elements that act as a menu (not a nav for a site, and I've ruled out using the menu tag as it has limited support):

<ul>
    <li><img src="open-file.png"></li>
    <li><img src="delete-file.png"></li>
    ....

When you click on each one, javascript does something.

What would be the best markup to have, should each li contain a button tag:

<li><button><img src="open-file.png"></button></li>

Or should each li be an anchor:

<li><a href="#"><img src="open-file.png"></a></li>

Or something else?

What is semantically correct here?

Answer 1

The usual rules for Unobtrusive JavaScript apply.

Start with something that works. Progressively enhance it with JS.

---

Can you fallback to a link? i.e. if the JS fails, will following a link be a sensible fallback? If so: use a link.

(<a href="#">, which is a link to the top of the page, is a bad solution for just about everything other than JS that smoothly scrolls the browser to the top of the page.)

Can you fallback to a form submission? i.e. if the JS fails, would you be able to get a similar enough effect by simply submitting a form? Use a submit button in a form.

Is there no way to fallback to something that will work without JavaScript? Use a button.

Ideally, generate that button using JS so it won't be shown to people for whom it definitely will not work.

---

<img src="open-file.png">

As an aside. The only content of your control is going to be an image, and you have to communicate what the control does to the user, so you really should have an alt attribute.

Answer 2

Semantically, it depends. You mentioned that clicking on one of the menu items will trigger some JavaScript, so I'm going to guess that the more semantic approach would be to use buttons instead of anchor tags. Here's the reasoning:

• Anchor tags are for navigating a user to a resource or document
• Buttons are for other actions, such as changing the state of the current page in some way (submitting or resetting a form, etc.)

See this article from David Walsh.

Answer 3

First, as I'm new to StackOverflow, I'm not sure if this is the proper way to do this.

Quenton's answer above is a good one. You should consider what these controls will do and use proper links for non-JS support. There's enough people that feel more comfortable having JS turned off to warrant it.

As for handling the JavaScript, classes are a good way as stated above. To expand on that, you can have several classes per element as well. For example:

<li class="MenuItem"><a herf="/path/to/action" class="MenuAction MenuAction_Open">(text or image here)</a></li>

This way you can use a class for specific menu actions while also using CSS to stylize things uniformly.

I would also recommend taking a look at JQuery. If you're going to be doing a lot of JavaScript, it makes the process much more simple.

There is a good tutorial on JQuery here: W3 Schools

Answer 4

The general consensus in the front-end dev world (IMO) is to add something like a class to your element and then apply a listener.

Have a backup link to run your action without JavaScript (if you so wish - putting #null in the href will just make it do nothing), and then add event.preventDefault(); to the events to prevent them from doing the default action of navigating to the other page so your JavaScript can run.

Example HTML:

<ul>
    <li><a href="?action=open" class="open"><img src="open-file.png" alt="Open File" /></a></li>
    <li><a href="?action=close" class="delete"><img src="delete-file.png" alt="Delete File" /></a></li>
</ul>

Example jQuery:

$('li.open').on('click', function(event) {
    event.preventDefault();
    console.log('Open clicked');
});
$('li.delete').on('click', function(event) {
    event.preventDefault();
    console.log('Delete clicked');
});

Example raw JavaScript:

document.getElementsByClassName('open')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Open clicked');
});
document.getElementsByClassName('delete')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Delete clicked');
});