Appunti HTML

Published:  at 10:00 AM

Queste sono le note della lezione del corso su HTML. Come sempre non sono un manuale: sono quello che abbiamo scritto insieme a lezione, riordinato e accompagnato da qualche nota per chi non era presente. Per gli approfondimenti fate riferimento alla registrazione e alla documentazione su MDN.

HTML sta per HyperText Markup Language e descrive la struttura e il significato dei contenuti di una pagina. Una cosa va chiarita subito, perché è l’errore concettuale più comune di chi inizia: HTML dice cosa sono le cose, non che aspetto hanno. L’aspetto arriverà con il CSS, nella prossima lezione.

Il progetto che ci accompagnerà per tutto il corso è il sito di una pizzeria, Awesome Pizza. In questa lezione costruiamo la pagina del menu.

Per provare gli esempi vi suggerisco CodePen: scrivete nel pannello HTML e vedete subito il risultato.

Com’è fatta una pagina HTML

Ogni pagina parte da questo scheletro:

<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8" />
    <title>Awesome Pizza - Menu</title>
  </head>
  <body>
    <h1>Awesome Pizza</h1>
    <p>La migliore pizza di Paperopoli.</p>
  </body>
</html>

Vediamo i pezzi uno per uno:

Tag e attributi

Un elemento HTML è composto da un tag di apertura, un contenuto e un tag di chiusura:

<p>La migliore pizza di Paperopoli.</p>

I tag possono avere degli attributi, coppie nome-valore scritte nel tag di apertura:

<a href="https://awesomepizza.com/menu">Guarda il menu</a>

Alcuni elementi non hanno contenuto e quindi nemmeno il tag di chiusura: è il caso di <img>, <input> e <br>.

Gli elementi si annidano uno dentro l’altro, e l’annidamento deve essere coerente: un tag aperto dentro un elemento va chiuso dentro quello stesso elemento. Il browser è molto tollerante con l’HTML scritto male, e questa tolleranza è un’arma a doppio taglio: la pagina si vede comunque, ma si vede come ha deciso lui.

Il testo: heading e paragrafi

Per i titoli esistono sei livelli di heading, da h1 a h6:

<h1>Awesome Pizza</h1>
<h2>Le nostre pizze</h2>
<h3>Margherita</h3>

I livelli vanno usati in ordine, senza salti, perché formano l’indice del documento: h1 è il titolo della pagina, h2 le sezioni principali, h3 le sottosezioni. Gli screen reader usano proprio questa gerarchia per permettere all’utente di saltare da una sezione all’altra. E una pagina dovrebbe avere un solo h1.

DON’T: scegliere i tag per il loro aspetto

L’errore classico è scegliere un h4 perché “è grande il giusto”. La dimensione si cambia con il CSS; il livello dell’heading dichiara la struttura del documento. Vale lo stesso per il grassetto e il corsivo:

<p>La <strong>Contadina</strong> è la nostra pizza più richiesta.</p>
<p>Tutte le pizze sono disponibili anche <em>senza glutine</em>.</p>

strong dichiara che una parola è importante, em che va enfatizzata. Nei progetti vecchi troverete b e i, che dicono solo “grassetto” e “corsivo” senza dichiarare niente sul significato.

Liste

Il menu della pizzeria è, prima di tutto, una lista:

<h2>Le nostre pizze</h2>
<ul>
  <li>Margherita - 9€</li>
  <li>Marinara - 5€</li>
  <li>Contadina - 19€</li>
</ul>

ul è una lista non ordinata, ol una lista numerata, da usare quando l’ordine conta davvero (una classifica, i passaggi di una ricetta). Gli elementi sono sempre li.

<a href="https://awesomepizza.com/menu">Guarda il menu</a>

<img src="margherita.jpg" alt="Una pizza margherita appena sfornata" />

Il link è l’ipertesto del nome HyperText: href indica la destinazione, il contenuto è il testo cliccabile. Evitate i “clicca qui”: il testo del link dovrebbe avere senso anche letto da solo, perché gli screen reader permettono di navigare i link di una pagina come elenco.

Per le immagini, l’attributo alt descrive il contenuto dell’immagine. Serve a chi usa uno screen reader, compare quando l’immagine non si carica, e lo leggono anche i motori di ricerca. Scrivere alt sensati richiede dieci secondi e per qualcuno fa la differenza tra usare il vostro sito e non poterlo usare.

Form

I form sono il modo in cui l’utente manda dati al sito. Costruiamo quello per ordinare una pizza:

<form action="/ordina" method="post">
  <label for="nome">Il tuo nome</label>
  <input id="nome" name="nome" type="text" />

  <label for="pizza">Quale pizza?</label>
  <select id="pizza" name="pizza">
    <option value="margherita">Margherita</option>
    <option value="marinara">Marinara</option>
    <option value="contadina">Contadina</option>
  </select>

  <label for="quantita">Quante?</label>
  <input id="quantita" name="quantita" type="number" min="1" value="1" />

  <button type="submit">Ordina</button>
</form>

Le cose da notare:

HTML semantico

Mettiamo insieme la pagina del menu. La tentazione è usare div per qualsiasi cosa, e infatti il termine tecnico per quel tipo di pagina esiste: div soup. HTML offre tag che dichiarano il ruolo delle varie zone della pagina:

<body>
  <header>
    <h1>Awesome Pizza</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/menu">Menu</a>
      <a href="/contatti">Contatti</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Le nostre pizze</h2>
      <!-- la lista del menu -->
    </section>

    <section>
      <h2>Ordina</h2>
      <!-- il form -->
    </section>
  </main>

  <footer>
    <p>Awesome Pizza - Via dei Glicini 23, Paperopoli</p>
  </footer>
</body>

header, nav, main, section e footer per il browser si comportano come dei div. La differenza la sentono gli screen reader, che permettono di saltare direttamente al contenuto principale o alla navigazione, e i motori di ricerca, che capiscono meglio com’è organizzata la pagina. La sente anche il collega che aprirà questo file tra sei mesi.

Il div resta legittimo quando serve un contenitore generico, tipicamente per ragioni di stile: se nessun tag semantico descrive quel pezzo di pagina, il div è la risposta giusta.

Per chi vuole il riferimento formale: l’elenco completo dei tag e delle loro regole sta nell’HTML Living Standard mantenuto dal WHATWG. Non si legge come un romanzo, ma è utile sapere che la fonte ufficiale esiste e dove si trova.

La nostra pagina del menu ora è completa e ben strutturata. È anche, onestamente, bruttina: tutto nero su bianco, in Times New Roman. Nella prossima lezione sistemiamo le cose con il CSS.

Per approfondire