Error: Attribute audio_url not allowed on element li at this point

Question

I have created an audio playlist. It's an unordered list with several list items. The <li> element defines the list items that are part of the unordered list. Each list item consists of an audio url and an image url.

<ul class="playlist list-group list-group-flush">

     <li audio_url="music/Intro.mp3" img_url="images/isos_ep.jpg" 
     class="active 
     list-group-item playlist-item">
     Intro</li>

     <li audio_url="music/Castaway.mp3" class="list-group-item playlist-
     item" 
     img_url="images/isos_ep.jpg">
     Castaway</li>

     <li audio_url="music/Robert_Smith.mp3" class="list-group-item playlist-
     item" img_url="images/isos_ep.jpg">
     Robert Smith</li>

     <li audio_url="music/Stolen_Youth.mp3" img_url="images/isos_ep.jpg" 
     class="active list-group-item playlist-item">
     Stolen Youth</li>
     <li audio_url="music/Red_Vines.mp3" class="list-group-item playlist-
      item" 
     img_url="images/isos_ep.jpg">
     Red Vines</li>

     <li audio_url="music/On_the_Attack.mp3" class="list-group-item 
     playlist-
     item" img_url="images/south_migration.jpg">
     On the Attack</li>

     <li audio_url="music/South_Migration.mp3" 
     img_url="images/south_migration.jpg" class="active list-group-item 
     playlist-item">
     South Migration</li>

</ul>

The code works great with no issues, but as I understand it, these are not valid attributes allowed with list items. List items can have valid attributes of type , and value , as well as global and event attributes. Consequently, the attributes I have included lead to validation errors. I have tried many fixes- such aswrapping the audio and img urls as <div> or as <audio> but without any success.

When I check it on the W3C validator, I get the error message:

Error: Attribute audio_url not allowed on element li at this point.

I am not sure how to fix it. Any suggestions?

Answer 1

If you want to keep your markup like that, you could add data- as prefix to your invented attributes:

<li data-audio_url="music/Castaway.mp3" 
    class="list-group-item playlist-item" 
    data-img_url="images/isos_ep.jpg">
Castaway
</li>

But it would typically be better to use semantic markup. For example, something like this:

<li>
  <button type="button" data-audio_url="music/Castaway.mp3">
    <img src="images/isos_ep.jpg" alt="">
    Castaway
  </button> 
</li>

(assuming that a click adds the track to the playlist)