5568 sujets

Sémantique web et HTML

Suis-je "ok" avec le HTML5 ?

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@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>

Modifié par kaporal05 (11 Jul 2012 - 16:30)
Hello.

Déjà, ça serait cool d'indenter correctement ton code, là c'est peu lisible.

Sinon, très rapidement (j'ai juste survolé) :

- Ta div.center et ta div#container semblent faire double emploi, tu peux très bien n'en avoir qu'une (à moins que l'une soit là à des fin de présentation et que tu ne puisse faire autrement).

- Je ne vois pas l’intérêt de doubler tes header et footer d'une section.

- L'utilisation de figure ne me semble pas non plus appropriée dans tes cas de figure.

- Ta hiérarchie de titres me semble bizarre, pour un document tel que le tien, tu ne devrais pas te retrouver avec des h5.
Merci Florian pour ce message.

- concernant la div.center et div#container j'ai en effet essayé d'en faire qu'une seule mais possible cela étant pour la présentation

- Je prends note pour les header et footer lorsqu'il y a déjà une section mais je pensais que c'était intéressant pour le référencement ?? (Idem pour figure)

- En effet je devrais pas me retrouver avec des H5 je vais y remédier...
kaporal05 a écrit :
mais je pensais que c'était intéressant pour le référencement ??
Strictement aucun intérêt en terme de SEO.
Modérateur
Et l'eau,

Code lu en Z. Donc première impression :

th (hum....), center (mauvaise séparation du contenu de la mise en forme), manque caption, élément en majuscule (autant garder la rigueur du xhtml)
Modifié par niuxe (11 Jul 2012 - 22:15)
Bonjour,
Quel est l'intérêt de mettre le logo dans une balise <figure> au début ? Je pensais que figure s'utilisait surtout conjointement avec caption, mais que pour mettre une image seule on pouvait se contenter de <img> comme en html 4... Peut être que j'ai mal compris ?

edit : désolé j'avais lu les réponses en diagonales, je vois donc que c'est pas moi qui débloque complètement ^^
Modifié par BlueScreenJunky (28 Jul 2012 - 10:15)
Sujet clos
Aller à