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?

unor unor · Accepted Answer · 2018-03-02T10:42:02

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)

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

1 Answers