I tag principali e la formattazione di una pagina
Nell'argomento precedente abbiamo visto la struttura base di una pagina HTML: doctype, html, head e body, i "contenitori" fissi di ogni pagina. Vediamo ora i tag più usati in pratica, quelli con cui costruirai davvero il contenuto di ogni pagina che scriverai.
Per i titoli si usano i tag da <h1> a <h6>: <h1> è il titolo più importante della pagina (di solito uno solo per pagina), mentre <h6> è il meno importante, per sotto-sotto-titoli. Scegliere il livello giusto di titolo, invece di usarli a caso in base solo alla dimensione del testo, aiuta anche i motori di ricerca a capire l'importanza delle diverse parti della pagina. Il testo normale, invece, va dentro il tag <p> (paragrafo), lo stesso che abbiamo già incontrato nell'argomento precedente.
Per evidenziare porzioni di testo si usano <strong> (grassetto, per indicare importanza) e <em> (corsivo, per indicare enfasi): questi tag, a differenza dei più vecchi <b> e <i>, comunicano anche un significato al browser e ai lettori automatici, non solo un effetto visivo. Visivamente il risultato e' identico, ma dal punto di vista del significato sono due cose diverse.
Tag o attributo?
Il tag è la parola chiave che dà il nome all'elemento, scritta tra parentesi angolari: p, img, a. L'attributo, invece, è un'informazione aggiuntiva scritta dentro il tag di apertura, nella forma nome="valore": in <img src="foto.jpg" alt="una foto">, "img" è il tag, mentre "src" e "alt" sono attributi con i rispettivi valori.
A volte, pero', un pezzo di contenuto non corrisponde a nessun tag specifico visto finora: non e' un titolo, non e' un paragrafo, non e' un elenco, ma serve comunque per organizzare visivamente la pagina.
div e span: i contenitori generici
Quando nessun tag specifico si adatta bene, HTML mette a disposizione due "contenitori" generici senza significato proprio: <div>, che racchiude un blocco di contenuto (va sempre a capo, come un paragrafo), e <span>, che racchiude invece una piccola porzione di testo dentro una riga, senza andare a capo. Sono usati moltissimo insieme al CSS, il linguaggio che vedremo per definire lo stile grafico di una pagina.
Un giardino che dimostro' il potere dello stile
Nel 2003 il progetto CSS Zen Garden mostro' al mondo del web design qualcosa di sorprendente: partendo esattamente dallo stesso identico codice HTML, centinaia di designer diversi crearono pagine dall'aspetto completamente diverso, cambiando soltanto il CSS, cioe' lo stile grafico. Il progetto e' diventato un classico per spiegare perche' HTML (il contenuto) e CSS (lo stile) sono cosi' potenti quando restano separati.
Per gli elenchi, HTML distingue tra elenco puntato — <ul> (unordered list), che contiene una serie di elementi <li> — ed elenco numerato — <ol> (ordered list), sempre con elementi <li> al suo interno: la stessa distinzione tra elenco puntato e numerato che usiamo scrivendo con "-" o "1." nei testi di questo stesso sito, solo scritta con i tag giusti invece che con semplici simboli.
Un link si crea con il tag <a>, che richiede un attributo href per indicare la destinazione: ad esempio, <a href="https://www.wikipedia.org">Vai a Wikipedia</a>. Il testo tra apertura e chiusura del tag e' cio' che l'utente vede e clicca, mentre href resta invisibile ma indica al browser dove andare, che si tratti di un'altra pagina dello stesso sito o di un sito esterno completamente diverso. Un'immagine, come già visto, si inserisce con il tag auto-chiudente <img>, che richiede l'attributo src (il percorso del file immagine) e dovrebbe sempre includere anche alt: un testo alternativo, mostrato se l'immagine non si carica e letto ad alta voce dai lettori automatici usati da persone con disabilità visive.
Perche' i link sono blu e sottolineati
La convenzione di colorare i link di blu e sottolinearli nacque nei primissimi browser, incluso quello originale di Tim Berners-Lee, semplicemente perche' era un modo semplice e molto visibile per distinguerli dal testo normale. E' diventata una convenzione cosi' radicata che, ancora oggi, molti utenti si aspettano istintivamente che il testo blu sottolineato sia cliccabile, anche su siti che non usano piu' quei colori di default.
Una pizzeria americana finita in tribunale per un sito poco accessibile
Nel 2019 la catena di pizzerie Domino's fu portata in tribunale negli Stati Uniti da un cliente non vedente, che non riusciva a ordinare una pizza dal sito web perche' privo di testi alternativi e altre funzioni di accessibilita' per i lettori automatici. Il caso arrivo' fino alla Corte Suprema americana, che diede ragione al cliente: da allora, l'accessibilita' di un sito web (a partire da semplici dettagli come l'attributo alt) e' considerata sempre di piu' un requisito legale, non solo una buona pratica.
Un'ultima nota pratica, utile fin dalle prime pagine che scriverai, per lasciare tracce del proprio lavoro dentro il codice stesso senza che l'utente se ne accorga.
I commenti nel codice HTML
Si puo' scrivere una nota nel codice HTML che non verra' mai mostrata sulla pagina, usando la sintassi <!-- questo e' un commento -->. I commenti sono utilissimi per lasciare promemoria a se stessi o spiegazioni per altri programmatori che leggeranno il codice in futuro, senza alterare in nessun modo cio' che l'utente vede nel browser.
Il tag che oggi nessun browser vuole più
Nel 1994 il browser Netscape introdusse il tag <blink>, che faceva letteralmente lampeggiare il testo sullo schermo. Divenne quasi subito uno dei simboli del cattivo gusto nel design delle prime pagine web, tanto da essere soprannominato ironicamente "il tag più odiato della storia del web": oggi nessun browser moderno lo supporta più, ed è ricordato come un monito su quanto, in fatto di design, "si può" non significhi sempre "si dovrebbe".
►VideoTutorial HTML e CSS ITA - Impararlo subito! (PitoneProgrammatore)
►VideoFormattazione testo, link e immagini in HTML (On Game)
►VideoI tag per le immagini in HTML (francesca barresi)Amplia la tua pagina
Riprendi la pagina HTML creata nell'argomento precedente. Aggiungi: un titolo h1, un sottotitolo h2, un elenco puntato con almeno tre tuoi interessi, un link (con il tag a) a un sito web che ti piace, e un'immagine (con il tag img) con un testo alternativo scritto correttamente. Salva e apri di nuovo la pagina nel browser per verificare che tutto compaia come previsto.
Ora conosciamo i tag principali per costruire e formattare una pagina web completa, dal titolo fino ai link, agli elenchi e alle immagini. Nei prossimi argomenti del corso continueremo ad approfondire il mondo del web e della comunicazione digitale.
Mettiti alla prova
1. A cosa servono i tag da h1 a h6?
A definire i titoli di una pagina, dal più importante (h1) al meno importante (h6).
2. Qual è la differenza tra i tag strong/em e i più vecchi tag b/i?
strong ed em comunicano anche un significato semantico (importanza, enfasi), non solo un effetto visivo come b (grassetto) e i (corsivo).
3. Qual è la differenza tra i tag ul e ol?
ul crea un elenco puntato (ordine non importante), ol crea un elenco numerato (ordine importante); entrambi contengono elementi li.
4. Cos'è un attributo, e qual è la differenza rispetto a un tag?
L'attributo è un'informazione aggiuntiva scritta dentro il tag di apertura nella forma nome="valore" (es. href, src, alt); il tag è invece la parola chiave che dà il nome all'elemento.
5. A cosa serve l'attributo alt del tag img?
Fornisce un testo alternativo per l'immagine, mostrato se non si carica e letto dai lettori automatici usati da persone con disabilità visive.
6. Con quale tag e quale attributo si crea un link cliccabile?
Con il tag a e l'attributo href, che indica la destinazione del link.
7. Vero o falso: il tag blink, che faceva lampeggiare il testo, è ancora supportato da tutti i browser moderni.
Falso: nessun browser moderno lo supporta più.
8. Qual e' la differenza tra i tag div e span?
div racchiude un blocco di contenuto e va sempre a capo; span racchiude una piccola porzione di testo dentro una riga, senza andare a capo.
9. Come si scrive un commento in HTML, e a cosa serve?
Con la sintassi <!-- testo -->; serve a lasciare note nel codice senza che vengano mostrate sulla pagina.
10. Cosa dimostro' il progetto CSS Zen Garden del 2003?
Che lo stesso identico codice HTML puo' avere un aspetto completamente diverso cambiando solo il CSS, cioe' lo stile.
11. Perche' oggi l'accessibilita' di un sito web (come l'attributo alt) e' considerata anche un requisito legale?
Per casi come quello della catena Domino's, portata in tribunale nel 2019 negli Stati Uniti da un cliente non vedente che non riusciva a usare il sito senza funzioni di accessibilita'.