I have a website which I maintain for my brother in law who is a pianist. I made the website a long time ago when I was a lot less experienced in web design and development, and recently he requested that I make the website responsive, so that it works well on phone and tablets too. So, using bootstrap I am doing this and am also taking the opportunity to overhaul a lot of the layout which is not really that good... more utilitarian than anything.
On the website there is a page about his composition work and included on this page is various media sampling his work. So, most of this media consists of audio clips. There is a list of compositions, and some have audio clips beside them. The solution I came up with at the time for laying these out was to use a definition list. With composition titles in
<dt> and audio clips under
Unfortunately this makes things a little awkward, and it's not so obvious how things go together. Some compositions come in several parts, and to label them all I have done is text next to them like this
<dd><audio src="part1.mp3" controls>Your browser does not support the HTML audio tag</audio> - Part 1</dd>
Of course, listing like this makes it harder to read and understand what belongs to what. I was wondering if there were any best practices for laying out and labeling media in a case like this, as I cannot find any specific examples applicable to this situation around on the net and I am not sure exactly what else I can do... short of a lot of divs.
(since I linked the site earlier, if there are any other suggestions I am open to constructive criticism in other areas. I am more a programmer than a designer so I know it's not perfect.)