HTML
Elementi di sezionamento

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
Ricerca…


Osservazioni

Gli standard HTML5 non elencano l'elemento principale come elemento di sezione.

Articolo Element

L'elemento <article> contiene contenuti autonomi come articoli, post di blog, commenti degli utenti o un widget interattivo che potrebbe essere distribuito al di fuori del contesto della pagina, ad esempio tramite RSS.

  • Quando gli elementi dell'articolo sono nidificati, il contenuto del nodo dell'articolo interno deve essere correlato all'elemento dell'articolo esterno.

Un blog ( section ) con post multipli ( article ) e commenti ( article ) potrebbe assomigliare a questo. 

<section>
    <!-- Each individual blog post is an <article> -->
    <article>
        <header>
            <h1>Blog Post</h1>
            <time datetime="2016-03-13">13th March 2016</time>
        </header>

        <p>The article element represents a self contained article or document.</p>
        <p>The section element represents a grouping of content.</p>

        <section>
            <h2>Comments <small>relating to "Blog Post"</small></h2>

            <!-- Related comment is also a self-contained article -->
            <article id="user-comment-1">
                <p>Excellent!</p>
                <footer><p>...</p><time>...</time></footer>
            </article>
        </section>
    </article>

    <!-- ./repeat: <article> -->

</section>

<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
    <p>This content should be unrelated to the blog.</p>
</footer>

Evitare l'uso non necessario

Quando il contenuto principale della pagina (escluse intestazioni, piè di pagina, barre di navigazione, ecc.) È semplicemente un gruppo di elementi. Puoi omettere <article> a favore dell'elemento <main> . 

<article>
    <p>This doesn't make sense, this article has no real `context`.</p>
</article>

Invece, sostituisci l'articolo con un elemento <main> per indicare che questo è il contenuto main per questa pagina. 

<main>
    <p>I'm the main content, I don't need to belong to an article.</p>
</main>

Se si utilizza un altro elemento, assicurarsi di specificare il ruolo <main> ARIA per interpretazione e rendering corretti su più dispositivi e browser non HTML5. 

<section role="main">
    <p>This section is the main content of this page.</p>
</section>

Gli appunti:

Fare clic qui per leggere la specifica HTML5 ufficiale per l'elemento <article>

Elemento principale

L'elemento <main> contiene il contenuto principale per la tua pagina web. Questo contenuto è unico per la singola pagina e non dovrebbe apparire altrove sul sito. I contenuti ripetuti come intestazioni, piè di pagina, navigazione, loghi, ecc. Vengono posizionati all'esterno dell'elemento.

  • L'elemento <main> dovrebbe essere usato sempre al massimo una sola volta su una singola pagina.
  • L'elemento <main> non deve essere incluso come discendente di un article , a aside , il footer , l' header o l'elemento di nav .

Nell'esempio seguente, stiamo visualizzando un singolo post sul blog (e informazioni correlate come riferimenti e commenti). 

<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>

  • Il post del blog è contenuto all'interno dell'elemento <main> per indicare che questo è il contenuto principale di questa pagina (e quindi unico nel suo genere sul sito Web).

  • I <header> e <footer> sono fratelli dell'elemento <main> .

Gli appunti:

La specifica HTML5 riconosce l'elemento <main> come un elemento di raggruppamento e non un elemento di sezione .

Aggiungere un role="main" attributo del ruolo ARIA ad altri elementi destinati ad essere utilizzati come contenuto principale è consigliato per aiutare gli interpreti che non supportano HTML5 e anche per fornire più contesto per quelli che lo fanno.

L'elemento <main> di default ha il ruolo principale e quindi non ha bisogno di essere fornito.

Clicca qui per leggere la specifica ufficiale HTML5 per l'elemento <main>

Elemento Nav

L'elemento <nav> è destinato principalmente a essere utilizzato per le sezioni che contengono i blocchi di navigazione principali per il sito Web, che possono includere collegamenti ad altre parti della pagina Web (ad esempio, ancore per un indice) o altre pagine interamente.

Elementi in linea

Quanto segue visualizzerà un insieme in linea di collegamenti ipertestuali. 

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yahoo.com">Yahoo!</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

Utilizzare gli elementi dell'elenco quando necessario

Se il contenuto rappresenta un elenco di elementi, utilizzare un elemento dell'elenco per mostrarlo e migliorare l'esperienza dell'utente.

Nota il role="navigation" , più su questo sotto. 

<nav role="navigation">
    <ul>
        <li><a href="https://google.com">Google</a></li>
        <li><a href="https://www.yahoo.com">Yahoo!</a></li>
        <li><a href="https://www.bing.com">Bing</a></li>
    </ul>
</nav>

Evitare l'uso non necessario

<footer> elementi <footer> possono avere un elenco di collegamenti ad altre parti del sito (FAQ, T & C, ecc.). In questo caso è sufficiente l'elemento footer, non è necessario avvolgere ulteriormente i collegamenti con un elemento <nav> in <footer> . 

<!-- the <nav> is not required in the <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>

<!-- The footer alone is sufficient -->
<footer>
    <a href="#">...</a>
</footer>

Gli appunti:

Aggiunta di un role="navigation" ruolo ARIA all'elemento <nav> è consigliato per aiutare i programmi utente che non supportano HTML5 e anche per fornire più contesto per quelli che lo fanno. 

<nav role="navigation"><!-- ... --></nav>

Screen Reader: (software che consente agli utenti non vedenti o ipovedenti di navigare nel sito)

I programmi utente come gli screen reader interpretano l'elemento <nav> diverso a seconda delle loro esigenze.

  • Potrebbe dare all'elemento <nav> una priorità più alta durante il rendering della pagina
  • Potrebbe ritardare il rendering dell'elemento
  • Potrebbe adattare la pagina in un modo specifico per adattarsi alle esigenze dell'utente
    esempio: rendere i collegamenti testuali all'interno degli elementi <nav> più grandi per chi ha problemi di vista.

Fai clic qui per leggere la specifica HTML5 ufficiale per l'elemento <nav>

Elemento di sezione

L'elemento <section> rappresenta una sezione generica per raggruppare il contenuto tematicamente. Ogni sezione, in genere, dovrebbe essere in grado di essere identificata con un elemento di intestazione come figlio della section .

  • Puoi usare l'elemento <section> in un <article> e viceversa.
  • Ogni sezione dovrebbe avere un tema (un elemento di intestazione che identifica questa regione)
  • Non utilizzare l'elemento <section> come "contenitore" di stile generale.
    Se hai bisogno di un contenitore per applicare lo styling, usa invece un <div> .

Nell'esempio seguente, stiamo visualizzando un singolo post sul blog con più capitoli ogni capitolo è una sezione (una serie di contenuti raggruppati tematicamente, che possono essere identificati dagli elementi di intestazione in ciascuna sezione) . 

<article>
    <header>
        <h2>Blog Post</h2>
    </header>
    <p>An introduction for the post.</p>
    <section>
        <h3>Chapter 1</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Chapter 2</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Comments</h3> ...
    </section>
</article>

Gli appunti:

Gli sviluppatori dovrebbero usare l'elemento dell'articolo quando ha senso per sindacare il contenuto dell'elemento.

Clicca qui per leggere la specifica ufficiale HTML5 per l'elemento <main>

Elemento di intestazione

L'elemento <header> rappresenta il contenuto introduttivo per il contenuto della sezione antenato più prossimo o per l'elemento radice di sezionamento. Un <header> genere contiene un gruppo di aiuti introduttivi o di navigazione.

Nota: l'elemento dell'intestazione non è un contenuto di sezione; non introduce una nuova sezione.

Esempi: 

<header>
  <p>Welcome to...</p>
  <h1>Voidwars!</h1>
</header>

In questo esempio, <article> ha un <header> . 

<article>
  <header>
    <h1>Flexbox: The definitive guide</h1>
  </header>
  <p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>

Raccomandazione proposta dal W3C

Elemento di piè di pagina

L'elemento <footer> contiene la parte footer della pagina.

Ecco un esempio per l'elemento <footer> che contiene il tag di paragrafo p . 

<footer>
    <p>All rights reserved</p>
</footer>


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow