Lunedì 21 giugno con Francesca Marano abbiamo parlato di HTML, il linguaggio standard del W3C con cui si annotano i documenti del web per renderli leggibili dai browser, e abbiamo visto quanto conoscere le basi di questo linguaggio aiuti a scrivere testi ben strutturati e accessibili, e a usare con consapevolezza l’editor a blocchi di WordPress.
[is_paid]
Rivedi il video del webinar
[/is_paid]
Francesca è WordPress Core Team lead di Yoast, è una delle rappresentanti global del team Core di WordPress.org, nonché co-lead di due release di WordPress.
“Parlo molto volentieri di HTML, perché sono contenta quando ho l’opportunità di spiegare le basi di un argomento che mi piace, e perché penso che andrebbe insegnato già nelle scuole”.
Una lingua per i testi e gli ipertesti del web
“Internet è l’infrastruttura tecnologica di cavi che corrono sotto l’oceano e collegano i nodi della rete, cioè i server. Internet precede il web, il www di Tim Berners Lee, che possiamo intendere come un servizio di comunicazione distribuita che usa internet come base per trasmettere documenti da un nodo all’altro, fino all’utente.”
Dare struttura e significato ai testi
“La comparsa del linguaggio di markup HTML segna il momento in cui internet smette di essere un telex e diventa un ipertesto”. HTML è infatti il linguaggio standard di marcatura (o markup) che utilizza i tag per racchiudere gli elementi della pagina web e creare collegamenti tra risorse e documenti.
Si chiamano tag le “marche” che si aprono con <nome del tag> e si chiudono con </nome del tag> e che funzionano da contenitori di parti del documento, indicando ai browser qual è il loro ruolo all’interno della struttura complessiva del file.
“Nel 1995, la prima versione di HTML comprende già tutti i tag che si utilizzano ancora oggi. Ad esempio i tag che marcano i titoli: dall’ <h1></h1> all’<h6></h6>, dove h sta per heading (intestazione) e il numero indica il livello dell’intestazione”. Tra gli altri tag strutturali ci sono
- quelli che marcano il contenuto testuale più semplice, il paragrafo: <p>,
- i tag per le liste di elementi <li> (list item) numerate e ordinate <ol> (ordered list) e per quelle non ordinate, le semplici liste puntate <ul> (unordered list),
- “il re degli elementi, <a>”, il tag contenitore degli ipertesti, che il browser di default mostra sottolineato e in blu, “per questo è buona norma non sottolineare altro che i link nei testi”.
Con l’HTML5 il linguaggio abbraccia la semantica e introduce nuovi elementi che esprimono, a partire dal loro stesso nome, il significato e la funzione della porzione di documento che contengono.
“L’HTML5 è fondamentale per scrivere testi strutturati anche dal punto di vista semantico. I nomi dei tag rispondono alla domanda: che ruolo ha questa parte nella struttura della pagina? Così sappiamo ad esempio se è l’<header> o è il <footer>, o ancora un <aside>, o il contenuto principale <main>, o se sta iniziando un <article>”.
Impiegare in modo corretto le intestazioni è un requisito per rendere i testi del web accessibili, perché comunicano al browser e alle tecnologie assistive qual è lo schema della pagina e quali sono le gerarchie tra i blocchi di testo, i cui titoli devono anticipare l’argomento del contenuto.
Separare la struttura dallo stile con i CSS
“Alla fine degli anni ’90 nasce un altro linguaggio standard per i documenti del web. L’idea nasce dall’esigenza di separare il livello della struttura da quello della sua presentazione grafica, e portare tutte le regole sullo stile dei tag HTML in un foglio apposito, chiamato CSS. Il nome è l’acronimo di Cascading Stile Sheet, che tradotto significa foglio di stile a cascata. È a cascata l’ordine con cui vengono applicate le indicazioni di stile a una pagina: prima lo stile dell’autore, poi dell’utente, infine quello di default del browser”.
La lista di appunti del webinar scritta con HTML e CSS su CodePen.io.
I tag HTML nell’editor a blocchi di WordPress
“Fino alla fine del 2017 l’interfaccia di editing dei testi su WordPress era simile a quella di Word. Con l’introduzione del plugin Gutenberg, l’editor ha a disposizione i comandi per creare i componenti della pagina, testuali e non, aggiungendo dei blocchi. Ogni blocco è un blocco semantico, che corrisponde proprio a un tag HTML, e i più comuni sono quelli degli elementi strutturali principali, come i <p>, le liste e i vari headings”.
I blocchi più comuni dell’editor di WordPress. Credits: WordPress.org
. . .
Due letture consigliate durante il webinar per scrivere con il codice contenuti inclusivi:
- Inclusive components di Heydon Pickering;
- Inclusive design patterns, dello stesso autore.