`-taggar för att skapa separata element på en sida. Vi kommer att skapa en serie `

`-element som kommer att innehålla bilder. ### Bilder En HTML-tagg som inte behöver en stängningstag är ``-taggen, eftersom den har ett `src`-element som innehåller all information sidan behöver för att rendera objektet. Skapa en mapp i din app som heter `images` och lägg där alla bilder från [källkodsmappen](../../../../3-terrarium/solution/images); (det finns 14 bilder av växter). ### Uppgift Lägg till dessa växtbilder i två kolumner mellan ``-taggarna: ```html

``` > Notera: Spans vs. Divs. Divs anses vara 'block'-element, och Spans är 'inline'. Vad skulle hända om du ändrade dessa divs till spans? Med denna markup visas växterna nu på skärmen. Det ser ganska dåligt ut, eftersom de ännu inte är stylade med CSS, och vi kommer att göra det i nästa lektion. Varje bild har alt-text som visas även om du inte kan se eller rendera en bild. Detta är en viktig attribut att inkludera för tillgänglighet. Lär dig mer om tillgänglighet i framtida lektioner; för nu, kom ihåg att alt-attributet ger alternativ information för en bild om en användare av någon anledning inte kan se den (på grund av långsam anslutning, ett fel i src-attributet, eller om användaren använder en skärmläsare). ✅ Märkte du att varje bild har samma alt-tagg? Är detta bra praxis? Varför eller varför inte? Kan du förbättra denna kod? --- ## Semantisk markup Generellt är det att föredra att använda meningsfull 'semantik' när du skriver HTML. Vad betyder det? Det betyder att du använder HTML-taggar för att representera typen av data eller interaktion de är designade för. Till exempel bör huvudtiteltexten på en sida använda en `

`-tagg. Lägg till följande rad precis under din öppningstag ``: ```html

My Terrarium

``` Att använda semantisk markup, som att ha rubriker som `

` och oordnade listor som renderas som `
`, hjälper skärmläsare att navigera genom en sida. Generellt bör knappar skrivas som `

`-taggen: ```html

``` ✅ Även om du har lagt till denna markup på skärmen, ser du absolut ingenting renderas. Varför? --- ## 🚀Utmaning Det finns några roliga 'äldre' taggar i HTML som fortfarande är roliga att leka med, även om du inte bör använda föråldrade taggar som [dessa taggar](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) i din markup. Kan du använda den gamla ``-taggen för att få h1-titeln att rulla horisontellt? (om du gör det, glöm inte att ta bort den efteråt) ## Quiz efter föreläsning [Quiz efter föreläsning](https://ff-quizzes.netlify.app/web/quiz/16) ## Granskning & Självstudier HTML är det 'beprövade och sanna' byggblockssystemet som har hjälpt till att bygga webben till vad den är idag. Lär dig lite om dess historia genom att studera några gamla och nya taggar. Kan du lista ut varför vissa taggar blev föråldrade och andra lades till? Vilka taggar kan introduceras i framtiden? Lär dig mer om att bygga webbplatser för webben och mobila enheter på [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Uppgift [Öva på din HTML: Bygg en bloggmockup](assignment.md) --- **Ansvarsfriskrivning**: Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen notera att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.