Deel 8: Meer semantische HTML

Web Design

"Inhoud"-elementen

Meer semantische HTML

"Inhoud"-elementen

Wanneer je verder en verder gaat in design, zal je de nood vinden om meer en meer <div> elementen toe te gaan voegen.

<div> heeft echter geen semantische waarde.

👎

👍

"Inhoud"-elementen

<article> een zelfstandig stuk content die op zich staat. (mag genest worden)

"Inhoud"-elementen

<section> een groepering van content. (bijvoorbeeld een titel + paragrafen)

"Inhoud"-elementen

<header> groepeert inleidende inhoud of navigatiehulpmiddelen.

"Inhoud"-elementen

<main> bevat de hoofdinhoud van een pagina.

"Inhoud"-elementen

<footer> de voettekst van een pagina of van de omvattende semantische sectie

"Inhoud"-elementen

<nav> een onderdeel van de pagina die navigatie aanbied

"Inhoud"-elementen

<aside> groepering van informatie die verwante informatie bevat

"Inhoud"-elementen

<address> groepering van contacteer-informatie van een persoon of organisatie

👎

👍

"Tekst"-elementen

Meer semantische HTML

"Tekst"-elementen

<blockquote> & <cite> een citaat met auteur en referentie

"Tekst"-elementen

<time> geeft aan dat informatie een tijdstip of een lengte in tijd is.

"Multimedia"-elementen

Meer semantische HTML

"Multimedia"-elementen

<img> wordt gebruikt voor afbeeldingen

"Tekst"-elementen

<figure> & <figcaption> groepering van afbeelding(en) en een beschrijving.

"Multimedia"-elementen

<audio> wordt gebruikt voor audio

"Multimedia"-elementen

<video> wordt gebruikt voor video

Meer doen met SVG

Meer semantische HTML

Meer doen met SVG

Staat voor Scalable Vector Graphic
We hebben .svg bestanden gezien als de vectoriele manier om afbeeldingen te gebruiken op het web

Meer doen met SVG

duck.png

12kb optimised

duck.svg

2kb optimised

LInk to sourcefile

Meer doen met SVG

svg kan gewoon gebruikt worden zoals een png:

<div>Mijn div</div>

div {
  width: 200px;
  height: 200px;
  background-image: url('duck.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: pink;
}

Meer doen met SVG

Maar: eigenlijk zijn SVG bestanden geschreven in XML (Extendible Markup Language)

HTML vond ook ooit zijn oorsprong in XML!

Meer doen met SVG

Dus als we een SVG bestand openen dan ziet dit er zo uit:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  <path class="first-yellow" fill="#FFDE76" d="M433.661,237.837c-4.497-6.214-4.88-14.44-1.225-21.184c11.365-20.967,17.773-45.014,17.651-70.566 C449.701,64.869,382.564-1.037,301.352,0.012c-80.183,1.036-144.864,66.359-144.864,146.788c0,32.553,10.595,62.63,28.526,86.972 c7.753,10.526,7.213,25.1-1.543,34.808c-13.297,14.741-41.935,24.306-102.595-16.277c-6.652-4.45-14.462-6.864-22.465-6.864l0,0 c-19.947,0-36.833,14.628-39.776,34.357C7.889,351.816,6.52,512,206.966,512h71.083C466.05,512,516.127,351.801,433.661,237.837z"/>
  <g>
    <path class="second-yellow" fill="#FFB641" d="M183.47,268.582c-3.93,4.357-9.202,8.261-16.244,10.552c24.469,5.882,38.82-1.319,47.149-10.552 c8.757-9.708,9.296-24.281,1.543-34.808c-17.93-24.342-28.526-54.42-28.526-86.973c0-75.833,57.503-138.226,131.281-145.98 c-5.689-0.601-11.467-0.884-17.323-0.809c-80.183,1.036-144.864,66.359-144.864,146.788c0,32.553,10.595,62.63,28.526,86.973 C192.766,244.3,192.226,258.873,183.47,268.582z"/>
    <path class="second-yellow" fill="#FFB641" d="M49.539,279.796c2.137-14.317,11.618-25.942,24.282-31.245c-4.866-2.022-10.091-3.11-15.412-3.11 l0,0c-19.947,0-36.833,14.628-39.776,34.357C7.889,351.816,6.52,512,206.966,512h30.905C37.425,512,38.794,351.816,49.539,279.796z "/>
    <path class="second-yellow" fill="#FFB641" d="M80.518,344.336c-8.766,8.656-10.277,22.268-3.598,32.619 c19.504,30.227,68.351,86.283,162.372,86.283c57.256,0,117.791-35.809,129.064-95.097c9.31-48.966-19.246-108.821-75.33-106.247 c-41.097,1.887-65.135,37.415-99.865,53.841c-24.398,11.54-50.844,18.651-77.687,21.307 C102.698,338.306,90.805,334.178,80.518,344.336z"/>
  </g>
  <path class="third-yellow" fill="#38484A" d="M388.394,110.833c-3.502,0-6.674-2.396-7.513-5.951l-3.715-15.73 c-0.981-4.153,1.591-8.315,5.743-9.295c4.152-0.979,8.315,1.591,9.295,5.743l3.715,15.73c0.981,4.153-1.591,8.315-5.743,9.295 C389.58,110.765,388.982,110.833,388.394,110.833z"/>
  <path class="first-yellow" fill="#FFB641" d="M427.618,68.994c0,0,3.198,45.832-18.033,66.591c-21.231,20.759,14.154,53.314,56.145,22.646 c6.032-4.405,12.143-7.204,18.184-8.768c7.777-2.012,13.243-8.967,13.243-16.999l0,0c0-7.724-5.031-14.597-12.438-16.786 c-4.925-1.456-11.18-2.325-18.516-1.325c0,0,25.393-22.138,19.119-47.753c-2.027-8.28-11.856-11.726-18.836-6.832 C457.461,66.094,443.454,72.764,427.618,68.994z"/>
</svg>

Meer doen met SVG

<div>
  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    ...[removed for clarity]...
  </svg>
</div>

div {
  width: 200px;
  height: 200px;
  background-color: pink;
}

div svg {
  width: 200px;
}

Meer doen met SVG

En alles die HTML/SVG is, kunnen we stijlen met CSS!

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  <path class="first-yellow" fill="#FFDE76" d="M433.661,237.837c-4.497-6.214-4.88-14.44-1.225-21.184c11.365-20.967,17.773-45.014,17.651-70.566 C449.701,64.869,382.564-1.037,301.352,0.012c-80.183,1.036-144.864,66.359-144.864,146.788c0,32.553,10.595,62.63,28.526,86.972 c7.753,10.526,7.213,25.1-1.543,34.808c-13.297,14.741-41.935,24.306-102.595-16.277c-6.652-4.45-14.462-6.864-22.465-6.864l0,0 c-19.947,0-36.833,14.628-39.776,34.357C7.889,351.816,6.52,512,206.966,512h71.083C466.05,512,516.127,351.801,433.661,237.837z"/>
  <g>
    <path class="second-yellow" fill="#FFB641" d="M183.47,268.582c-3.93,4.357-9.202,8.261-16.244,10.552c24.469,5.882,38.82-1.319,47.149-10.552 c8.757-9.708,9.296-24.281,1.543-34.808c-17.93-24.342-28.526-54.42-28.526-86.973c0-75.833,57.503-138.226,131.281-145.98 c-5.689-0.601-11.467-0.884-17.323-0.809c-80.183,1.036-144.864,66.359-144.864,146.788c0,32.553,10.595,62.63,28.526,86.973 C192.766,244.3,192.226,258.873,183.47,268.582z"/>
    <path class="second-yellow" fill="#FFB641" d="M49.539,279.796c2.137-14.317,11.618-25.942,24.282-31.245c-4.866-2.022-10.091-3.11-15.412-3.11 l0,0c-19.947,0-36.833,14.628-39.776,34.357C7.889,351.816,6.52,512,206.966,512h30.905C37.425,512,38.794,351.816,49.539,279.796z "/>
    <path class="second-yellow" fill="#FFB641" d="M80.518,344.336c-8.766,8.656-10.277,22.268-3.598,32.619 c19.504,30.227,68.351,86.283,162.372,86.283c57.256,0,117.791-35.809,129.064-95.097c9.31-48.966-19.246-108.821-75.33-106.247 c-41.097,1.887-65.135,37.415-99.865,53.841c-24.398,11.54-50.844,18.651-77.687,21.307 C102.698,338.306,90.805,334.178,80.518,344.336z"/>
  </g>
  <path class="third-yellow" fill="#38484A" d="M388.394,110.833c-3.502,0-6.674-2.396-7.513-5.951l-3.715-15.73 c-0.981-4.153,1.591-8.315,5.743-9.295c4.152-0.979,8.315,1.591,9.295,5.743l3.715,15.73c0.981,4.153-1.591,8.315-5.743,9.295 C389.58,110.765,388.982,110.833,388.394,110.833z"/>
  <path class="first-yellow" fill="#FFB641" d="M427.618,68.994c0,0,3.198,45.832-18.033,66.591c-21.231,20.759,14.154,53.314,56.145,22.646 c6.032-4.405,12.143-7.204,18.184-8.768c7.777-2.012,13.243-8.967,13.243-16.999l0,0c0-7.724-5.031-14.597-12.438-16.786 c-4.925-1.456-11.18-2.325-18.516-1.325c0,0,25.393-22.138,19.119-47.753c-2.027-8.28-11.856-11.726-18.836-6.832 C457.461,66.094,443.454,72.764,427.618,68.994z"/>
</svg>