5546 sujets

Sémantique web et HTML

Défi HTML: quel balisage pour cet élément?

Pages :
Voici un rendu graphique:

upload/2043-100110-defi.jpg

Votre mission, si vous l'acceptez, est de proposer un balisage HTML permettant d'obtenir ce rendu. Vous n'avez pas besoin de donner le code CSS correspondant, c'est avant tout une question de bon balisage HTML.

Contrainte: vous pouvez utiliser une seule et unique image.

À vous. Smiley smile

PS: pas de troll sur le logo, merci bien. C'est pas le sujet.
Mise à jour: et voilà la solution.
Modifié par Florent V. (10 Jan 2010 - 18:01)
Je suis sûr qu'il y a un piège... mais où ? Smiley sweatdrop 

<h1>Happy N<img src="/ie.png" alt="e" />w Year</h1> ?

Modifié par Thomas D. (10 Jan 2010 - 16:46)
<p>Happy N<span class="logo_ie_inline"></span>w Year!</p>

Non ? Humm, sémantiquement parlant, c'est pas top-top...
Il y a du bon dans ces réponses mais c'est pas encore tout à fait ça. Du moins on peut faire mieux. À suivre...
eexiT a écrit :
<p>Happy N<span class="logo_ie_inline"></span>w Year!</p>

Non ? Humm, sémantiquement parlant, c'est pas top-top...

Tu as oublié le "e"...
Florent V. a écrit :
Il y a du bon dans ces réponses mais c'est pas encore tout à fait ça. Du moins on peut faire mieux. À suivre...

Le teasing, saymal ! Smiley smile
Ben non, c'est le <span>... Celui-ci sera remplacé par l'image mais c'est pour cela que ça n'est pas sémantiquement beau car si pas d'image : pas de texte de subtitution.
Je cherche une alternative Smiley smile

Edit :

Peut-être :
<h1>Happy N<span class="logo_ie_inline"><span class="to_hide">e</span></span>w Year!</h1>


Smiley lol
Modifié par eexiT (10 Jan 2010 - 16:57)
dans le genre compliqué... Smiley lol :
<h1>
<ul>
<li>H</li><li>a</li><li>p</li><li>p</li><li>y</li><li> </li><li>N</li><li class="ie">e</li><li>w</li><li> </li><li>Y</li><li>e</li><li>a</li><li>r</li>
</ul>
</h1>


avec

li {
	display:inline;
}
.ie {
	background-image:'ie.png';
	color:transparent;
}

Modifié par pixelb (10 Jan 2010 - 16:53)
pff si on peut plus s'amuser Smiley langue
bon d'accord... moi j'aurais tendance à proposer un petit

<h1>Happy N<span class="ie">e</span>w Year!</h1>
eexiT a écrit :
Ben non, c'est le <span>... Celui-ci sera remplacé par l'image mais c'est pour cela que ça n'est pas sémantiquement beau car si pas d'image : pas de texte de subtitution.
Je cherche une alternative Smiley smile

Edit :

Peut-être :
<p>Happy N<span class="logo_ie_inline"><span class="to_hide">e</span></span>w Year!</p>

Toujours le même problème : pas d'image de pas -e (si les CSS sont activé et pas les images). Si tu tiens à utiliser une image du logo, elle doit être dans le texte puisque porteuse de contenu.
Bon alors dans ce cas :
<h1>Happy N<img src="data:image/gif;base64,R0lG...yIQAAOw=="
alt="e" title="Internet Explorer" width="x" height="x" />w Year!</h1>

C'est moche mais ça marche... Sauf sur IE < 7 qui affichera « e » il me semble Smiley smile
La solution la moins problématique en termes d'accessibilité (désactivation des CSS ou des images, restitution par les lecteurs d'écran, aides techniques et autres robots des moteurs de recherche) serait, à mon avis, la suivante :
Happy <img src="path/to/internet-explorer-logo-word-new.png" alt="New" width="x" height="y" /> Year

(x et y correspondant à la largeur et à la hauteur de l'image, cela s'entend toujours)
Modifié par Victor BRITO (10 Jan 2010 - 17:21)
Très littéralement : 
<p>Happy N<img src="..." alt="e">w Year</p>


J'aime bien la proposition de KaZhaR, que j'emploierai ainsi : 
<p><img src="..." alt="Happy New Year" /></p>
<img src="http://forum.alsacreations.com/upload/2043-100110-defi.jpg" alt="Happy New Year !" width="600" heigh="82" />
Smiley langue

Edit : grillé par KaZhaR
Modifié par Akhilleus (10 Jan 2010 - 17:31)
Une autre solution envisageable :
Happy N<span id="ie-logo">e<span></span></span>w Year

#ie-logo {
  position: relative;
}
#ie-logo span {
  background: url(path/to/ie-logo.png) no-repeat;
  width: Xpx; /* X = largeur du logo */
  height: Ypx; /* Y = hauteur du logo */
  position: absolute;
  top: 0; /* Ajustement de cette valeur si besoin est */
  left: 0; /* Ajustement de cette valeur si besoin est */
  z-index: 1;
}

Si l'image ou les CSS sont désactivées, le texte reste parfaitement lisible et c'est limpide pour les lecteurs d'écran et autres robots.
Modifié par Victor BRITO (10 Jan 2010 - 17:36)
je sens que je vais dire une connerie, mais bon ...

<h1><span>Happy N</span><span><img src="ie.logo" alt="e" width=".." height=".."/></span><span>w Year!</span></h1>

... et en même temps, je sais même pas pourquoi je dis ça !
Pages :
Sujet clos
Aller à