` per creare gli elementi separati in una pagina. Creeremo una serie di elementi `

` che conterranno immagini. ### Immagini Un tag HTML che non necessita di un tag di chiusura è il tag ``, perché ha un elemento `src` che contiene tutte le informazioni necessarie alla pagina per renderizzare l'elemento. Crea una cartella nella tua app chiamata `images` e al suo interno aggiungi tutte le immagini nella [cartella del codice sorgente](../../../../3-terrarium/solution/images); (ci sono 14 immagini di piante). ### Compito Aggiungi quelle immagini di piante in due colonne tra i tag ``: ```html

``` > Nota: Spans vs. Divs. I Divs sono considerati elementi 'block', mentre gli Spans sono 'inline'. Cosa accadrebbe se trasformassi questi divs in spans? Con questo markup, le piante ora appaiono sullo schermo. L'aspetto è piuttosto brutto, perché non sono ancora stilizzate con CSS, e lo faremo nella prossima lezione. Ogni immagine ha un testo alternativo che apparirà anche se non puoi vedere o renderizzare un'immagine. Questo è un attributo importante da includere per l'accessibilità. Imparerai di più sull'accessibilità nelle lezioni future; per ora, ricorda che l'attributo alt fornisce informazioni alternative per un'immagine se un utente per qualche motivo non può visualizzarla (a causa di una connessione lenta, un errore nell'attributo src, o se l'utente utilizza un lettore di schermo). ✅ Hai notato che ogni immagine ha lo stesso tag alt? È una buona pratica? Perché sì o perché no? Puoi migliorare questo codice? --- ## Markup semantico In generale, è preferibile utilizzare 'semantica' significativa quando si scrive HTML. Cosa significa? Significa che utilizzi i tag HTML per rappresentare il tipo di dati o interazione per cui sono stati progettati. Ad esempio, il testo del titolo principale di una pagina dovrebbe utilizzare un tag `

`. Aggiungi la seguente riga subito sotto il tuo tag di apertura ``: ```html

My Terrarium

``` Utilizzare markup semantico come avere intestazioni `

` e liste non ordinate renderizzate come `
` aiuta i lettori di schermo a navigare attraverso una pagina. In generale, i pulsanti dovrebbero essere scritti come `

`: ```html

``` ✅ Anche se hai aggiunto questo markup allo schermo, non vedi assolutamente nulla renderizzato. Perché? --- ## 🚀Sfida Ci sono alcuni 'vecchi' tag in HTML che sono ancora divertenti da usare, anche se non dovresti utilizzare tag deprecati come [questi tag](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) nel tuo markup. Tuttavia, puoi utilizzare il vecchio tag `` per far scorrere orizzontalmente il titolo h1? (se lo fai, non dimenticare di rimuoverlo successivamente) ## Quiz Post-Lezione [Quiz post-lezione](https://ff-quizzes.netlify.app/web/quiz/16) ## Revisione & Studio Autonomo HTML è il sistema di costruzione 'collaudato' che ha aiutato a costruire il web come lo conosciamo oggi. Scopri un po' della sua storia studiando alcuni tag vecchi e nuovi. Riesci a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro? Scopri di più sulla creazione di siti per il web e dispositivi mobili su [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Compito [Pratica il tuo HTML: Crea un mockup di un blog](assignment.md) --- **Disclaimer**: Questo documento è stato tradotto utilizzando il servizio di traduzione automatica [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.