Sito in aggiornamento

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

Article vs Section: come scegliere?

Sicuramente ti sarà capitato di confonderli e di non sapere come usarli. Sono gli elementi html <article> e <section>. Questa settimana stavo approfondendo l’argomento quando sono incappato in un articolo fighissimo: è un articolo Smashing Magazine di Olutimilehin Olushuyi. Ecco una sintesi per capire la differenza degli elementi HTML <article> e <section>.

 Slide 1: Article e Section, come scegliere

Cosa trovi in questa pagina:

  1. Gli elementi HTML Article VS Section sono così simili
  2. Article
  3. Section
  4. Possiamo distinguerli con un modello mentale
  5. Esempio 1: Pagina web
  6. Esempio 2: Articolo blog
  7. Vantaggi e svantaggi
  8. Accessibilità per Section e Article
  • Gli elementi HTML Article VS Section sono così simili

    Sicuramente ti sarà capitato di confonderli e di non sapere come usarli. Sono gli elementi html <article> e <section>. Questa settimana stavo approfondendo l’argomento quando sono incappato in un articolo fighissimo: è un articolo Smashing Magazine di Olutimilehin Olushuyi. Ecco una sintesi per capire la differenza degli elementi HTML article e section.

    Partiamo dalle definizioni di The HTML Living Standard.

  • Article

    “complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable…” Immaginatelo come dei jeans: puoi scambiarli e metterli con vestiti diversi.

     

     Slide 3: Article
  • Section

    “generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading…” Questo invece potrebbe essere più simile all’armadio.

     Slide 4: Section
  • Possiamo distinguerli con un modello mentale:

    1. L’elemento ha un ruolo per la struttura semantica?
    No: usa un <div>
    Sì: continua!

    2. Che ruolo ha?
    È parte di un insieme: usa un <section>
    Può stare da solo: usa un <article>

     Slide 5: Modello mentale
  • Esempio 1: Pagina web

    Possiamo suddividere il contenuto in <section> perché ogni sezione può avere un titolo e perché sono correlate tra di loro. Il blocco della newsletter non è indispensabile al fine di capire la struttura della pagina, quindi è un <div>.

     Slide 6: Esempio per pagina web
  • Esempio 2: Articolo blog

    Possiamo avere un contenitore <article> e inserire all’interno le sezioni collegate tra di loro.

     Slide 7: Esempio per post del blog
  • Vantaggi e svantaggi

    • Vantaggio – organizzazione: durante la fase di Content Design è possibile definire le aree semantiche della pagina migliorando così l’architettura web;
    • Svantaggio – NON è accessibile: già, perché <article> e <section> non sono ben supportati dagli Screen Reader. Possiamo però usare gli ARIA Label.
     Slide 8: Vantaggi
  • Accessibilità per Section e Article

    Si può usare il modo con aria-labelledby=”role” + id=”role” per far rendere riconoscibile la <section> dallo Screen Reader. Che benefici ha?

    • Le etichette label sono ricavate dal contenuto esistente, creando un’esperienza uguale tra gli utenti;
    • Chi usa lo Screen Reader può saltare direttamente alle sezioni mediante scorciatoia;
    • Però attenzione a non esagerare con l’uso di ARIA, altrimenti il rischio è di ottenere l’effetto contrario.
     Slide 9: Accessibilità
  •  Slide 10: Post ispirato da Olushuyi Olutimilehin
  •  Slide 11: Ti serve aiuto?