`-tags om de afzonderlijke elementen in 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 [source code folder](../../../../3-terrarium/solution/images); (er zijn 14 afbeeldingen van planten). ### Taak 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 transformeert 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 doen we in de volgende les. Elke afbeelding heeft alt-tekst die verschijnt, zelfs als je een afbeelding niet kunt zien of weergeven. Dit is een belangrijk attribuut om op te nemen voor toegankelijkheid. Leer meer over toegankelijkheid in toekomstige lessen; voor nu, onthoud dat het alt-attribuut alternatieve informatie biedt voor een afbeelding als een gebruiker om de 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). ✅ Heb je gemerkt 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 op 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 headers met `

` en ongeordende lijsten weergegeven als `
`, helpt schermlezers 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 dat doet, vergeet dan niet om het daarna te verwijderen) ## Post-Les Quiz [Post-les quiz](https://ff-quizzes.netlify.app/web/quiz/16) ## Review & Zelfstudie HTML is het 'beproefde' bouwbloksysteem dat heeft geholpen het web te bouwen tot wat het vandaag is. Leer een beetje over de geschiedenis door enkele 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, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.