`-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ängningstagg ä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 i den 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 betraktas som '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 kommer att 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 en bra praxis? Varför eller varför inte? Kan du förbättra denna kod? --- ## Semantisk markup Generellt sett är det att föredra att använda meningsfull 'semantik' när man skriver HTML. Vad betyder det? Det betyder att du använder HTML-taggar för att representera den typ av data eller interaktion de är designade för. Till exempel bör huvudtiteln på en sida använda en `

`-tagg. Lägg till följande rad precis under din öppningstagg ``: ```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 sett bör knappar skrivas som `

`-taggen: ```html

``` ✅ Även om du lade till denna markup på skärmen, ser du absolut ingenting renderas. Varför? --- ## 🚀Utmaning Det finns några gamla 'ä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. Ändå, 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) ## Efterhandsquiz [Efterhandsquiz](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 föråldrades 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, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språ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.