HTML5 Struttura – <articolo>, <sezione> e <div> utilizzo

Buon Giorno,

Io ho appena iniziato a imparare l’HTML5 non hanno problemi, tutto sta andando alla perfezione.

Ho solo una, piccola domanda su semantici di <article>, <section> e <div> tag.

So che <div> elemento non ha alcun significato semantico – in HTML5 dovrebbe essere utilizzato principalmente per la creazione di script/styling scopi. Qui tutto è chiaro per me. Ho trovato un sacco di informazioni utili in MODO domanda: HTML5 è il nuovo tag articolo, sezione a parte. Quando devo usare il tag div?.

Tuttavia, ho alcuni problemi con <article> e <section> di utilizzo. Specifica W3C HTML5 dice che <article> tag

Specifica indipendenti, auto-contenuto, potrebbe essere una notizia, articolo, blog, post, post del forum, o altri articoli che possono essere distribuiti in modo indipendente dal resto del sito.

dove <section> tag deve essere utilizzato

Per una sezione in un documento. Quali capitoli, intestazioni, piè di pagina e altre sezioni del documento.

In teoria, tutto è chiaro. Tuttavia, durante la preparazione del codice per il mio primo sito web HTML5 ho trovato un po ‘ difficile per diversi.

Mi spiego il mio sito web della struttura:

  1. Sfondi sono aggiunti per l’elemento body. Perfettamente funzionante.
  2. Io uso 960.gs sistema di griglia in ogni mia HTML/CSS progetto. Questa volta io sto usando troppo. Come sicuramente saprete, richiede un contenitore per essere aggiunto (con una classe: container_12 nel mio caso).

Per concludere la spiegazione della mia struttura:

  1. Come contenitore principale, ho usato <div class="container_12">
  2. Il primo elemento nel documento è un <header>. Contiene pochi elementi: il cursore e la barra superiore. La barra superiore è un <section>. Due elementi figli: numero di telefono sulla sinistra e la lingua elenco sulla destra. Per tali elementi, l’ho usato <section> troppo. Per un cursore (o un breve slogan segnaposto in pagine interne) ho usato <section> tag che contiene due <section> tag: a sinistra e a destra della colonna.
  3. Come contenuto principale wrapper per homepage ho deciso di usare <section> elemento. Per le pagine interne sto usando <article> per le pagine come Su di Noi, etc. Per l’elenco blog, sto usando un <section> con un elenco di <article> all’interno del tag. Per un singolo post, sto usando <article> elemento.
  4. Ovviamente, per un piè di pagina, sto utilizzando <footer> elemento con tre <section> elementi di una colonna wrapper.

Mio layout prima della conversione in HTML5:

<div class="container_12">
    <div class="grid_12 header">
        <div class="bar grid_12 alpha omega">
            <div class="grid_6 alpha">
                Phone number
            </div>
            <div class="grid_6 omega">
                German - English - French
            </div>
        </div>
        <div class="grid_6 alpha">
            LOGOTYPE
        </div>
        <div class="grid_6 omega">
            <ul>
                navigation
            </ul>
        </div>
        <div class="grid_12 alpha omega">
            <div class="grid_6 alpha">
                Slider I col
            </div>
            <div class="grid_6 omega">
                Slider II col
            </div>
        </div>
    </div>
    <div class="grid_12 content">

    </div>
    <div class="grid_12 footer">
        <div class="grid_4 alpha">
            Footer I col
        </div>
        <div class="grid_4">
            Footer II col
        </div>
        <div class="grid_4 omega">
            Footer III col
        </div>
    </div>
</div>

Ecco il mio codice dopo la conversione in HTML5:

<div class="container_12">
    <header class="grid_12">
        <section class="bar grid_12 alpha omega">
            <section class="grid_6 alpha">
                Phone number
            </section>
            <section class="grid_6 omega">
                German - English - French
            </section>
        </section>
        <section class="grid_6 alpha">
            LOGOTYPE
        </section>
        <nav class="grid_6 omega">
            <ul>
                navigation
            </ul>
        </nav>
        <section class="grid_12 alpha omega">
            <section class="grid_6 alpha">
                Slider I col
            </section>
            <section class="grid_6 omega">
                Slider II col
            </section>
        </section>
    </header>

    <section class="grid_12 content">

    </section>
    <footer class="grid_12">
        <section class="grid_4 alpha">
            Footer I col
        </section>
        <section class="grid_4">
            Footer II col
        </section>
        <section class="grid_4 omega">
            Footer III col
        </section>
    </footer>
</div>

È il mio approccio corretto? Si potrebbe aggiungere o correggere qualcosa?

Per evitare domande: so che <section> non è un sostituto per un <div>.

InformationsquelleAutor DaveW | 2012-01-04



One Reply
  1. 7

    Beh, un modo per rispondere a questo è quello di avere uno sguardo alla struttura del documento utilizzando uno strumento come http://gsnedders.html5.org/outliner/. Si noterà che ogni sezione ha bisogno di una direzione di senso, quindi senza un po ‘ di contenuto, è difficile dire. Se ogni sezione ha un H! tag che senso, allora è di solito a destra. Se una sezione non ha bisogno di un h1 quindi è di solito sbagliato.

    Sezioni dovrebbero avere senso su di loro, senza un contesto. Un modo semplice per capire questo è quello di pensare di un feed RSS – ogni voce dell’alimentazione è come una sezione. Se vuoi aggiungere un feed RSS (o avrebbe senso in questo contesto), si tratta probabilmente di una sezione. Se è solo una colonna su un piè di pagina, quindi non avrebbe messo su un feed RSS, quindi probabilmente non è una sezione.

    Che, probabilmente sarei a fare qualcosa di simile a questo (sulla base della mia supposizione su ciò che si sta mettendo in ciascun bit). Sto aggiungendo anche il WAI-ARIA punto di riferimento dei ruoli, come sono semplici e fanno un sacco di differenza quando si utilizza un lettore di schermo.

    <div class="container_12">
        <header class="grid_12" role="banner">
            <div class="bar grid_12 alpha omega">
                <div class="grid_6 alpha">
                    Phone number
                </div>
                <div class="grid_6 omega">
                    German - English - French
                </div>
            </div>
            <div class="grid_6 alpha">
                LOGOTYPE
            </div>
            <nav class="grid_6 omega" role="navigation">
                <ul>
                    navigation
                </ul>
            </nav>
            <div class="grid_12 alpha omega">
                <div class="grid_6 alpha">
                    Slider I col
                </div>
                <div class="grid_6 omega">
                    Slider II col
                </div>
            </div>
        </header>
    
        <section class="grid_12 content" role="main">
              <!-- Not sure what goes in here? Let's assume it's the main content. -->
        </section>
        <footer class="grid_12">
            <div class="grid_4 alpha">
                Footer I col
            </div>
            <div class="grid_4">
                Footer II col
            </div>
            <div class="grid_4 omega">
                Footer III col
            </div>
        </footer>
    </div>
    • Grazie per la risposta. Il tuo codice mi ha dato un sacco di luce sulla questione. Sono d’accordo, mi è stato misunderstooding il <section> le proprietà di un elemento 🙂
    • Contento che sia stato di aiuto!

Lascia un commento