2010-08-23 5 views
14

Je sais qu'il est incorrect de mettre en forme une balise <section>, mais qu'en est-il des balises <header> et <footer>. Si l'utilisation de ces balises fournit un balisage plus sémantique, elles doivent être utilisées. Toutefois, si elles ne peuvent pas être dénommées, un <div> devra toujours être inséré dans la balise pour envelopper le contenu et le styler.Mise en forme des éléments HTML5

Je sais que <header> peut être stylé mais je ne suis pas sûr si c'est correct de le faire.

Donc la question est: Faut-il styler les étiquettes html5 ou faut-il placer un <div> à l'intérieur pour prendre soin du style?

+0

Philosophycal :-) –

+4

Pourquoi ne serait-il pas mauvais de styler n'importe quel élément html5? – Gabriel

+1

Pour la balise '

':" Lorsqu'un élément est requis à des fins de style ou pour faciliter le script, les auteurs sont encouragés à utiliser l'élément div à la place. " Je me demandais s'il y avait des "règles" similaires concernant les autres balises html5. – alexcoco

Répondre

36

Rien dans la spécification stipule que vous ne pouvez pas ou ne devez pas mettre en forme des éléments HTML5 tels que <section> ou <article>. Il dit seulement que vous ne devriez pas placer un élément HTML5 sémantique quelque part 'pour le bien de' coiffant quelque chose. Utilisez plutôt un <div>.

Donc, si vous avez une raison sémantique pour ajouter le ou quelque part <section><article>, puis par tous les moyens et l'ajouter sentir aussi libre de style aussi. Mais si vous devez envelopper une section de votre balisage à des fins de style (par exemple pour ajouter une bordure, ou flotter à gauche, etc.), mais que cette section n'a aucune signification sémantique dans votre balisage, utilisez <div> .

Par exemple:

<div class="mainBox"> 
    <nav class="breadcrumbs"> 
     <ol> 
      <li>...list of links (snip)....</li> 
     </ol> 
    </nav> 

    <section> 
     <h1>Latest Tweets From Twitter</h1> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     //... lots more Twitter posts (snip)... // 

    </section> 

</div> 

L'élément <section> est la partie principale de votre page (.-À-dire la liste des tweets) et a également un cap au début qui est nécessaire. Mais il est enveloppé dans un élément div.mainBox parce que peut-être vous voulez envelopper une bordure autour de la chapelure et des parties de la section, à savoir. c'est purement pour le style. Mais il n'y a rien pour vous empêcher de styliser les éléments <section> et <article> également.

3

Il n'est pas incorrect de styliser ces balises, mais elles ne sont pas uniquement à des fins stylistiques, car elles servent une fonction sémantique. Par tous les moyens de style les éléments que vous devez utiliser, mais ne les ajoutez pas pour atteindre les styles, ruinant ainsi la sémantique. Cela dit, vous devez également vous méfier de les styliser car ils ne sont pas reconnus par tous les navigateurs. Par exemple, IE6 et 7 n'appliqueront pas les styles car ils ne reconnaîtront pas les noms des éléments. Vous pouvez contourner cela dans IE7 en utilisant des balises ARIA qui vous permettront un certain contrôle de style.