WEB ESSENTIALS

Inhoud, tekst, multimedia, SVG

Semantische HTML

Semantische HTML

Semantische HTML

Welkom op mijn site

Ik ben een creative designer met
een liefde voor all things digital

Ontdek mijn diensten
Design
Development
Strategie

<h1>Welkom op mijn site</h1>

<p>
Ik ben een creative designer met
een liefde voor all things digital
</p>

<h2> Ontdek mijn diensten</h2>
<h3>Design</h3>
<h3>Development</h3>
<h3>Strategie</h3>

De juiste tags gebruiken is belangrijk om de inhoud toegankelijk te maken voor zowel mensen als computers

  • Het vertelt browsers hoe ze de inhoud moeten interpreteren
  • Het vertelt screen readers hoe ze de tekst moeten voorlezen
  • Het vertelt zoekmachines wat belangrijk is op de pagina

RECAP

Semantische
inhoud-tags

Semantische inhoud tags

Hoe uitgebreider je website wordt, hoe vaker je zaken zal groeperen in een
div-tag. Een div-tag zegt echter weinig, het heeft geen semantische waarde.

Daarom werden sinds HTML 5 nieuwe tags in het leven geroepen om de structuur van je pagina duidelijker te maken.

<div class="page">
	<div class="header">
		<div class="nav"></div>
  	</div>

	<div class="main">
      <div class="article"></div>
      <div class="article"></div>
	</div>

	<div class="footer"></div>
</div>
<div class="page">
	<header>
		<nav></nav>
  	</header>

	<main>
      <article></article>
      <article></article>
	</main>

	<footer></footer>
</div>

Semantische inhoud tags

👎

👍

<aside>

Header

De <header> tag wordt gebruikt om het bovenste deel van
een website aan te duiden, ze bevat meestal:

  • Het logo
  • De navigatiebalk
  • Soms de titel van een pagina en andere inleidende informatie
<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Producten</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Header

<aside>

Header

De <header>-tag kan je ook gebruiken om het bovenste deel van een section of article aan te duiden

Nav

De <nav>-tag gebruik je om navigatie aan te geven. Dat kan gaan over verschillende navigatieblokken op je site:

  • Hoofdmenu van de website

  • Footer-menu (met overzicht pagina's of sociale links)

  • Een zijbalk met navigatie

  • Interne navigatie binnen een artikel (bijv. inhoudsopgave)

<header>
   <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="over.html">Over ons</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

Main

De <main>-tag gebruik je om het hoofdgedeelte van je pagina aan te duiden. Je mag maar één main tag per pagina gebruiken.

<body>
  <header>...</header>

  <main>
      <section>
          <article>...</article>
          <article>...</article>
      </section>
  </main>

  <footer>...</footer>
</body>

Section

De <section>-tag gebruik je content te groeperen op je pagina

 

<main>
  <section>
    <h2>Over ons</h2>
    <p>Wij zijn een familiebedrijf in webdesign.</p>
  </section>

  <section>
    <h2>Diensten</h2>
    <p>We bouwen websites, webshops en geven advies.</p>
  </section>

  <section>
    <h2>Contact</h2>
    <p>Neem contact met ons op via het formulier hieronder.</p>
  </section>
</main>

Article

De <article>-tag gebruik je voor een zelfstandig blokje content dat op zich kan staan, denk aan:

  • Een card van een nieuwsartikel

  • Een card van een blogpost

  • Een card van een product op een webshop

  • Een card van een review of reactie

  • ...

 

Article

<main>
  <section>

    <h2>Laatste nieuws</h2>

    <article class="nieuws">
      <h3>Nieuwe webshop gelanceerd</h3>
      <p>Vandaag hebben we onze vernieuwde webshop online gezet!</p>
      <a href="nieuws.html">Lees meer</a>
    </article>

    <article class="nieuws">
      <h3>Vacature: webdesigner</h3>
      <p>We zoeken een creatieve front-end developer om ons team te versterken.</p>
      <a href="vacature.html">Bekijk vacature</a>
    </article>

  </section>
</main>

Aside

De <aside>-tag gebruik je voor inhoud die niet rechtstreeks verband houdt met de hoofdinhoud, bijv:

  • Een zijbalk met links of advertenties
  • Een kader met extra uitleg of tips
  • Een “gerelateerde artikelen”-blok
  • Een auteur-bio bij een blogpost

 

 <aside>
    <h3>Gerelateerde onderwerpen</h3>
    <ul>
      <li><a href="#">CSS uitleg</a></li>
      <li><a href="#">Wat is JavaScript?</a></li>
      <li><a href="#">Webstandaarden</a></li>
    </ul>
 </aside>

Aside

<aside>

Footer

De <footer>-tag gebruik je voor de afsluiting van een webpagina. In een footer vind je vaak de volgende zaken:

  • Contactinformatie

  • Een overzicht van de pagina's

  • Links naar privacybeleid, algemene voorwaarden, of sociale media

  • Credits of auteursinfo

🤓 Tip

Footers saai? Think again! Een overzicht van creatief gedesignde footers vind je op www.footer.design

Footer

<footer>
  <p>&copy; 2025 WebStudio BV</p>
  <nav>
    <ul>
      <li><a href="privacy.html">Privacybeleid</a></li>
      <li><a href="voorwaarden.html">Algemene voorwaarden</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <address>
    <p>Email: <a href="mailto:info@webstudio.be">info@webstudio.be</a></p>
  </address>
</footer>

Voorbeeld semantische structuur

<body>
  <header>
    <p>Logo</p>
    <nav>
      <ul>
        <li><a href="index.html">Homepagina</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Pagina titel</h1>
    <p>Introductie</p>

    <section>
      <h2>Nieuws</h2>
      <article>
        <header>
          <h3>Titel van het nieuwsbericht</h3>
          <time>08.12.2014</time>
        </header>
        <p>Inhoud van het nieuwsbericht
      </article>
      <aside>
        <p>Volg ons op <a href="https://mastodon.social" target="_blank">social media</a> voor real-time nieuws.</p>
      </aside>
    </section>
  </main>

  <footer>
    <address>
      Bezoek ons:<br>
      Leeuwstraat 1<br>
      9000 Gent
    </address>
    <p>© 2025 Artvelde Hogeschool</p>
  </footer>
</body>

Een voorbeeld van een volledige semantische structuur kan je terugvinden in de syllabus

Semantische
tekst-tags

Headings & paragraaf

We kennen al heel wat semantische tekst-elementen, denk maar aan de heading tags en de <p>-tag

<h1>This is heading 1.</h1>
<h2>This is heading 2.</h2>
<h3>This is heading 3.</h3>
<h4>This is heading 4.</h4>
<h5>This is heading 5.</h5>
<h6>This is heading 6.</h6>
<h1>Hoi hoi allemaal!</h1>

<p>Dit is een beetje text in een textbestandje.</p>

RECAP

Strong & em

Ook de <strong> & <em> tag zijn semantisch. Ze geven extra betekenis aan je tekst.

RECAP

<h1>Hoi hoi allemaal!</h1>

<p>Dit is een <em>beetje</em> text in een textbestandje.</p>
<h1>Hoi hoi allemaal!</h1>

<p>Dit is een <strong>beetje</strong> text in een textbestandje.</p>

Blockquote & cite

De <blockquote> & <cite> tag worden gebruikt om een quote en de juiste bronvermelding te tonen

  • <blockquote> gebruik je voor de quote
  • <cite> gebruik je om de bron of auteur van een citaat, boek, artikel, film, enz. aan te geven.
  • cite-attribuut gebruik je om eventueel een link te plaatsen naar de bron
<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>

Address

De <address>-tag gebruik je om contactinformatie weer te geven. Dat kan een adres zijn, maar ook een telefoonnummer of e-mail

<p>Want to work together? Contact me via the information below:</p>
<address>
  <a href="mailto:roodang@smail.com">roodang@smail.com</a><br />
  <a href="tel:+13165552398">(316).555.2398 </a>
</address>

Time

De <time>-tag gebruik je om datum of tijd weer te geven op een manier zodat ook zoekmachines de inhoud begrijpen

  • datetime attribuut:  hierbij geef je de notatie mee die zoekmachines begrijpen, bijv. YYYY-MM-DD voor datums 
<p>Gepubliceerd op <time datetime="2025-10-08">8 oktober 2025</time>.</p>



<p>De film begint om <time datetime="19:30">19:30</time> en duurt <time datetime="PT2H15M">2 uur en 15 minuten</time>.</p>

Semantische
mulitmedia-tags

Image

De <image> tag kennen we al. Deze gebruiken we om een afbeelding te plaatsen.

<img src="photo.jpg" alt="a sleepy cat"/>

figure & figcaption

De <figure>-tag en <figcaption>-tag horen bij elkaar en gebruiken we om afbeeldingen/media en een onderschrift te groeperen

Audio

De <audio>-tag gebruik je om audio toe te voegen. Deze tag heeft de volgende belangrijke attributen:

  • src: net zoals bij een afbeelding moet je ook een bestand inladen
  • controls: als deze aanwezig is worden de afspeelknoppen getoond
  • nog meer attributen vind je hier
<figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls src="media/t-rex-roar.mp3"></audio>
  <a href="media/t-rex-roar.mp3"> Download audio </a>
</figure>

Video

De <video>-tag gebruik je om een video te tonen.

  • Om het bestand in te laden gebruik je de <source>-tag
  • Je kan een fallback tekst plaatsen tussen de video tags die getoond wordt wanneer de bestanden niet werken
  • Ook hier kan je het controls-attribuut toevoegen, en andere attributen
<video controls width="640" height="360">
  <source src="voorbeeld.mp4" type="video/mp4">
  <source src="voorbeeld.webm" type="video/webm">
  Je browser ondersteunt het video-element niet.
</video>

SVG's toevoegen

SVG's

SVG (Scalable Vector Graphics) een bestandsformaat dat we kunnen inladen in onze website

  • Wordt vooral gebruikt voor iconen, logo's & eenvoudige illustraties
  • Vector based: de afbeelding bestaat niet uit pixels
  • Bestaat uit XML code (lijkt op html) -> kunnen we iets mee doen!

SVG's toevoegen op websites

Een svg kan je, net zoals andere bestandformaten, gewoon inladen met een <img>-tag

<img src="phone.svg" alt="phone icon"/>

SVG's toevoegen op websites

Aangezien SVG's uit code bestaan, kan je deze code ook rechtstreeks plakken in je HTML

  • Om de code te kopiëren: Ga naar het svg-bestand in je finder, klik rechtermuisknop en kies "Open in Text Editor"
  • Je kan nu attributen meegeven zoals width, height, fill...
<svg 
   class="icon"
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
   viewBox="0 0 256 256"><path d="M224,154.8l-47.09-21.11-.18-.08a19.94,19.94,0,0,0-19,1.75,13.08,13.08,0,0,0-1.12.84l-22.31,19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a11.76,11.76,0,0,0,.85-1.15,20,20,0,0,0,1.66-18.83,1.42,1.42,0,0,1-.08-.18L101.2,32A20.06,20.06,0,0,0,80.42,20.15,60.27,60.27,0,0,0,28,80c0,81.61,66.39,148,148,148a60.27,60.27,0,0,0,59.85-52.42A20.06,20.06,0,0,0,224,154.8ZM176,204A124.15,124.15,0,0,1,52,80,36.29,36.29,0,0,1,80.48,44.46l18.82,42L80.14,109.28a12,12,0,0,0-.86,1.16A20,20,0,0,0,78,130.08c9.42,19.28,28.83,38.56,48.31,48A20,20,0,0,0,146,176.63a11.63,11.63,0,0,0,1.11-.85l22.43-19.07,42,18.81A36.29,36.29,0,0,1,176,204Z"></path>
</svg>

SVG's toevoegen op websites

Je kan de svg ook een class geven en styling toevoegen in css

<svg 
   class="icon"
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
   viewBox="0 0 256 256"><path d="M224,154.8l-47.09-21.11-.18-.08a19.94,19.94,0,0,0-19,1.75,13.08,13.08,0,0,0-1.12.84l-22.31,19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a11.76,11.76,0,0,0,.85-1.15,20,20,0,0,0,1.66-18.83,1.42,1.42,0,0,1-.08-.18L101.2,32A20.06,20.06,0,0,0,80.42,20.15,60.27,60.27,0,0,0,28,80c0,81.61,66.39,148,148,148a60.27,60.27,0,0,0,59.85-52.42A20.06,20.06,0,0,0,224,154.8ZM176,204A124.15,124.15,0,0,1,52,80,36.29,36.29,0,0,1,80.48,44.46l18.82,42L80.14,109.28a12,12,0,0,0-.86,1.16A20,20,0,0,0,78,130.08c9.42,19.28,28.83,38.56,48.31,48A20,20,0,0,0,146,176.63a11.63,11.63,0,0,0,1.11-.85l22.43-19.07,42,18.81A36.29,36.29,0,0,1,176,204Z"></path>
</svg>
.icon {
	fill: #ff0000
}

8. Semantische HTML

By Lecturer GDM

8. Semantische HTML

article, section, header, main, footer, nav, aside, address, blockquote, cite, figure, figcaption, time, audio, video & meer doen met SVG

  • 137

More from Lecturer GDM