Semantica bootstrap e tag HTML5

Question

Sto codificando un sito usando bootstrap e html5 boilerplate insieme e sto cercando di strutturarlo nel modo più semantico possibile.

quindi la mia pagina è piuttosto semplice è costituita da un'intestazione, una sezione con due colonne e un piè di pagina.

Mi chiedo quale delle seguenti modalità sia il modo migliore per strutturare le cose semanticamente, ad esempio le parti di sezione e piè di pagina della pagina.

<div class="row"> 
    <section> 
     .... 
    </section> 
<div class="row"> 
    <footer> 
    .... 
    </footer> 
</div> 



<section> 
    <div class="row"> 
    ... 
    </div> 
</section> 
<footer> 
    <div class="row"> 
    .... 
    </div> 
</footer> 


<section class="row"> 
    ... 
</section> 
<footer class="row"> 
    ... 
</footer> 

Answer 1

L'ultima:

<section class="row"> 
    ... 
</section> 
<footer class="row"> 
    ... 
</footer> 

Il row classe è di presentazione.

Answer 2

Utilizzare i tag <article> per il contenuto principale. Se entrambe le colonne contengono il contenuto dell'articolo, è possibile utilizzare <section> s per separare le colonne.

<article> 
    <section id="part-1"> 
    <header class="section-header">...</header> 
    ... 
    </section> 
    <section id="part-2"> 
    <header class="section-header">...</header> 
    ... 
    </section> 
</article> 
<footer id="main-footer"> 
    ... 
</footer> 

E poi aggiungere quanti <div> s di cui hai bisogno come ganci per il CSS.

Non utilizzare nomi di classi che fanno riferimento a un rendering visivo specifico, come "riga". Invece, usa classi (e ID) che si riferiscono al contenuto, come "part-1" e "main-footer".