5603 sujets

Sémantique web et HTML

Cette synthaxe est bonne ?

Bonjour,

J'aimerais savoir si il n'y a pas d'erreur d'accessibilité ou de sémantique dans ce code, si les listes sont bien intégrées :

                    <ul>
                        <li>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                                <h4>Africa Holidays</h4>
                                <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance <br />and variety of wild animals make it 
                                <br />one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        </li>
                        <li>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        </li>
                        <li>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        </li>
                        <li>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        </li>
                        <li>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        </li>
                        <li>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        </li>
                    </ul>


Merci
Modifié par Chok71 (05 Oct 2010 - 17:17)
Administrateur
Bonjour,

à moins de cas particuliers absents du code que tu présentes, tu peux supprimer le div.block et déplacer cette classe block sur le li directement. Smiley cligne
EDIT: ou supprimer cette classe. Tu peux cibler les li par "li" tout simplement, pas besoin de classe. Ou une classe "block_container" sur le ul pour différencier cette liste des autres.
Modifié par Felipe (05 Oct 2010 - 18:19)
La syntaxe semble correcte. L'orthographe un peu moins (syntaxe, et pas *synthaxe). Smiley cligne

Hors contexte, on ne peut pas dire si l'utilisation des H4 (plutôt qu'un niveau de titre différent, H3 ou H2 par exemple) est correcte.

Le code HTML est peut-être un peu lourd:
- le DIV.block est-il nécessaire?
- l'image contour-photo.png devrait pouvoir être passée en image de fond dans le CSS.
La lourdeur du code HTML est peut-être nécessaire, mais j'essaierais de me rapprocher de quelque chose de simple comme ceci:
<li> 
  <img class="photo" src="..." alt="" width="212" height="98" />
  <h4>Titre</h4> 
  <p>Paragraphe d'intro.</p>
</li>
Bonjour,

Merci, je vais corriger ça. Smiley cligne

Par contre pour l'image "contour-images" elle doit obligatoirement être mis dans le code HTML, en fait c'est une image qui contient un contour et qui doit être placer au dessus (avec un z-index : 1) des images normales pour l'effet arrondis. Avec CSS ça passerait obligatoirement derrière (vu que ça sera mis en background).

Ca ressemble à ça : http://c.imagehost.org/0509/Presse-papiers-1.jpg

Les images d'éléphants sont carrées, mais il y a une image de contour qui est placer par dessus.
Chok71 a écrit :
Par contre pour l'image "contour-images" elle doit obligatoirement être mis dans le code HTML

Erreur. Smiley smile

Deux solutions:

1. Utiliser un pseudo-élément :before ou :after, positionné en absolu et avec une image de fond.
2. Utiliser un élément HTML vide, positionné en absolu et avec une image de fond.

Si tu choisis la deuxième solution (la seule à être compatible IE7, pour info), tu peux opter pour un code HTML comme suit:
<li>
  <span class="photo-contours"></span>
  <img class="photo" src="..." alt="" width="212" height="98" />
  <h4>Titre</h4>  
  <p>Paragraphe d'intro.</p> 
</li>

C'est pas idéal mais ça limite les ajouts au code HTML, et ça t'évite d'écrire le chemin vers cette image de décoration dans ton code HTML.
Modifié par Florent V. (07 Oct 2010 - 15:41)
Salut,

Merci pour la solution, je vais essayer (en espérant que ça passe sur IE6). Smiley smile
Modifié par Chok71 (08 Oct 2010 - 22:04)
Sujet clos
Aller à