it-swarm.it

Come usare correttamente h1 in HTML5

Quale delle seguenti è il modo corretto di strutturare una pagina:

1) h1 solo in header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

Se uso h1 esclusivamente all'interno di header del titolo del sito, ogni pagina avrà lo stesso contenuto per h1 tag. Non sembra molto istruttivo.


2) h1 in header e section, sia per il sito che per il titolo della pagina

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Ho visto anche esempi di utilizzo di h1 più di una volta, in entrambi i tag header e section. Tuttavia, non è sbagliato avere due titoli per la stessa pagina? Questo esempio mostra più intestazione e h1 tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/


3) h1 solo in section, sottolineando il titolo della pagina

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Infine, W3 sembra raccomandare di utilizzare h1 all'interno dell'elemento section principale, significa che non dovrei usarlo nell'elemento header?

Le sezioni possono contenere intestazioni di qualsiasi livello, ma gli autori sono caldamente invitati a utilizzare solo gli elementi h1 o a utilizzare elementi del grado appropriato per il livello di annidamento della sezione.

76
deb

Come dichiaro nel mio commento e citi nel W3C, h1 è un'intestazione e non un titolo. Ogni elemento di sezionamento può avere i propri elementi di intestazione. Non puoi pensare a h1 come il titolo di una sola pagina ma come l'intestazione di quella particolare sezione della pagina. Proprio come la prima pagina di un giornale, ogni articolo può avere una propria intestazione (o titolo).

Ecco un buon articolo su questo.

59
Rob

Consiglierei di usare h1 per tutto. Dimentica h2 attraverso h6.

Indietro in HTML4, i 6 livelli di titolo sono stati usati per definire implicitamente le sezioni. Per esempio,

<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>

Ora con l'elemento section, puoi definire esplicitamente le sezioni invece di dover fare affidamento sulle sezioni implicite create dal tuo browser leggendo i diversi livelli di titolo. Un browser dotato di HTML5 sa che tutto all'interno di un elemento section viene "retrocesso" di un livello nella struttura del documento. Quindi ad esempio un section > h1 è semanticamente trattato come un h2, a section > section > h1 è come un h3, eccetera.

Ciò che confonde è che i browser [~ # ~] ancora [~ # ~] creano sezioni implicite basate sul h2-h6 livelli di intestazione, ma il h2-h6 gli elementi non cambiano il loro stile. Ciò significa che un h2, indipendentemente dal numero di sezioni in cui è nidificato, verrà comunque visualizzato come un h2 (almeno in Webkit). Questo sarebbe confuso se il tuo h2 doveva essere, diciamo, un'intestazione di livello 4.

Miscelazione h2-h6 con section porta a risultati molto inaspettati. Segui semplicemente h1 e usa section per creare sezioni esplicite.

<body>
<!-- optional --><header>
    <h1>This is a top-level heading</h1>
    <p>you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.</p>
<!-- optional --></header>
<section>
    <h1>even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).</h1>
    <p>content in the subsection</p>
</section>
<section>
    <h1>Another subsection begins here, also treated like an h2</h1>
    <p>content</p>
    <h2>This is misleading. it is semantically treated like an h3.</h2>
    <p>that is because after an h1, an h2 is demoted one level. the h1 above is
        already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
    <section>
        <h1>just do this instead.</h1>
        <p>it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

Inoltre , puoi usare il <main> element . Questo elemento contiene solo informazioni specifiche della pagina e non deve includere contenuti ripetuti a livello di sito, come collegamenti di navigazione, intestazioni/piè di pagina del sito, ecc. Potrebbero esserci solo uno<main> elemento presente nel <body>. Quindi la tua soluzione potrebbe essere semplice come questa:

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>
14
chharvey

Tuttavia, non dimenticare i problemi di accessibilità. Secondo MDN , "al momento non ci sono implementazioni conosciute di algoritmo di struttura nei browser grafici o agenti utente di tecnologie assistive." Ciò significa che uno screen reader potrebbe non essere in grado di capire l'importanza relativa delle sezioni con solo <h1>. Potrebbe essere necessario più livelli di intestazione, come <h2> e <h3>.

5
Michael McGinnis