font Come usare correttamente h1 in HTML5




html p (3)

Consiglierei di usare h1 dappertutto. Dimentica le h2 e le h6 .

Di nuovo in HTML4, i 6 livelli di intestazione erano 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 piuttosto che dover fare affidamento sulle sezioni implicite create dal tuo browser leggendo i diversi livelli di intestazione. Un browser dotato di HTML5 sa che tutto all'interno di un elemento della section viene "abbassato di livello" di un livello nella struttura del documento. Quindi per esempio una section > h1 viene trattata semanticamente come una h2 , una section > section > h1 è come una h3 , ecc.

Ciò che confonde è che i browser STILL creano sezioni implicite basate sui livelli di intestazione h2 - h6 , tuttavia gli elementi h2 - h6 non cambiano i loro stili. Ciò significa che un h2 , indipendentemente dal numero di sezioni in cui è annidato, apparirà comunque come un h2 (almeno in Webkit). Ciò sarebbe fonte di confusione se il tuo h2 dovesse essere, per esempio, un titolo di livello 4.

La miscelazione di h2 - h6 con la section porta a risultati molto inaspettati. h1 solo con h1 e usa la 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 l'elemento <main> . Questo elemento contiene solo informazioni specifiche della pagina e non dovrebbe includere contenuti che vengono ripetuti in tutto il sito, come link di navigazione, intestazioni / piè di pagina del sito, ecc. Potrebbe esserci un solo elemento <main> presente in <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>

Quale dei seguenti è il modo corretto per strutturare una pagina:

1) h1 solo header

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

Se uso h1 esclusivamente header come titolo del sito, ogni pagina avrà lo stesso contenuto per il tag h1 . Questo non sembra molto informativo.

2) h1 header e nella 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 anche visto esempi di utilizzo di h1 più di una volta, in entrambi i tag di header e di section . Tuttavia, non è sbagliato avere due titoli per la stessa pagina? Questo esempio mostra più tag header e h1 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 l'uso di h1 all'interno dell'elemento della section principale, vuol dire che non dovrei usarlo nell'elemento header ?

Le sezioni possono contenere intestazioni di qualsiasi livello, ma gli autori sono vivamente incoraggiati a utilizzare solo elementi h1 o a utilizzare elementi della classificazione appropriata per il livello di nidificazione della sezione.


Answer #1

Tuttavia, non dimenticare i problemi di accessibilità. Secondo MDN , "al momento non ci sono implementazioni note dell'algoritmo di schema in 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 aver bisogno di più livelli di intestazione, come <h2> e <h3> .


Answer #2

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

Ecco un buon articolo su questo.





semantic-markup