Une question d'existence

Display : none ou ... quelque chose

La propriété display du style d'un élément ordonne à cet élément de générer un certain type de box(es).
Sa valeur par défaut : display:inline;.
Avec la valeur none, l'élément ne génère rien du tout.
C'est en français : NON Existence :)

(Note : il n'y pas encore de span à gauche, il y en aura un dès que vous aurez cliqué).

C'est comme pour la propriété visibility, alors ?
Pas du tout.
Avec visibility, le span est créé d'entrée de jeu, visible ou hidden sa place est réservée dans le flux.
Avec display, le span débarque au moment où on lui supprime le none pour une autre valeur (ici, c'est inline mais il y a d'autres possibilités, un paquet, voyez au W3C).
On voit d'ailleurs très bien qu'il déplace le contenu qui le suit dans le flux : il s'intercale.

Pour le reste, c'est pareil : le robot lira le contenu du span inexistant en display:none.

Comme d'habitude, une classe de style suffit :
.lespann {display:none;}

Pour la mise en oeuvre :
<span class="lespann">Texte à cacher</span>

Les tricheurs utilisent le plus souvent un div, mais tous les éléments visibles sont concernés.
Comme ils sont perfectionnistes, ils ajoutent souvent un style="height:1px;".
Quitte à faire dans la triche minable, pourquoi pas ?
Au moins, cela permet la vérification automatique (none+1px=triche dans 99.999 % des cas).

Pareil pour la méthode hidden.

La propriété display paramétrée à none a des utilisations parfaitement légitimes, par exemple le tassage du contenu pour des menus ou des FAQ (on affiche les titres que l'on déploie sur clic).

Un exemple d'utilisation légitime.