julie1007 Posté 11 Juillet 2012 Posté 11 Juillet 2012 J'essaye depuis quelques temps déjà de faire un site en HTML5 avec toutes les informations que j'ai pu récupérer sur internet. Aujourd'hui je suis arrivé à terminé ma page, l'affichage est ok dans IE et MOZILLA mais je suppose qu'il y a des incohérences dans ma page. Mon problème ? Savoir ou afin de trouver les solutions pour avoir le fichier le plus propre possible en HTML5. Si vous pouvez m'aider. Ci-dessous le code ma page (dès la partie body). <body><div class="center"><!-- START CENTER PAGE--> <div id="container"><!-- START CONTAINER--> <!-- START SECTION LOGO MENU--><section> <header> <figure> <a id="logo" title="Homepage" href="index.html"><img src="images/logo.png" alt="Accueil" width="220" height="60"/></a> </figure> <nav> <div id="main_navigation" class="main-menu"> <ul> <li><a href="index.html" title="Page d'accueil">ACCUEIL</a></li> <li><a href="#">MENU 1</a> <ul> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> </ul> </li> <li><a href="#">MENU 2</a> <ul> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> <li><a href="#">LIEN</a></li> </ul> </li> <li><a href="#">MENU 3</a> <li><a href="#">MENU 4</a></li> <li><a href="#">MENU 5</a></li> </ul> </div> </nav> <div class="horizontal-line-prog"></div> </header></section><!-- END SECTION LOGO MENU--><!-- START SECTION ONE LOGO EVENT INFOS --><section class="one"> <div class="one-third"> <figure> <img src="images/photo01.jpg" width="465" height="110" alt="photo01"> </figure> </div> <div class="one-third"> <p></p> </div> <div class="one-third last"> INFORMATIONS <ul class="checklist-list"> <li>info 1</li> <li>info 2</li> <li>info 3</li> </ul> </div> </section><!-- END SECTION ONE LOGO EVENT INFOS --> <!-- START SECTION ONE SLIDE --><section class="one"> <div id="slides"><!-- START DIV SLIDES--> <div class="slides_container big-slider"> <div class="slide"> <img src="images/slideshow/slide-02.jpg" alt=" " width="950" height="350"/> </div> <div class="slide"> <img src="images/slideshow/slide-02.jpg" alt=" " width="950" height="350"/> </div> <div class="slide"> <img src="images/slideshow/slide-02.jpg" alt=" " width="950" height="350"/> </div> </div> </div><!-- END DIV SLIDES--></section><!-- END SECTION ONE SLIDE --> <!-- START SECTION ONE PRESENTATION PROGRAMME --><section class="one"> <H1>TITRE PROGRAMME</H1> <p>TEXTE DESCRIPTIF</p> <!-- TITRE PROGRAMME--> <H2>TITRE 2</H2> <!-- TITRE --> <!-- DETAIL PROGRAMME--> <div class="one-half"> <H3>TITRE 3</H3> <ul class="prog-list"><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li> </ul> </div> <div class="one-half last"> <H3>TITRE 3</H3> <ul class="prog-list"><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li> </ul> </div> <!-- END PROGRAMME--> <!-- TITRE BUDGET --> <H2>TITRE 2</H2> <!-- TITRE --> <!-- START TABLEAU --> <center> <table> <tr> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> </tr> <tr> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> </tr> <tr> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> </tr> <tr> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> <th>TABLEAU</th> </tr></table> </center> <!-- END TABLEAU --> <!-- START SECTION ONE TARIF INCLUT OPTION --> <div class="one"> <div class="one-half"> <H4>TITRE 4</H4> <ul class="coche-list"><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li> </ul> </div> <div class="one-half last"> <H4>TITRE 4</H4> <ul class="coche-list"><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li><li>DETAIL</li> </ul> </div> </div> <!-- END SECTION ONE TARIF INCLUT OPTION --></section><!-- END SECTION ONE PRESENTATION PROGRAMME --> <!-- START SECTION ONE FOOTER --> <section> <footer> <!-- START WRAPPER--> <div id="footer-wrapper"> <!-- START FOOTER CONTAINER BF--> <div id="footer-container"> <div id="footer"><!-- START FOOTER--> <div class="one-fourth"> <h4>Nos autres sites</h4> <ul class="social-links"> <li><a href="#">http://www.blablabla.com</a></li> <li><a href="#">http://www.blablabla.com</a></li> <li><a href="#">http://www.blablabla.com</a></li> <li><a href="#">http://www.blablabla.com</a></li> <li><a href="#">http://www.blablabla.com</a></li> </ul> </div> <div class="one-fourth"> <h4>Flash Code</h4> <a href="images/flashcode.png" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="images/flashcode.png" alt=" " width="170" height="169" class="portfolio-img pretty-box"/></a> </div> <div class="one-fourth"> <h4>Réseaux Sociaux</h4> <ul class="social-links"> <!-- SOCIAL LINKS STARTS--> <li><img src="images/icons/facebook.png" width="16" height="16" alt="#"/><a href="#">Page Facebook</a></li> <li><img src="images/icons/twitter.png" width="16" height="16" alt="#"/><a href="#">Page Twitter</a></li> <li><img src="images/icons/rss.png" width="16" height="16" alt="#"/><a href="#">Our RSS Feeds</a></li> <li><img src="images/icons/vimeo.png" width="16" height="16" alt="#"/><a href="#">Our Vimeo Videos</a></li> </ul> </div> <div class="one-fourth last"> <h4>Contact</h4> <p>NOM<br /> ADRESSE 1<br /> ADRESSE 2 </p> <ul class="social-links"> <li>Tel.: <a href="#">+ 33 (0)0 00 00 00 00</a></li> <li>Fax : <a href="#">+ 33 (0)0 00 00 00 00</a></li> <li>Mail : <a href="#">info_AT_email.com</a></li> </ul> </div> </div><!-- END FOOTER--> </div> <!-- END FOOTER CONTAINER--> <!-- START FOOTER CONTAINER BM--> <div id="footer-container2"> </div> <!-- START FOOTER CONTAINER BM--> </div> <!-- END WRAPPER--> <!-- START COPYRIGHT WRAPPER --> <div id="copyright-wrapper"> <div id="copyright"> <figure> <a id="copyright-logo" title="Homepage" href="#"><img src="images/logo-bottom.png" alt="Accueil" width="185" height="50"/></a> </figure> <div class="right"> <nav><p> <a href="#">Accueil</a> / <a href="#">Société</a> / <a href="#">Nos Clients</a> / <a href="#">Liens</a> / <a href="#">Newsletter</a> / <a href="#">Site Map</a> / <a href="#">Contact</a> </p></nav> <span>© Copyright 2012. Tous droits réservés .com</span> </div> </div><!-- COPYRIGHTS ENDS--> </div> <!-- END COPYRIGHT WRAPPER --> </footer> </section><!-- END SECTION ONE FOOTER --> </div><!-- END CONTAINER--> </div> <!-- END CENTER PAGE--></body>
Ernestine Posté 11 Juillet 2012 Posté 11 Juillet 2012 Salut Julie, Deux remarques : - la balise <center> n'est pas valide HTML5. Pour centrer les éléments, il faut le faire avec des styles CSS. - tu devrais utiliser l'attribut role pour les balises HTML5, afin de mieux spécifier leur rôle, par exemple role="banner" pour le header principal, role="navigation" pour le menu principal de navigation, role="contentinfo" pour le footer principal, role="main" pour la section principale du document, etc... Sinon ça a l'air bien
julie1007 Posté 11 Juillet 2012 Auteur Posté 11 Juillet 2012 Salut Julie, Deux remarques : - la balise <center> n'est pas valide HTML5. Pour centrer les éléments, il faut le faire avec des styles CSS. - tu devrais utiliser l'attribut role pour les balises HTML5, afin de mieux spécifier leur rôle, par exemple role="banner" pour le header principal, role="navigation" pour le menu principal de navigation, role="contentinfo" pour le footer principal, role="main" pour la section principale du document, etc... Sinon ça a l'air bien Merci Ernestine ;-) Si ca à l'air bien wouah tant mieux, par contre je vais me pencher sur l'attribut role car j'ai pas tout compris. Merci
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant