05. afbeeldingen

<figure>

De <figure> en <figcaption> elementen zijn twee nieuwe elementen in HTML5. Ze werden geïntroduceerd in HTML5 om illustraties zoals afbeeldingen, video's, codeblokken, svg, canvas, …, samen met een bijschrift als een geheel te kunnen identificeren. Kwestie van de juiste semantiek dus.

Met het <figcaption> element kan je een bijschrift plaatsen bij de illustratie. Dit is dus een aanvulling en geen vervanging van het alt of title attribuut.

Ook moet niet elke afbeelding in een <figure> staan met een <figcaption> als bijschrift. Het kan gebruikt worden om illustraties die meer uitleg vragen, verder toe te lichten.

De voordelen:

HTML code wordt semantisch. Het <figure> element identificeert illustraties met hun bijschrift.
Het <figure> element kan ook meerdere afbeeldingen bevatten met één <figcaption> die een algemene omschrijving geeft van alle afbeeldingen.

<figure>
   <img src="images/jonge-marsman.jpg" alt="foto van de jonge Marsman">
   <figcaption>De jonge Hendrik Marsman</figcaption>
</figure>

try it youself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_figcaption

Afbeeldingen plaats je op een pagina met behulp van het <img> element. Voor het <img> element zijn er vele attributen beschikbaar.

Het src attribuut bepaalt welke afbeelding moet worden geladen. Het srcattribuut kan een absolute of een relatieve verwijzing bevatten. Met het alt attribuut geef je een omschrijving op, die in de plaats van de afbeelding wordt weergegeven in tekst-georiënteerde browsers, voor bijvoorbeeld slechtzienden. Het titleattribuut wordt dan weer gebruikt om meer informatie over de afbeelding weer te geven.

<img src="ellerman.jpeg" alt="Campus Ellerman" title="De hoofdingang van het gebouw aan de Ellermanstraat">

De plaatsing van het <img>element bepaalt veel over hoe de afbeelding zal worden weergegeven op de website. We gaan dit echter later leren beïnvloeden met CSS.

formaten

Afbeeldingen bestaan in verschillende formaten en afmetingen. Het is van groot belang om goed na te denken over welk formaat van afbeelding je nodig hebt op jouw website. Dit is voor elke afbeelding telkens weer nodig.

De meest voorkomende afbeeldingsformaten op het web zijn: jpg, jpeg, png, gif en svg.

afmetingen

Afbeeldingen moeten groot genoeg worden opgeslagen om correct te worden weergegeven op grotere schermen. Een grotere afbeelding zal echter trager laden, waardoor jouw website over het algemeen trager zal worden ervaren. Het is dus belangrijk om een goed evenwicht te vinden tussen de afmetingen van de afbeelding en de bestandsgrootte ervan.

rechtenvrije afbeeldingen

Previous04. lijsten Next06. tabellen (html)

Last updated 2 years ago