`-tags om de afzonderlijke elementen op een pagina te maken. We maken een reeks `

`-elementen die afbeeldingen bevatten. ### Afbeeldingen Een HTML-tag die geen sluiting nodig heeft, is de ``-tag, omdat deze een `src`-element heeft dat alle informatie bevat die de pagina nodig heeft om het item weer te geven. Maak een map in je app genaamd `images` en voeg daarin alle afbeeldingen toe uit de [broncode-map](../../../../3-terrarium/solution/images); (er zijn 14 afbeeldingen van planten). ### Opdracht Voeg die plantenafbeeldingen toe in twee kolommen tussen de ``-tags: ```html

``` > Opmerking: Spans vs. Divs. Divs worden beschouwd als 'block'-elementen en Spans als 'inline'. Wat zou er gebeuren als je deze divs zou omzetten naar spans? Met deze markup verschijnen de planten nu op het scherm. Het ziet er behoorlijk slecht uit, omdat ze nog niet zijn gestyled met CSS, en dat gaan we in de volgende les doen. Elke afbeelding heeft alt-tekst die verschijnt, zelfs als je een afbeelding niet kunt zien of weergeven. Dit is een belangrijke eigenschap om op te nemen voor toegankelijkheid. Leer meer over toegankelijkheid in toekomstige lessen; onthoud voor nu dat het alt-attribuut alternatieve informatie biedt voor een afbeelding als een gebruiker om een of andere reden de afbeelding niet kan bekijken (vanwege een trage verbinding, een fout in het src-attribuut, of als de gebruiker een schermlezer gebruikt). ✅ Is het je opgevallen dat elke afbeelding dezelfde alt-tag heeft? Is dit goede praktijk? Waarom wel of niet? Kun je deze code verbeteren? --- ## Semantische markup Over het algemeen is het beter om betekenisvolle 'semantiek' te gebruiken bij het schrijven van HTML. Wat betekent dat? Het betekent dat je HTML-tags gebruikt om het type gegevens of interactie te vertegenwoordigen waarvoor ze zijn ontworpen. Bijvoorbeeld, de hoofdtekst van een pagina moet een `

`-tag gebruiken. Voeg de volgende regel toe direct onder je opening ``-tag: ```html

My Terrarium

``` Het gebruik van semantische markup, zoals het gebruik van `

` voor kopteksten en `
` voor ongenummerde lijsten, helpt schermlezers om door een pagina te navigeren. Over het algemeen moeten knoppen worden geschreven als `

`-tag: ```html

``` ✅ Hoewel je deze markup aan het scherm hebt toegevoegd, zie je absoluut niets weergegeven. Waarom? --- ## 🚀Uitdaging Er zijn enkele 'oude' tags in HTML die nog steeds leuk zijn om mee te spelen, hoewel je geen verouderde tags zoals [deze tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) in je markup zou moeten gebruiken. Kun je de oude ``-tag gebruiken om de h1-titel horizontaal te laten scrollen? (als je dit doet, vergeet dan niet om het daarna te verwijderen) ## Quiz na de les [Quiz na de les](https://ff-quizzes.netlify.app/web/quiz/16) ## Herziening & Zelfstudie HTML is het 'beproefde en betrouwbare' bouwsysteem dat heeft bijgedragen aan het web zoals we dat vandaag kennen. Leer een beetje over de geschiedenis door oude en nieuwe tags te bestuderen. Kun je achterhalen waarom sommige tags zijn verouderd en andere zijn toegevoegd? Welke tags zouden in de toekomst kunnen worden geïntroduceerd? Leer meer over het bouwen van sites voor het web en mobiele apparaten op [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). ## Opdracht [Oefen je HTML: Bouw een blogmockup](assignment.md) --- **Disclaimer**: Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, willen we u erop wijzen dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.