Nell'ultima sezione hai imparato che, anche se non conosci il significato delle parole di una pagina, quando gli elementi semantici forniscono al documento una struttura significativa, altri (il motore di ricerca, le tecnologie per la disabilità, un futuro gestore, un nuovo membro del team) comprenderanno la struttura del documento.
In questa sezione scoprirai la struttura dei documenti, riepilogherai gli elementi di sezionamento della sezione precedente e contrassegnerai la struttura della tua applicazione.
Scegliere gli elementi giusti per il lavoro durante la programmazione significa che non dovrai rifattorizzare o commentare il codice HTML. Se pensi di utilizzare l'elemento giusto per l'attività, il più delle volte sceglierai l'elemento giusto per l'attività. Se non lo fai, probabilmente non lo farai.
Ora che comprendi la semantica del markup e sai perché è importante scegliere l'elemento giusto, una volta appresi tutti i diversi elementi, in genere sceglierai quello giusto senza troppi sforzi aggiuntivi, se non nessuno.
Sito <header>
Innanzitutto, devi creare un'intestazione del sito. Inizia con il markup non semantico e procedi verso una buona soluzione, in modo da poter apprendere i vantaggi degli elementi di sezione e di intestazione HTML lungo il percorso.
Se non presti molta attenzione alla semantica dell'intestazione, potresti utilizzare un codice come 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 del tag non semantico <div> per tutto crea in realtà un lavoro aggiuntivo. 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 quale tag di apertura è stato chiuso da 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 gli attributi role per fornire la semantica per 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. In questo modo, puoi scrivere questo 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, si tratta del sito banner, 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 intestazione per 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 elemento <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ò navigare o saltare.
L'utilizzo dei tag di chiusura </nav> e </header> elimina la necessità di commenti per identificare l'elemento chiuso da ciascun tag di fine. 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 i link con header nav a senza preoccuparti di eventuali conflitti.
Hai scritto un'intestazione con pochissimo codice HTML e senza classi o ID. Quando utilizzi l'HTML semantico, non è necessario.
Sito <footer>
Codifica il piè di pagina del sito.
<footer>
<p>©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 dalla posizione in cui è nidificato. Quando si tratta del 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, i dati di contatto e i link alle norme sulla privacy e sui cookie. Il valore implicito di 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 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.
Ciò non significa che non dovresti 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 è quello di primo livello e che tutti gli altri piè di pagina sono correlati ai post in cui sono nidificati.
Quando un elemento <footer> è un discendente di un elemento <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 si trovano i dati di contatto, racchiusi in <address>, l'elemento dell'indirizzo di contatto. Questo è un elemento che non ha un nome molto appropriato; viene utilizzato per racchiudere i dati di contatto di persone o organizzazioni, non gli indirizzi postali fisici.
<footer>
<p>©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>, poiché solo a volte sono elementi di riferimento (o "sezionamento"). Esistono diversi elementi di sezionamento più frequenti.
Un layout con un'intestazione, due barre laterali e un piè di pagina è noto come layout Holy Grail. 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>
Quando utilizzano elementi semantici, i browser possono creare alberi di accessibilità significativi. In questo modo, lo screen reader può navigare più facilmente. In questo caso, banner e contentinfo vengono forniti tramite un sito <header> e <footer>. I nuovi elementi aggiunti qui includono <main>, <aside> e <article>, oltre a <h1> e <nav> che hai utilizzato in precedenza e <section>, che non hai ancora utilizzato.
<main>
È presente un singolo elemento punto di riferimento <main>. L'elemento <main> identifica i contenuti principali del documento. Deve essere presente un solo <main> per pagina.
<aside>
L'elemento <aside> è destinato ai contenuti correlati indirettamente o marginalmente 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'aside tangenzialmente correlato potrebbe essere contenuto in un <aside>; e, come la maggior parte, l'<aside> verrebbe probabilmente presentato in una barra laterale o in un riquadro di callout. Anche <aside> è un punto di riferimento, con il ruolo implicito di complementary.
<article>
All'interno di <main> abbiamo aggiunto due elementi <article>. Questo non era necessario nel primo esempio, in cui i contenuti principali erano costituiti da una sola parola o, nel mondo reale, da una singola sezione di contenuti. Tuttavia, se stai scrivendo un blog, come nel nostro secondo esempio, ogni post deve essere inserito in un tag <article> nidificato in <main>.
Un <article> rappresenta una sezione di contenuti completa o autonoma che, in linea di principio, è riutilizzabile in modo indipendente. Pensa a un articolo come a un articolo di un giornale. In un giornale cartaceo, un articolo su Jacinda Ardern, prima ministra della Nuova Zelanda, potrebbe apparire in una sola sezione, ad esempio quella delle notizie dal mondo. Sul sito web del giornale, lo stesso articolo potrebbe apparire sulla home page, nella sezione politica, nella sezione notizie sull'Oceania o sull'Asia Pacifico e, a seconda dell'argomento delle notizie, forse nelle sezioni sport, lifestyle 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 esiste 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>, diviso in diversi <section>, ciascuno con un'intestazione, come "Notizie dal mondo" e "Politica"; e in ogni sezione troverai una serie di <article>. All'interno di ogni <article>, potresti trovare anche uno o più elementi <section>. Se guardi questa pagina, l'intera parte "intestazioni e sezioni" è il <article>. Questo <article> viene poi suddiviso in diversi <section>, tra cui site header, site footer e struttura del documento. L'articolo stesso ha un'intestazione, così come ciascuna delle sezioni.
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 riferimento devono essere utilizzati con parsimonia per identificare sezioni complessive più ampie del documento. L'utilizzo di troppi ruoli di riferimento può creare "rumore" negli screen reader, rendendo difficile comprendere il layout complessivo della pagina. Se il tuo <main> contiene due o tre sottosezioni importanti, potrebbe essere utile includere un nome accessibile per ogni <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 rappresenta il livello di sezione più alto o più importante e <h6> il più basso.
Quando un'intestazione è nidificata in un banner del documento <header>, si tratta dell'intestazione dell'applicazione o del sito. Se nidificato in <main>, indipendentemente dal fatto che sia nidificato o meno all'interno di un <header> in <main>, è l'intestazione della pagina, non dell'intero sito. Se nidificato in un elemento <article> o <section>, è l'intestazione della sottosezione della pagina.
Ti consigliamo di utilizzare i livelli di intestazione in modo simile a quelli di un editor di testo: inizia con <h1> come intestazione principale, con <h2> come intestazioni per le sottosezioni e con <h3> se queste sottosezioni hanno sezioni; evita di saltare i livelli di intestazione. Ecco un buon articolo sulle intestazioni delle sezioni.
Alcuni utenti di screen reader accedono alle intestazioni per comprendere i contenuti di una pagina. Inizialmente, 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 e l'algoritmo di struttura proposto è stato rimosso dalla specifica HTML. Mentre in passato i browser mostravano gli elementi <h1> nidificati negli elementi di sezionamento con dimensioni dei caratteri più piccole, i browser moderni hanno rimosso questi stili predefiniti e non supportano la struttura automatica dei documenti.
Ora hai conoscenze sufficienti per delineare MachineLearningWorkshop.com:
Delineare la <body> di MLW.com
Questo è lo schema dei contenuti visibili del sito del workshop sul machine learning:
Poiché nessun contenuto è autonomo e completo, <section> è più appropriato di <article>; sebbene ognuno abbia un'intestazione, nessuna sezione è degna di un <footer>.
A questo punto dovrebbe essere ovvio, ma non utilizzare le intestazioni per applicare il grassetto o ingrandire il testo; utilizza invece i CSS. Se vuoi enfatizzare il testo, esistono anche elementi semantici per farlo. Tratteremo questo argomento e inseriremo la maggior parte dei contenuti della pagina quando parleremo delle nozioni di base sul testo, dopo aver approfondito gli attributi.
Mettiti alla prova
Metti alla prova le tue conoscenze su intestazioni e sezioni.
Qual è l'elemento utilizzato per contenere l'area del tuo sito che include il logo o il titolo del sito e la navigazione principale?
<heading><header><title>Quanti elementi <main> sono consentiti in una pagina?