Luca Perullo

Curriculum / base

HTML semantico (e accessibile)

Tag che parlano a Google e agli screen reader. Niente più div soup, struttura che si capisce davvero.

Ogni div nel tuo HTML è un'occasione persa di dire al browser cosa contiene. In 8 lezioni costruirai l'articolo del blog di cucina di Marco — ricetta, foto, breadcrumbs, contenuti correlati — usando solo tag semantici e ARIA dove serve davvero. Alla fine avrai una pagina che Google ama, che gli screen reader navigano con piacere, e che resta leggibile anche senza CSS.

Inizia adesso50 min · 8 lezioni

Skeleton semantico01

header, main, footer e gerarchia heading: le ossa della pagina, leggibili anche al buio.

  1. 01Le ossa della pagina: header, main, footer2 min
  2. 02La gerarchia dei titoli: un h1, tanti h22 min
  3. 03Metadati dell'articolo: data e autore2 min
  4. 04Figure + figcaption: l'immagine con la sua didascalia2 min

Article structure02

article + header interno + time + figure/figcaption: il post diventa un'unità di senso.

  1. 05Aside per il correlato, nav per i breadcrumbs2 min
  2. 06ARIA solo dove HTML non basta2 min
  3. 07Lang per il multilingua, abbr per gli acronimi2 min
  4. 08CSS minimo: la semantica si veste2 min

Navigazione e relazioni03

aside per il correlato e nav per i breadcrumbs: il contesto intorno all'articolo.

    ARIA e internazionalizzazione04

    Landmark roles dove servono, lang sui blocchi multilingua, abbr per gli acronimi.

      CSS minimo05

      Poche regole CSS per dare forma: la semantica regge da sola, il design la rifinisce.