Titre: Comment est mon HTML5 ?
Posté par: kaporal05 le le 11-07-2012 a 16:40:58
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).
Code:
<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@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> |
|
|
Titre: Re:Comment est mon HTML5 ?
Posté par: Rex le le 12-07-2012 a 12:41:28
Salut ! ;)
Tu as vraiment un bon code ! 8)
Tu peux toujours vérifier ton code sur http://validator.w3.org/ (http://validator.w3.org/) . ;D
|
Titre: Re:Comment est mon HTML5 ?
Posté par: Pti Biscuit le le 13-07-2012 a 15:38:03
ligne 38 un <li> pas fermé.
ligne 118 un <center> balise non supportée. A enlever.
Le tableau <table>
Code:
<table border="1">
<thead>
<tr>
<th>TABLEAU</th>
<th>TABLEAU</th>
<th>TABLEAU</th>
<th>TABLEAU</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
<tfoot>
<tr>
<th>TABLEAU</th>
<th>TABLEAU</th>
<th>TABLEAU</th>
<th>TABLEAU</th>
</tr>
</tfoot>
</table>
|
|
|
Titre: Re:Comment est mon HTML5 ?
Posté par: mackean le le 16-07-2012 a 10:44:45
salut,
je ne pense pas que ce soit nécessaire d'encadrer ta balise header avec une balise section.
La balise section sert à remettre à 0 certaines balises telle que les balise H1, H2,...
Pour moi, ton code est trés bon sauf:
<body>
<header></header>
soit <div> soit <section> soit <aside>
</body>
a+ |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|