I recently had a thought of utilizing the unordered list element to represent a list of composite content (such as a product list with details or an image list with captions).
For example:
<ul>
<li>
<img src="awesometoaster.png" alt="toaster">
<p>Awesome Toaster<p>
<p>This is an available product</p>
<a href="#">Buy Now</a>
</li>
</ul>
I have looked into example usages of the element, however many provide very basic one level examples.
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
To me, the first example is a logical list of products and would make sense to utilize an unordered list. Would this be a semantic choice to represent this type of content or is there a more appropriate element choice?
First of all : yes, using unordered list makes sense. But you might want to style it a bit with css in order to get a better visual than bullet lists.
So, my real advice is to use bootstrap and its grid system, which is responsive and easy to use. Bootstrap has a lot of html classes that will style your content in a classical and pretty way. You can then add your own css to get exactly what you want, but bootstrap gives you quick and easy basics.
Yes, unordered list is very useful in this case. But merely an unordered list looks not so attractive.
So go for Cascading style sheets(CSS) which is very simple and more attractive reusable styling classes can be done. More attractive web designs are possible. If you are new to it then take this tutorial – HTML & CSS. This is really helpfull in learing the basics of web design