Semantica dei livelli di titolo in più sezioni in HTML5

2

Non sono mai abbastanza sicuro di quale sia il modo migliore e più semantico per gestire i livelli di intestazione nel markup HTML5, quando si hanno più sezioni. Da una parte ha senso avere un'intestazione H1 come titolo di una sezione o di un articolo, ma porta a queste situazioni strane quando l'intera struttura del documento è composta da intestazioni H1.

<header>
    <h1>Site heading</h1>
</header>
...
<section>
    <h1>Section heading</h1>
    <article>
        <h1>Article heading</h1>
        ...
    </article>
    ...
    <section>
        <h1>Subsection heading</h1>
        <article>
            <h1>Subsection article heading</h1>
            ...
        </article>
        ...
    </section>
</section>

Questo è davvero il modo di farlo in HTML5? Sembra un po 'come se i tag direzionali non portassero più alcun valore semantico. Quando vedi un tag H1 in un markup, non ti dice nulla sulla posizione dei titoli nel contorno del documento.

D'altra parte, quando contrassegni i tuoi titoli gerarchicamente, come faresti prima del markup di HTML5, crea una situazione in cui un articolo ha un livello di intestazione diverso rispetto ad un altro, pur avendo lo stesso livello di una sottosezione, che non Non ha molto senso.

<header>
    <h1>Site heading</h1>
</header>
...
<section>
    <h2>Section heading</h2>
    <article>
        <h3>Article heading</h3>
        ...
    </article>
    ...
    <section>
        <h3>Subsection heading</h3>
        <article>
            <h4>Subsection article heading</h4>
            ...
        </article>
        ...
    </section>
</section>

Da quello che ho letto, capisco che il primo modo è il modo corretto in HTML5, ma non mi sembra giusto. Avere spesso un intero sito senza una singola intestazione di terzo livello sembra strano, ma potrebbe essere solo un caso di vecchie abitudini che muoiono duramente da parte mia, forse?

    
posta Viniter 27.02.2015 - 03:42
fonte

2 risposte

2

Se si utilizzano sempre elementi di sezione (ovunque siano necessari), non importa quale elemento di intestazione ( h1 - h6 ) si sceglie. L' algoritmo di struttura "calcola" il grado corretto di intestazione, che dipende il nidificazione dei tuoi elementi di sezione.

Non è "meno semantico". Non pensare alle intestazioni HTML5 come h1 - h6 , ma come h (AFAIK un elemento h non è stato aggiunto a HTML5 perché avremmo perso la compatibilità con le versioni precedenti, ma XHTML 2.0 è andato in questo modo ).

Hai due opzioni:

  • Utilizza h1 ovunque (anziché h1 , potrebbe essere qualsiasi altro elemento di titolo e persino un mix di essi).
  • Utilizza gli elementi di intestazione del rango "calcolato", come in HTML 4.01.

Vantaggi della prima opzione:

  • Puoi inserire liberamente (ad esempio da fonti esterne) e spostare sezioni, senza dover regolare il markup.
  • Puoi avere più di 6 livelli .

Vantaggio della seconda opzione:

  • Supporta i programmi utente che non hanno implementato questo algoritmo di schema.

Tieni presente che HTML5 incoraggia gli autori a utilizzare la seconda opzione.

    
risposta data 27.02.2015 - 13:51
fonte
1

Sebbene il primo modo sia "corretto", molti screen reader non lo interpretano come tale, quindi il secondo modo è più utile dal punto di vista dell'accessibilità.

Se sei preoccupato per la semantica, puoi usare il più generico HTML5 <header> elemento , che:

represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

Ad esempio:

<header>
    <header>Site heading</header>
</header>
...
<section>
    <header>Section heading</header>
    <article>
        <header>Article heading</header>
        ...
    </article>
    ...
    <section>
        <header>Subsection heading</header>
        <article>
            <header>Subsection article heading</header>
            ...
        </article>
        ...
    </section>
</section>

Essenzialmente, contiene la stessa semantica del tuo primo esempio, tuttavia l'uso annidato delle sezioni fornisce una gerarchia semantica agli elementi <header> , che non è immediatamente comprensibile dall'uso di% co_de nidificato.

La tua preoccupazione diventa quindi sullo stile, che è un problema di presentazione e può essere fatto in CSS:

header {
    font-weight: blod;
}
section > header {
    font-size:140%; /* like h1 */
}

section > section > header
    font-size:130%; /* like h2 */
}

section > section > header
    font-size:120%; /* like h3 */
}
    
risposta data 27.02.2015 - 04:55
fonte

Leggi altre domande sui tag