Structure de ma page d'accueil

Bonjour!

Je travaille aujourd'hui sur un projet de site internet, très orienté SEO. Actuellement en HTML5, J'ai encore des doutes sur la composition de mes éléments: Par exemple, un bouton qui mène sur une autre page est-il contenu dans une <button> ou dans une <a>?

Voici la composition du contenu de ma page d'accueil: (Le h1 n'est pas présent sur ce bout de code mais existe bel et bien)

<section id="conteneur-principal">
 

   <!-- premiere section-->
    <section id="services">
       
    <header class="titresHome">
        <!-- span servant à insérer une icone en css grace à une typographie -->
        <span class="entete"></span>
        <h2>Services</h2>
        <p>texte</p>
    </header>
    
        <div id="serviceLegende">
            <p>texte</p>
            <p>texte</p>
             <div class="clear"></div>
        </div>
        
    <div>
        <div class="figureService radius curve">
            
            <a href="#" class="icon-iconeI illustration">
                <h3>Conception</h3>
                <span class="icon-iconeE plus"></span>
            </a>
            <p class="">texte</p>
            
        </div>
        
        <div class="clear"></div>
    </div>
    </section>



    <!-- section slider de structure différente-->
    <section id="conteneur-partenaires">
       
        <div id="partenaires">
            
            <div class="slideshow">
                <img src="img/logoswanup.png" alt="logo " width="180"/>
                <p>texte </p>
            </div>
            <div class="slideshow hide">
                <img src="img/logoswanupblanc.png" alt="logo" width="180"/>
                <p>texte</p>
            </div>
       </div>
       <a href="#" data-position="1" id="btn-prev">prec</a>
       <a href="#" data-position="1" id="btn-next">suiv</a>
        
    </section>
    



    <!-- deuxième section -->
    <section id="nous-choisir">
        
        <header class="titresHome">
       <!-- span servant à insérer une icone en css grace à une typographie -->
            <span class="entete"></span>
            <h2>Pourquoi nous choisir?</h2>
            <p>texte</p>
        </header>
        
        <div id="changeMot">
            <img src="img/braketsG.png" alt="brakets " width="54" height="149"/>
            <span>Mot qui change</span>
            <img src="img/braketsD.png" alt="brakets" width="54" height="149"/>
            <div class="clear"></div>
        </div>
        
    </section>
    



    <!-- troisième section -->
    <section id="vision">
        <!-- span servant à insérer une icone en css grace à une typographie -->
        <span class="entete"></span>
         <header class="titresHome">
            <h2>Notre vision</h2>
            <p>texte</p>
        </header>
        <article>
            <h3>Toujours présents</h3>
            <p>texte</p>
            <h3>Toujours présents</h3>
            <p>texte</p>
        </article>
        <aside>
            <h3><span>Nous vous conseillons</span></h3>
            <div class="souligner"></div>
            <p>texte</p>
            <a class="button">Découvrez</a>
        </aside>
        <div class="clear"></div>
    </section>

Dans mes sous-sections dois-je donc mettre un header suivi d'un article (comme dans le cas 3)?
Cette structure est-elle obligatoire ou une section ne peut comporter que un header par exemple (comme dans le cas 1 et 2)?
Est-ce judicieux de penser comme ça sur une page d'accueil?
Quelle influence réelle ont ces balise HTML5 sur le référencement naturel?
Avez-vous vu de grosses erreurs qui mériterait que je réécrive 5 fois le livre HTML pour les nuls à main?

Je sais que internet regorge de plein de réponses, mais parfois elle sont mal expliquées ou différentes selon les sites.. C'est pourquoi je demande ici pour être sûre de mes réponse!

Ah et je n'arrive pas à faire mes clear avec des des ::after! Du coup j'utilise

 <div class="clear"></div>

bien que ça ne soit pas très propre..

Merci d'avance pour vos réponses, à bientôt
Modifié par DrasLeona (19 May 2015 - 11:25)

Bonjour,
Pour les bases, rends-toi ici : HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav
Tu y découvriras que les balises <header> se trouvent à l'intérieur des <article> entre autres choses...
Pour les blocs suivants qui, je présume, servent à empêcher qu'un élément en position "float" ne dépasse son conteneur parent :

<div class="clear"></div>

Tu peux remplacer par un <hr class="clear"> avec le style suivant :

hr.clear {
  visibility: hidden;
  clear: both;
  height: 0;
}

Sur le plan de la sémantique c'est bien mieux !
Ah et pour l'utilisation ou pas de boutons (<button>) pour tes liens, je conseillerais de ne pas les utiliser afin de pouvoir adapter ces liens à la charte graphique de manière pérenne. Le fait d'utiliser ou pas de <button> n'a, à mon avis, aucune incidence sur l'optimisation SEO.

Salut,

Montre-nous comment tu fais tes clear avec :after, ce sera plus simple. Tu peux aussi simplement mettre un overflow: auto; sur les éléments qui contiennent des flottants.

Pour ce qui est du reste :
- N'utilise pas la balise <p> dès que tu as besoin d'écrire du texte, c'est inutile. <p> ne sert qu'à structurer des blocs de textes en différents paragraphes. Si tu n'as pas de paragraphes, tu n'as pas besoin de ladite balises.
- Ta section #conteneur-principal devrait être une div, ce serait plus pertinent. Les différentes sections sont celles qui découpent ta homepage
- N'hésites pas à utiliser des classes sur tes section (même si tu laisses l'ID, pour par exemple faire des ancres) : Il est plus pratique d'appeler des classes en CSS pour diverses raisons (notamment de poids des déclarations).