Sito in aggiornamento

Il sito è in fase di aggiornamento dopo la sostituzione del sito vecchio.

Raccontare una storia con la semantica HTML

Sono elementi non semantici dell’HTML. Dovrebbero servire solo come mattoni. Spesso sono usati per la struttura portante del layout.

 Slide 1: Raccontare una storia con HTML semantico

Cosa trovi in questa pagina:

  1. HTML semantico: perché è così importante?
  2. Div + Span
  3. Semantic tags
  • HTML semantico: perché è così importante?

    Alcuni elementi HTML sono detti semantici perché:

    • Hanno proprietà intrinseche automatiche (come il :focus per <a> e <button>);
    • Sono quindi più facili da sviluppare: evitano di aggiungere funzioni già presenti;
    • Comunicano con il motore di ricerca, quindi hanno valenza SEO;
    • Sono utili per navigare con sola tastiera, per <a> e <button>;
    • Inoltre comunicano con gli Screen Reader, facilitando la navigazione.
    • Maggiori informazioni nel primo commento.
  • 1. Div + Span

    Sono elementi non semantici dell’HTML. Dovrebbero servire solo come mattoni. Spesso sono usati per la struttura portante del layout.

  • 2. Semantic tags

    Sono elementi utili per strutturare il layout e le parti attivabili, ad esempio:

    • nav: gruppi di link utili per la navigazione (rilevati anche con Screen Reader);
    • header: intestazione della pagina e di altre sezioni article;
    • footer: chiusura della pagina e di altre sezioni article;
    • aside: parte accessoria della pagina e di altre sezioni;
    • H1 – H6: titoli rilevabili dagli Screen Reader;
    • figure + figcaption: per avere la didascalia associata alla foto.