2010-08-23 13 views
14

So che non è corretto per lo stile un tag <section> ma per quanto riguarda i tag <header> e <footer>. Se l'utilizzo di questi tag fornisce una marcatura più semantica, allora dovrebbero essere utilizzati, tuttavia, se non possono essere abbinati, è necessario inserire uno <div> all'interno del tag per avvolgere il contenuto e adattarlo.Styling HTML5 Elements

so che <header> può essere uno stile, ma io non sono sicuro se è giusto farlo.

Quindi la domanda è: i tag html5 devono essere in stile o uno <div> deve essere posizionato all'interno per occuparsi dello stile?

+0

Philosophycal :-) –

+4

Perché sarebbe male per lo stile di qualsiasi elemento HTML5? – Gabriel

+1

per il tag ''

: "Quando è necessario un elemento per scopi di stile o come vantaggio per lo scripting, gli autori sono incoraggiati a utilizzare l'elemento div, invece." Mi chiedevo se esistessero "regole" simili riguardo agli altri tag html5. – alexcoco

risposta

36

Nulla nelle specifiche dice che non è possibile o non si devono applicare elementi HTML5 come <section> o <article>. Dice solo che non si dovrebbe mettere un elemento HTML5 semantico da qualche parte 'per il gusto di'. Utilizzare invece <div>.

Quindi, se avete una ragione semantica per aggiungere la <section> o <article> da qualche parte, quindi con tutti i mezzi aggiungerlo E sentire anche libero per lo stile pure. Ma se si deve avvolgere una sezione del mark-up per scopi di stile (ad esempio per aggiungere un bordo o float a sinistra ecc.), Ma quella sezione non ha alcun significato semantico nel mark-up, quindi utilizzare un <div> .

Per esempio:

<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'elemento <section> è la parte principale della pagina (. Vale a dire l'elenco dei tweet) e ha anche una rubrica alla partenza che è richiesto. Ma è racchiuso in un elemento div.mainBox perché forse vuoi racchiudere un bordo attorno al breadcrumb e alle parti di sezione, es. è puramente per lo stile. Ma non c'è niente che ti impedisca di disegnare anche gli elementi <section> e <article>.

3

Non è corretto per lo stile di questi tag, ma non sono esclusivamente a fini di styling come servono una funzione semantica. Con tutti i mezzi, stile gli elementi che devi usare, ma non aggiungerli per ottenere stili che rovinano la semantica.

Detto questo si deve anche stare attenti styling loro in quanto non sono riconosciuti da tutti i browser. Ad esempio, IE6 e 7 non applicheranno gli stili in quanto non riconosceranno i nomi degli elementi. Puoi aggirare questo in IE7 usando i tag ARIA che ti permetteranno di controllare alcuni stili.