錯誤：目前，元素li上不允許使用屬性audio_url

Question

我已經創建了一個音頻播放列表。 這是一個有幾個列表項的無序列表。 <li>元素定義作為無序列表一部分的列表項。 每個列表項都包含一個音頻URL和一個圖像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>

該代碼運行良好，沒有任何問題，但是據我了解，這些不是列表項所允許的有效屬性。 列表項可以具有type和value有效屬性，以及全局和事件屬性。 因此，我包含的屬性導致驗證錯誤。 我嘗試了許多修復程序，例如將音頻和img URL包裝為<div>或<audio>但是沒有成功。

當我在W3C驗證器上檢查它時，出現錯誤消息：

錯誤： audio_url ，元素li上不允許使用屬性audio_url 。

我不確定該如何解決。 有什么建議么？

Answer 1

如果要保持這樣的標記，可以將data-作為前綴添加到發明的屬性中：

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

但是使用語義標記通常會更好。 例如，如下所示：

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

（假設點擊將曲目添加到播放列表中）