Régle de base : regarder s'il n'existe pas une balise dont la signification est plus précise tout en correspondant à la signification de son contenu.
Par exemple, un titre, c'est du texte, donc on pourait utiliser un <span> pour l'entourer. Mais un titre, c'est aussi un paragraphe. La balise <p> est plus précise donc pour un titre, ca serait préférable. (s'il y a d'autres paragraphes du moins) Mais un titre, c'est avant tout un titre, et en html, il existe 7 niveau de titre allant de <h1> à <h7> (importance décroissante du titre) L'utilisation d'une balise <h*> est donc préférable dans ce cas à l'utilisation d'un <span>.
La seconde régle à conaitre, c'est que les balises de type inline n'ont pas le droit d'encadrer une balise qui ne l'est pas. La balise <img> est de type "block". On ne peut donc pas mettre de <span> autour. Il faut donc se tourner vers une balise de type "block", la balise <div> est la balise de type block la plus générique. Reste à savoir si c'est la bonne où s'il y en a une plus précise et qui conviennet au cas en question.
Quand à savoir si c'est plus simple d'utiliser un div ou un span, je dirais que c'est exactement pareil. T'auras juste une ligne qui changera dans le css.
En fait, quand on fait des présentations en css, il faut laisser tomber l'affichage par défaut des éléments et se contenter de regarder leur signification. Il faut dire, qu'en css, on peut prendre n'importe quel élément et lui faire prendre l'affichage de n'importe quel autre. Par exemple, on peut trés bien présenter une liste <ul> sous forme de tableau ou prendre un tableau et le faire s'afficher sous forme de liste à deux niveaux.