5568 sujets

Sémantique web et HTML

[Résolu] Un(e) article / liste illustré(e) par des icônes ?

Bonjour à tous et à toutes !
Je cherche à créer un petit bloc contenant des informations de contacts :
- tél, mobile, adresse, fax etc ...
... et souhaiterais illustrer les informations en question d'icônes de mon cru placées juste avant chacuns des éléments.
Seulement voilà, tant qu'à faire j'aimerais que ce soit propre, relativement correctement pris en charge par ie6 (la clientèle est plutôt âgé) et encore mieux, avec (au moins) un soupçon de sémantiquement correct.
Mais alors je m'y prends comment ?
Un aside devant des éléments en menu ? Des span devant des paragraphes ? Quel serait le meilleur choix selon vous s'il vous plaît ?
Merci d'avance ! Et bonne journée.

PS : j'utilise html5, le script html5shiv et le reset initializr.
Modifié par didli (02 May 2012 - 01:46)
Tu veux dire tout simplement comme ça ?
<img src="monimage.png etc><p>mon paragraphe</p> ?!
Ouh là il est temps que je prenne une pause si quelque chose d'aussi simple est suffisant. Je me suis compliqué la vie ...
Bon pour ne pas en rester là :
Dans ce cas quel serait la balise conseillée pour y mettre les <img> ?
(j'ai besoin que les <img> soient regroupés dans un bloc)
Un div et c'est bon ?
Modifié par didli (02 May 2012 - 11:07)
Non je ne mettrais pas l'image via le html mais via le css...

HTML :


<p class="card" id="adress">Mon adresse....</p>
<p class="card" id="tel">Mon numero....</p>


CSS :

.card{ 
  padding: 5px 0 5px 35px;
}
#tel{
  background: url("url_de_mon_image") left center no-repeat;
}
...


Les images sont là pour la déco donc mieux vaut les intégrer via le CSS. Smiley cligne
Ah bien vu ! J'avais zappé les selecteurs multiples. Je vais pouvoir m'essayer à quelques tests mais là, je viens de réaliser que j'ai oublié de préciser que les icônes en question ne font pas partie du même bloc que les textes.
Merci bien en tout cas !
Je passe en résolu dès que j'ai passé en revue ce qui fonctionne le mieux.
Merci encore.
Si c'est une information déjà présente dans le texte, l'icone peut être en fond CSS comme suggéré par G3ronim0. Si par contre le fait de ne pas afficher les images de fond (qui en tant que décoration sont facultatives) fait perdre une information utile ou nécessaire à la compréhension, on les inclura dans le contenu avec l'élément IMG.

Dans ce deuxième cas ça peut donner:
<img src="icon-phone.png" alt="Téléphone:"> 01 23 45 67 89

(pour ce qui est du conteneur autour, SPAN ou P ou DIV ou LI ou autre, ça dépend du contenu et de comment on veut le structurer mais ça n'est pas capital...)
Modifié par fvsch (03 May 2012 - 14:32)
Merci de ta participation fvsch !
J'avais adopé la solution que tu donnes dans le deuxième cas, qui correspond correctement au mien. Merci encore à vous deux pour les informations utiles et nécessaires à ma compréhension Smiley lol
Sujet clos
Aller à