Intestazioni e sezioni

Nell'ultima sezione hai imparato che, anche se non conosci il significato delle parole in una pagina, quando gli elementi semantici forniscono al documento una struttura significativa, altri (il motore di ricerca, le tecnologie assistive, un futuro manutentore, un nuovo membro del team) comprenderanno la struttura del documento.

In questa sezione scoprirai la struttura dei documenti, ripasserai gli elementi di suddivisione della sezione precedente e contrassegnerai la struttura della tua applicazione.

Se scegli gli elementi giusti per il lavoro durante la codifica, non dovrai eseguire il refactoring o aggiungere commenti al codice HTML. Se pensi di utilizzare l'elemento giusto per il lavoro, nella maggior parte dei casi lo farai. In caso contrario, probabilmente non lo farai.

Ora che hai compreso la semantica del markup e sai perché è importante scegliere l'elemento giusto, una volta che avrai imparato a conoscere tutti i diversi elementi, in genere sceglierai quello giusto senza alcuno sforzo aggiuntivo.

Sito <header>

Innanzitutto, devi creare un'intestazione del sito. Inizia con il markup non semantico e procedi fino a trovare una soluzione valida, in modo da poter scoprire i vantaggi degli elementi di sezione e intestazione HTML.

Se non pensi alla semantica della nostra intestazione, potresti utilizzare un codice simile a questo:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Il CSS può rendere (quasi) qualsiasi markup corretto. Tuttavia, l'utilizzo di <div> non semantico per tutto crea lavoro extra. Per scegliere come target più elementi <div> con CSS, devi utilizzare ID o classi per identificare i contenuti. Il codice include anche un commento per ogni tag di chiusura </div> per indicare quale tag di apertura ha chiuso ogni </div>.

Sebbene gli attributi id e class forniscano hook per lo stile e JavaScript, non aggiungono alcun valore semantico per lo screen reader e (per la maggior parte) per i motori di ricerca.

Puoi includere attributi role per fornire la semantica e creare un buon modello di oggetti di accessibilità (AOM) per gli screen reader:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

In questo modo, almeno, viene fornita la semantica e viene consentito l'utilizzo dei selettori di attributi nel CSS, ma vengono comunque aggiunti commenti per identificare quale <div> chiude ogni </div>.

Se conosci l'HTML, non devi fare altro che pensare allo scopo dei contenuti. A questo punto, puoi scrivere questo codice in modo semantico senza utilizzare role e senza dover aggiungere commenti ai tag di chiusura:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

Questo codice utilizza due punti di riferimento semantici: <header> e <nav>.

Questa è l'intestazione principale. L'elemento <header> non è sempre un punto di riferimento. Ha una semantica diversa a seconda di dove è nidificato. Quando <header> è di primo livello, è il banner del sito, un ruolo di punto di riferimento che potresti aver notato nel blocco di codice role. Quando un elemento <header> è nidificato in <main>, <article> o <section>, lo identifica semplicemente come l'intestazione di quella sezione e non è un punto di riferimento.

L'elemento <nav> identifica i contenuti come navigazione. Poiché questo <nav> è nidificato nell'intestazione del sito, è la navigazione principale del sito. Se fosse nidificato in un <article> o <section>, sarebbe una navigazione interna solo per quella sezione. Utilizzando elementi semantici, hai creato un modello di oggetti di accessibilità (AOM) significativo. L'AOM consente allo screen reader di informare l'utente che questa sezione è costituita da un blocco di navigazione principale che può attraversare o saltare.

L'utilizzo dei tag di chiusura </nav> e </header> elimina la necessità di aggiungere commenti per identificare quale elemento ha chiuso ogni tag finale. Inoltre, l'utilizzo di tag diversi per elementi diversi elimina la necessità di hook id e class. I selettori CSS possono avere una bassa specificità; probabilmente puoi scegliere come target i link con header nav a senza preoccuparti di conflitti.

Hai scritto un'intestazione con pochissimo HTML e senza classi o ID. Quando utilizzi l'HTML semantico, non è necessario.

Sito <footer>

Codifica il piè di pagina del sito.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Analogamente a <header>, il fatto che il piè di pagina sia un punto di riferimento dipende da dove è nidificato. Quando è il piè di pagina del sito, è un punto di riferimento e deve contenere le informazioni del piè di pagina del sito che vuoi visualizzare in ogni pagina, ad esempio una dichiarazione di copyright, informazioni di contatto e link alle norme sulla privacy e sui cookie. Il role implicito per il piè di pagina del sito è contentinfo. In caso contrario, il piè di pagina non ha un ruolo implicito e non è un punto di riferimento, come mostrato nello screenshot seguente dell'AOM in Chrome (che ha un <article> con un <header> e <footer> tra <header> e <footer>).

In questo screenshot sono presenti due piè di pagina: uno in un <article> e uno di primo livello. Il piè di pagina di primo livello è un punto di riferimento con il ruolo implicito di contentinfo. L'altro piè di pagina non è un punto di riferimento. Chrome lo mostra come FooterAsNonLandmark; Firefox lo mostra come section.

Questo non significa che non devi utilizzare <footer>. Ad esempio, se hai un blog, potresti avere un piè di pagina del sito con un ruolo contentinfo implicito. Ogni post del blog può anche avere un <footer>. Nella pagina di destinazione principale del tuo blog, il browser, il motore di ricerca e lo screen reader sanno che il piè di pagina principale è il piè di pagina di primo livello e che tutti gli altri piè di pagina sono correlati ai post in cui sono nidificati.

Quando un <footer> è un discendente di un <article>, <aside>, <main>, <nav> o <section>, non è un punto di riferimento. Se il post viene visualizzato da solo, a seconda del markup, il piè di pagina potrebbe essere promosso.

I piè di pagina sono spesso il luogo in cui troverai le informazioni di contatto, racchiuse in <address>, l'elemento dell'indirizzo di contatto. Questo è un elemento che non ha un nome molto appropriato; viene utilizzato per racchiudere le informazioni di contatto di privati o organizzazioni, non gli indirizzi postali fisici.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/https/web.dev/hal.html">Hal</a> and <a href="/https/web.dev/eve.html">Eve</a></address>
</footer>

Struttura del documento

Questo modulo inizia con <header> e <footer>, poiché sono elementi di punto di riferimento (o "di suddivisione") solo a volte. Esistono diversi elementi di suddivisione più frequenti.

Un layout con un'intestazione, due barre laterali e un piè di pagina è noto come il layout del Santo Graal. Esistono molti modi per contrassegnare questi contenuti, tra cui:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Se stai creando un blog, potresti avere una serie di articoli in <main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Quando utilizzi elementi semantici, i browser possono creare alberi di accessibilità significativi. Questo aiuta a migliorare la navigazione degli screen reader. Qui, un banner e contentinfo vengono forniti tramite un elemento <header> e <footer> del sito. I nuovi elementi aggiunti qui includono <main>, <aside> e <article>; inoltre, <h1> e <nav> che hai utilizzato in precedenza e <section>, che non hai ancora utilizzato.

<main>

Esiste un singolo elemento di punto di riferimento <main>. L'elemento <main> identifica i contenuti principali del documento. Dovrebbe esserci un solo <main> per pagina.

<aside>

L'elemento <aside> è per i contenuti correlati indirettamente o tangenzialmente ai contenuti principali del documento. Ad esempio, questo documento riguarda l'HTML. Per una sezione sulla specificità del selettore CSS per i tre esempi di intestazione del sito (div, role e semantico), l'elemento aside correlato tangenzialmente potrebbe essere contenuto in un <aside>; e, come la maggior parte, il <aside> verrebbe probabilmente presentato in una barra laterale o in una casella di callout. L'elemento <aside> è anche un punto di riferimento, con il ruolo implicito di complementary.

<article>

Nell'elemento <main> abbiamo aggiunto due elementi <article>. Questo non era necessario nel primo esempio quando i contenuti principali erano solo una parola o, nel mondo reale, una singola sezione di contenuti. Tuttavia, se stai scrivendo un blog, come nel nostro secondo esempio, ogni post deve essere in un <article> nidificato in <main>.

Un <article> rappresenta una sezione di contenuti completa o indipendente che, in linea di principio, è riutilizzabile in modo indipendente. Pensa a un articolo come a un articolo di giornale. Nella stampa, un articolo di notizie su Jacinda Ardern, primo ministro della Nuova Zelanda, potrebbe essere visualizzato solo in una sezione, forse nelle notizie dal mondo. Sul sito web del giornale, lo stesso articolo di notizie potrebbe essere visualizzato nella home page, nella sezione politica, nella sezione di notizie sull'Oceania o sull'Asia Pacifico e, a seconda dell'argomento delle notizie, nelle sezioni sport, stile di vita o tecnologia. L'articolo potrebbe essere visualizzato anche su altri siti, come Pocket o Yahoo News.

<section>

L'elemento <section> viene utilizzato per racchiudere sezioni autonome generiche di un documento quando non è disponibile un elemento semantico più specifico da utilizzare. Le sezioni devono avere un'intestazione, con pochissime eccezioni.

Tornando all'esempio di Jacinda Ardern, nella home page del giornale, il banner includerebbe il nome del giornale, seguito da un singolo <main>, suddiviso in diversi <section>s, ognuna con un'intestazione, ad esempio "Notizie dal mondo" e "Politica"; e in ogni sezione troverai una serie di <article>s. All'interno di ogni elemento <article>, potresti trovare anche uno o più elementi <section>. Se guardi questa pagina, l'intera parte "Intestazioni e sezioni" è il <article>. Questo <article> viene quindi suddiviso in diversi <section>s, tra cui site header, site footer e struttura del documento. L'articolo stesso ha un'intestazione, così come ogni sezione.

Un elemento <section> non è un punto di riferimento a meno che non abbia un nome accessibile; se ha un nome accessibile, il ruolo implicito è region. I ruoli di punto di riferimento devono essere utilizzati con parsimonia per identificare le sezioni complessive più grandi del documento. L'utilizzo di troppi ruoli di punto di riferimento può creare "rumore" negli screen reader, rendendo difficile la comprensione del layout complessivo della pagina. Se l'elemento <main> contiene due o tre sottosezioni importanti, potrebbe essere utile includere un nome accessibile per ogni elemento <section>.

Intestazioni: <h1>-<h6>

Esistono sei elementi di intestazione di sezione: <h1>, <h2>, <h3>, <h4>, <h5>, e <h6>. Ognuno rappresenta uno dei sei livelli di intestazioni di sezione, con <h1> che è il livello di sezione più alto o più importante e <h6> il più basso.

Quando un'intestazione è nidificata in un elemento del banner del documento <header>, è l'intestazione dell'applicazione o del sito. Quando è nidificata in <main>, indipendentemente dal fatto che sia nidificata o meno in un elemento <header> in <main>, è l'intestazione della pagina, non dell'intero sito. Quando è nidificata in un <article> o <section>, è l'intestazione della sottosezione della pagina.

Ti consigliamo di utilizzare i livelli di intestazione in modo simile ai livelli di intestazione in un editor di testo: iniziando con un elemento <h1> come intestazione principale, con <h2> come intestazioni per le sottosezioni e <h3> se queste sottosezioni hanno sezioni; evita di saltare i livelli di intestazione. Qui puoi trovare un buon articolo sulle intestazioni di sezione qui.

Alcuni utenti di screen reader accedono alle intestazioni per comprendere i contenuti di una pagina. In origine, le intestazioni dovevano delineare un documento, proprio come MS Word o Documenti Google possono produrre una struttura basata sulle intestazioni, ma i browser non hanno mai implementato questa struttura. Sebbene i browser visualizzino le intestazioni nidificate con dimensioni dei caratteri sempre più piccole, come mostrato nell'esempio seguente, in realtà non supportano la struttura.

Ora hai conoscenze sufficienti per delineare MachineLearningWorkshop.com:

Delineare il <body> di MLW.com

Questa è la struttura dei contenuti visibili del sito del workshop di machine learning:

Poiché nessun contenuto è autonomo e completo, <section> è più appropriato di <article>; sebbene ogni sezione abbia un'intestazione, nessuna sezione merita un elemento <footer>.

A questo punto, non dovrebbe essere necessario dirlo, ma non utilizzare le intestazioni per rendere il testo in grassetto o di grandi dimensioni; utilizza invece il CSS. Se vuoi enfatizzare il testo, esistono anche elementi semantici per farlo. Tratteremo questo argomento e inseriremo la maggior parte dei contenuti della pagina mentre discutiamo delle nozioni di base del testo, dopo aver approfondito gli attributi.

Mettiti alla prova

Metti alla prova le tue conoscenze su intestazioni e sezioni.