A solução do professor indicou a utilização da tag ul (unordered list) e da tag img dentro do html, mas durante o curso fomos orientados a utilizar o recurso background-image no css.

Opinião do professor:

<div class="container">
  <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
  <ul class="portfolio">
    <li>
      <a href="http://bmw.com">
        <figure>
          <img src="img/bmw.png" alt="Site da BMW">
            <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
        </figure>
      </a>
    </li>
(...)

Tenho 3 perguntas:

1. Qual a justificativa para utilizarmos a tag img no html neste caso ao invés da propriedade background-image no css?
2. Como deveria ser o código se utilizássemos background-image no css?
3. Seria incorreto ou não recomendável utilizar div no lugar de ul?

Grande abraço