Getting initial to work at the top of the code?

Since the 8th link is the playbutton, there will never be a working link there anyway.

I would use an <a> tag without the href attribute, as you have it shown.

As to whether or not it should be empty, the html5 specs say this…

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

And gives this example

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

That looks like an example of how to handle the link of the current page the user is on.

So based on that I would think that text could very well represent the play button itself

<li><a>Audio Player</a></li>

Then with the z-index correction posted above the actual button will layer over the text

1 Like