Comment cacher un titre (derrière un logo par exemple) ?

Le but étant, par exemple, d'afficher en mode graphique un logo ou une bannière, tout en fournissant un texte « en dur » dans le code HTML, texte qui sera visible lorsque le site est visité avec un navigateur non graphique.

Il existe plusieurs méthodes, utilisant généralement une image de fond CSS (background-image).

À noter que la règle "display: none" pose des problèmes aux lecteurs d'écran.

Le code html :

<h1>Ici le titre en texte</h1>

Le style css :

h1 {
   position: absolute;
   clip: rect(1px 1px 1px 1px);
   clip: rect(1px, 1px, 1px, 1px);
   background: transparent url("chemin/de-mon/image.jpg") scroll 0 0 no-repeat;
}

Autre possibilité, utiliser la propriété d'alinéa (text-indent) pour décaler le texte suffisamment loin à gauche, en dehors de la partie visible de la fenêtre du navigateur :

h1 {
   text-indent: -9999px;
   background: transparent url("chemin/de-mon/image.jpg") scroll 0 0 no-repeat;
}

Attention d'utiliser une valeur suffisamment élevée pour prévoir l'agrandissement des écrans…

Dans tous les cas, éviter les masquages à l'aide de "display none" ou "visibility hidden" car cette technique rend l'information inaccessible sur certains lecteurs d'écran (lire à ce sujet Remplacement d'images : halte au display none !)