Intestazioni e sezioni

Nell'ultima sezione hai imparato come, anche se non conosci il significato delle parole su una pagina, quando gli elementi semantici conferiscono al documento una struttura significativa, altri (il motore di ricerca, le tecnologie per la disabilità, un futuro assistente, un nuovo membro del team) comprenderanno la struttura del documento.

In questa sezione scoprirai la struttura del documento, ricapitolicherai gli elementi di sezione della sezione precedente e eseguirai il markup della struttura per la tua applicazione.

Scegliere gli elementi giusti per il lavoro durante la programmazione significa che non dovrai refactoring o commentare il tuo codice HTML. Se pensi di utilizzare l'elemento giusto per il job, sceglierai spesso quello giusto per il job. Se non lo fai, probabilmente non lo farai.

Ora che hai capito la semantica del markup e sei consapevole del motivo per cui scegliere l'elemento giusto è importante, una volta che conosci tutti i diversi elementi, in genere sceglierai l'elemento giusto senza sforzi aggiuntivi.

Sito <header>

Creiamo un'intestazione del sito. Inizierai con il markup non semantico e inizi a cercare una buona soluzione, in modo da poter conoscere i vantaggi della sezione HTML e degli elementi di intestazione.

Se attribuisci poca o nessuna considerazione alla semantica dell'intestazione, potresti utilizzare un codice simile al seguente:

<!-- 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 -->

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

Sebbene gli attributi id e class forniscano hook per lo stile e il 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 -->

Questo fornisce almeno la semantica e consente l'utilizzo di selettori di attributi nel CSS, ma aggiunge comunque commenti per identificare quale <div> viene chiuso ogni </div>.

Se conosci il linguaggio HTML, devi solo pensare allo scopo dei contenuti. Quindi puoi scrivere il codice in modo semantico senza utilizzare role e senza dover commentare i 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, corrisponde al sito banner, un ruolo di riferimento, che potresti aver notato nel blocco di codice role. Quando un elemento <header> è nidificato in <main>, <article> o <section>, lo identifica solo come intestazione per quella sezione e non è un punto di riferimento.

L'elemento <nav> identifica i contenuti come elementi di navigazione. Poiché <nav> è nidificato nell'intestazione del sito, rappresenta la navigazione principale del sito. Se fosse nidificata in un elemento <article> o <section>, si tratterà solo della navigazione interna per quella sezione. Utilizzando elementi semantici, hai creato un modello di oggetti per l'accessibilità significativo, anche noto come AOM. AOM consente allo screen reader di informare l'utente che questa sezione è costituita da un blocco di navigazione principale che può essere esplorato o ignorato.

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

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

Sito <footer>

Codifichiamo il piè di pagina del sito.

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

Come nel caso di <header>, l'eventuale presenza del piè di pagina di un punto di riferimento dipende da dove è nidificato il piè di pagina. Quando si tratta del piè di pagina del sito, è un punto di riferimento e deve contenere le informazioni necessarie per il piè di pagina del sito in ogni pagina, ad esempio una dichiarazione sul copyright, i dati di contatto e i link alle norme sulla privacy e sui cookie. Il valore implicito role 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 nel seguente screenshot di AOM in Chrome (che ha un <article> con <header> e <footer> tra <header> e <footer>).

In questo screenshot ci sono due piè di pagina: uno in <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 mostrerà come FooterAsNonLandmark; Firefox lo mostrerà come section.

Ciò non significa che non devi usare <footer>. Supponiamo che tu abbia un blog. Il blog ha 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 blog, il browser, il motore di ricerca e lo screen reader sanno che il piè di pagina principale è quello di primo livello e che tutti gli altri piè di pagina sono correlati ai post in cui sono nidificati.

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

Nei piè di pagina troverai spesso le informazioni di contatto, inserite in <address>, l'elemento per l'indirizzo di contatto. Si tratta di un elemento che non ha un nome molto appropriato; viene utilizzato per racchiudere i dati di contatto di privati o organizzazioni, non per indirizzi postali fisici.

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

Struttura del documento

Questo modulo inizia con <header> e <footer>, perché sono univoci solo in alcuni casi perché sono elementi punto di riferimento o "sezione". Analizziamo l'elemento di sezione "a tempo pieno" illustrando i layout di pagina più comuni:

Un layout con un'intestazione, due barre laterali e un piè di pagina è noto come layout Santo Graal. Esistono molti modi per eseguire il markup di 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>

Utilizzando elementi semantici, i browser sono in grado di creare alberi di accessibilità significativi, consentendo agli utenti di screen reader di navigare più facilmente. Qui, un banner e un contentinfo sono forniti tramite un sito <header> e <footer>. I nuovi elementi aggiunti qui includono <main>, <aside> e <article>; anche <h1> e <nav> che hai utilizzato in precedenza e <section>, che non hai ancora utilizzato.

<main>

C'è un solo elemento punto di riferimento <main>. L'elemento <main> identifica i contenuti principali del documento. Deve essere presente un solo <main> per pagina.

<aside>

Il <aside> si riferisce ai contenuti indirettamente o tangenzialmente correlati ai contenuti principali del documento. Ad esempio, questo articolo riguarda il codice HTML. Per una sezione sulla specificità del selettore CSS per i tre esempi di intestazione del sito (div, ruolo e semantica), la parte correlata tangenzialmente potrebbe essere contenuta in un <aside> e, come la maggior parte dei casi, <aside> potrebbe essere probabilmente presentato in una barra laterale o in una casella callout. Anche <aside> è un punto di riferimento, con il ruolo implicito di complementary.

<article>

Nidificati in <main>, abbiamo aggiunto due elementi <article>. Ciò non era necessario nel primo esempio, quando i contenuti principali erano costituiti da una sola parola, oppure, nel mondo reale, da una singola sezione. Tuttavia, se stai scrivendo un blog, come nel nostro secondo esempio, ogni post deve trovarsi in un elemento <article> nidificato in <main>.

Un elemento <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 un giornale. Nella stampa, un articolo su Jacinda Ardern, primo ministro della Nuova Zelanda, potrebbe apparire solo in una sezione, forse dal mondo. Sul sito web del giornale, lo stesso articolo potrebbe essere visualizzato nella home page, nella sezione Politica, nella sezione Notizie sull'Oceania o sull'Asia Pacifico e, forse, a seconda dell'argomento delle notizie, nelle sezioni relative a 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 comprendere sezioni generiche e indipendenti di un documento quando non esiste un elemento semantico più specifico da utilizzare. Le sezioni devono avere un'intestazione, con pochissime eccezioni.

Tornando all'esempio di Jacinda Ardern, sulla home page del giornale il banner includeva il nome del giornale, seguito da un unico <main>, diviso in diversi <section>, ciascuno con un'intestazione, come "Notizie dal mondo" e "Politica"; in ogni sezione troverai una serie di <article>. All'interno di ogni <article> potresti anche trovare uno o più elementi <section>. Se esamini questa pagina, l'intera parte relativa a "intestazioni e sezioni" è la <article>. Questo <article> viene quindi diviso in diversi <section>, tra cui site header, site footer e la struttura del documento. L'articolo ha un'intestazione, così come ogni sezione.

Un <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 dei punti di riferimento devono essere utilizzati con parsimonia, al fine di identificare sezioni generali più ampie del documento. L'utilizzo di troppi ruoli dei punti di riferimento può creare "rumore" negli screen reader, rendendo difficile comprendere il layout complessivo della pagina; potrebbe essere utile avere <main> se il tuo <main> contiene due o tre sottosezioni importanti, tra cui un nome accessibile per ogni <section>.

Intestazioni: <h1>-<h6>

Sono presenti sei elementi di intestazione di sezione: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Ciascuno rappresenta uno dei sei livelli di intestazioni di sezione, dove <h1> rappresenta il livello di sezione più alto o più importante e <h6> il livello più basso.

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

È consigliabile utilizzare i livelli delle intestazioni in modo simile ai livelli delle intestazioni in un editor di testo, iniziando con <h1> come intestazione principale, con <h2> come intestazione per le sottosezioni e <h3> se queste sottosezioni hanno una sezione; evita di saltare i livelli di intestazione. Qui puoi trovare un articolo sulle intestazioni di sezione.

Alcuni utenti di screen reader accedono alle intestazioni per comprendere i contenuti di una pagina. In origine, le intestazioni dovevano delineare un documento, così 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 mostrino intestazioni nidificate con dimensioni dei caratteri sempre più piccole, come mostrato nell'esempio seguente, in realtà non supportano la strutturazione.

Ora disponi di conoscenze sufficienti per creare una presentazione di MachineLearningWorkshop.com:

Definizione dell'obiettivo <body> di MLW.com

Questo è lo schema per i contenuti visibili del sito del workshop sul machine learning:

Poiché nessun contenuto è completo e a sé stante, <section> è più appropriato di <article>; sebbene ogni contenuto abbia un titolo, nessuna sezione può meritare un <footer>.

A questo punto dovrebbe essere inutile, ma non utilizzare intestazioni per rendere il testo in grassetto o di grandi dimensioni; utilizza invece CSS. Se vuoi enfatizzare un testo, ci sono elementi semantici per farlo. Tratteremo questo aspetto e completeremo la maggior parte dei contenuti della pagina dopo aver esaminato le nozioni di base del testo e dopo avere approfondito gli attributi.

Verifica le tue conoscenze

Verifica la tua conoscenza delle intestazioni e delle sezioni.