De oorsprong van het World Wide Web (WWW)

Het World Wide Web (WWW), vaak simpelweg "het web" genoemd, ontstond in de late jaren '80 en vroege jaren '90 door het pionierswerk van de Britse informaticus Tim Berners-Lee. Het is een uitgebreid en wereldwijd systeem van onderling verbonden documenten, multimedia en interactieve webpagina’s, toegankelijk via internet. Deze rijke verzameling van informatie is gehuisvest op een netwerk van computerservers over de hele wereld, geoptimaliseerd om gebruikers snelle en efficiënte toegang tot informatie te bieden.

Het WWW werd ontwikkeld om wetenschappelijke informatie te delen, met als doel onderzoekers in staat te stellen documenten en data efficiënt met elkaar te delen. Hier volgen enkele cruciale stappen in het ontstaan van het WWW:

1. Het Voorstel: In maart 1989 schreef Tim Berners-Lee een voorstel voor het World Wide Web, waarin hij het idee presenteerde van een systeem voor het delen van informatie via hyperlinks.
2. Eerste Webserver en Browser: In 1990 creëerde Berners-Lee 's werelds eerste webserver en browser, die hij "WorldWideWeb" noemde. Dit gebeurde op een NeXT-computer, een project van Steve Jobs na zijn vertrek bij Apple.
3. Eerste Website: In 1991 lanceerde Berners-Lee de eerste website, info.cern.ch, die informatie bood over het World Wide Web-project zelf.
4. Introductie van HTML en URL's: Berners-Lee introduceerde HTML (Hypertext Markup Language) om webpagina’s te structureren en URL's (Uniform Resource Locators) om bronnen op het web te identificeren.
5. Openbaar Beschikbaar: In 1993 werd de technologie achter het WWW openbaar gemaakt, wat leidde tot een explosieve groei van webpagina's wereldwijd.

De snelle ontwikkeling van het WWW heeft de manier waarop we toegang hebben tot informatie en met elkaar communiceren ingrijpend veranderd. Het legde de basis voor het hedendaagse internet en blijft zich ontwikkelen, met een blijvende impact op de samenleving, communicatie en technologie.

HTML en CSS: De Oorsprong en Evolutie

HTML (Hypertext Markup Language) en CSS (Cascading Style Sheets) vormen samen de basis van het moderne web. Ze stellen ontwikkelaars in staat om gestructureerde en visueel aantrekkelijke webpagina’s te maken. Maar hoe zijn ze ontstaan en geëvolueerd?

De Opkomst van HTML

HTML werd in 1989 door Tim Berners-Lee bedacht als een manier om wetenschappelijke documenten te delen en koppelen op het opkomende World Wide Web. HTML maakt gebruik van markup-tags om de structuur en elementen van een webpagina aan te geven, zoals koppen, paragrafen, lijsten, en hyperlinks.

De Introductie van CSS

In 1996 werd CSS geïntroduceerd om stijl en lay-out aan HTML-documenten toe te voegen. Het bood een manier om de presentatie van webpagina's te beheren en te controleren, wat leidde tot een duidelijke scheiding tussen inhoud en presentatie.

Continue Innovatie

HTML en CSS zijn voortdurend in ontwikkeling, met verbeteringen en updates die regelmatig worden geïntroduceerd om aan de veranderende behoeften van webontwikkelaars en gebruikers te voldoen. Van de introductie van responsief design technieken met CSS3 tot de verbeterde semantische elementen in HTML5, elke update brengt nieuwe mogelijkheden en verbeteringen. Dit heeft bijgedragen aan een meer interactief, toegankelijk, en gebruiksvriendelijk web, en stelt ontwikkelaars in staat om meer geavanceerde en visueel aantrekkelijke webervaringen te creëren.

Ontdek de transformatie en de groeiende capaciteiten van HTML en CSS met ons, en duik in specifieke elementen, tags en eigenschappen in de volgende modules. Van de basisprincipes tot geavanceerde technieken, we zullen de kracht en potentie van deze talen onthullen om moderne, responsieve en gebruikersvriendelijke webpagina’s te bouwen.

Basiscursus HTML

Bestands- en mappenbeheer

Het correct organiseren van bestanden en mappen is cruciaal wanneer je lokaal aan een website werkt. Een goed georganiseerde mappenstructuur zorgt voor een efficiënte workflow en maakt het eenvoudiger om je website te beheren en bij te werken. Het helpt ook bij het probleemloos uploaden van de site naar een webserver.

1. Creëren van een Projectmap: Maak een nieuwe map op je computer waar je alle bestanden voor je website gaat opslaan. Geef deze map een relevante naam die het project weerspiegelt, en bewaar het op een locatie die gemakkelijk te onthouden en te bereiken is.
2. Organisatie van Submappen: Creëer submappen binnen je projectmap voor afbeeldingen, CSS-stijlbladen, JavaScript-bestanden en andere typen content. Dit helpt om je bestanden georganiseerd en toegankelijk te houden.

Bestandsbenaming en -indeling

Het nauwkeurig benoemen en indelen van je bestanden is net zo belangrijk als het organiseren van je mappen. Het zorgt voor een gestroomlijnde ontwikkelingservaring en maakt het beheer van je website eenvoudiger.

• index.html: Dit is het standaard startpunt van je website. Het is de hoofdpagina die wordt geladen wanneer gebruikers je domeinnaam bezoeken.
• Afbeeldingen: Sla alle afbeeldingen op in een afzonderlijke map om ze georganiseerd en gemakkelijk toegankelijk te houden.
• CSS: Bewaar alle CSS-stijlbladen in een aparte map. Dit maakt het eenvoudiger om stijlen te beheren en bij te werken.

Benaming conventies

Het gebruik van duidelijke en consistente benamingen is essentieel voor een efficiënte websiteontwikkeling. Hier zijn enkele beste praktijken:

1. Hoofdlettergevoeligheid: Wees consistent in het gebruik van hoofdletters. Het is een goede praktijk om bestands- en mapnamen in kleine letters te houden om verwarring te voorkomen, aangezien sommige servers hoofdlettergevoelig zijn.
2. Spaties Vermijden: Vermijd spaties in bestands- en mapnamen. Gebruik in plaats daarvan koppeltekens (-) of underscores (_) om woorden te scheiden, bijvoorbeeld “about-us.html”.
Top

Introductie tot HTML

Wat is HTML?

HTML (Hypertext Markup Language) is de essentiële taal voor het creëren van webpagina's. Het legt de fundering waarop webcontent wordt gebouwd en weergegeven in webbrowsers.

• Het structureert content op het web en definieert elementen zoals tekst, afbeeldingen, links en formulieren.
• Het kan samenwerken met talen zoals CSS (Cascading Style Sheets) en JavaScript om esthetisch en functioneel rijke webervaringen te creëren.
• HTML gebruikt markup om de structuur en presentatie van webcontent te beheren.

Voorbeeld van een eenvoudig HTML document

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn Eerste Webpagina</title>
</head>
<body>
    <h1>Hallo, wereld!</h1>
    <p>Welkom bij de wereld van HTML.</p>
</body>
</html>

Het voorbeeld uitgelegd

• De <!DOCTYPE html> declaration definieert het document als een HTML5 document.
• Het <html> element is het root element van een HTML pagina. Het omvat alle andere elementen en is daarom het enige bovenliggende element van alle andere elementen.
• In het <head> element staat meta-informatie over de HTML pagina. Meta-data zijn gegevens over de gegevens, bij een webpagina de info of de gegevens over de html gegevens.
• Het <title> element bepaalt de titel van de HTML pagina, verschijnt bovenaan in de titelbalk van de browser of in de tab van de webpagina.
• Het <body> element bepaalt de “body” en is de container voor alle zichtbare elementen zoals koppen (headings), alinea’s (paragraphs), afbeeldingen, hyperlinks, tabellen, lijsten, enzv.
• Het <h1> element beschrijft een grote kop (heading).
• Het <p> element beschrijft een alinea (paragraph).

Het <h> Element

Dit element definieert koppen in de tekst. Er zijn zes niveaus, <h1> tot <h6>, waarbij <h1> de hoogste en meest prominente kop is, en <h6> de laagste.

<h1>Hoofdkop</h1>
<h2>Subkop</h2>

Gebruik deze elementen om een hiërarchische structuur in je tekst aan te brengen, waarbij je begint met een <h1> voor de titel en vervolgens lagere niveau koppen gebruikt voor subsecties.

Het <p> Element

Het <p> element definieert een paragraaf. Het wordt gebruikt om tekst en inline-elementen te scheiden en te groeperen, wat de leesbaarheid verbetert.

<p>Dit is een voorbeeld van een paragraaf. Het scheidt tekst in beheersbare blokken en verbetert de leesbaarheid.</p>

Maak je paragrafen niet te lang en gebruik ze om je tekst te structureren en de lezer door je content te leiden.

De <ul>, <ol> en <li> Elementen

Lijsten zijn een essentieel onderdeel van HTML voor het ordenen van informatie. Het <ul> element definieert een ongeordende lijst, terwijl het <ol> element een geordende lijst definieert. Het <li> element wordt gebruikt om items in de lijst weer te geven.

<ul>
    <li>Item Een</li>
    <li>Item Twee</li>
</ul>

<ol>
    <li>Eerste Item</li>
    <li>Tweede Item</li>
</ol>

Gebruik <ul> voor een lijst waarin de volgorde van de items niet belangrijk is, en <ol> waar de volgorde wel telt.

De <strong> en <em> Elementen

Het <strong> element wordt gebruikt om sterke nadruk te leggen op een tekst, terwijl het <em> element tekst benadrukt voor nadruk. Het is gebruikelijk dat browsers <strong> tekst vet weergeven en <em> tekst cursief.

Dit is <strong>belangrijke</strong> tekst. Dit is <em>benadrukte</em> tekst.

Gebruik deze elementen spaarzaam om specifieke delen van je tekst te benadrukken zonder de leesbaarheid te beïnvloeden.

Attributen

HTML-attributen zijn extra informatie die aan HTML-elementen wordt toegevoegd om specifieke eigenschappen of kenmerken van die elementen te definiëren of te wijzigen.

• Attributen zijn altijd opgenomen in de openingstag van een element.
• Ze worden altijd voorgesteld in naam/waarde-paren, zoals naam="waarde".

Veelgebruikte HTML-attributen

Elk HTML-attribuut heeft een specifiek doel en wordt gebruikt om de functionaliteit of het uiterlijk van een element te wijzigen. Hier zijn voorbeelden van veelgebruikte attributen en hoe ze worden gebruikt:

• class: Specificeert een of meer klassennamen voor een element.

  <div class="container"></div>

• id: Geeft een unieke ID aan een element.

  <div id="header"></div>

• style: Voegt inline CSS-stijlen toe aan een element.

  <p style="color: red;">Dit is rode tekst.</p>

• alt: Biedt een alternatieve tekst voor een afbeelding.

  <img src="image.jpg" alt="Een beschrijving van de afbeelding">

Het correct gebruiken van HTML-attributen is essentieel voor het creëren van toegankelijke, gebruiksvriendelijke en goed gestructureerde webpagina's. Zorg ervoor dat je de tijd neemt om te begrijpen hoe elk attribuut werkt en waar het het beste kan worden toegepast om je webontwikkelingsvaardigheden te verbeteren.

HTML afbeeldingen

Het HTML <img> element wordt gebruikt om een afbeelding in een webpagina in te voegen. In plaats van de afbeelding zelf, wordt er een link naar de afbeelding in de pagina opgenomen. Het <img> element is een leeg element, wat betekent dat deze alleen attributen bevat en geen sluitingstag heeft.

Er zijn twee verplichte attributen voor het <img> element:

• src: geeft het pad naar de afbeelding aan.
• alt: biedt een tekstalternatief voor de afbeelding, voor het geval de afbeelding niet kan worden geladen of wanneer de gebruiker een schermlezer gebruikt.

Lazy Loading van afbeeldingen

Lazy loading is een optimalisatietechniek waarbij het laden van afbeeldingen wordt uitgesteld tot ze bijna in de viewport komen. Dit verbetert de laadsnelheid van de webpagina, vooral bij pagina's met veel afbeeldingen.

Voorbeeld van lazy loading:

<img src="flower.jpg" alt="Een prachtige bloem" loading="lazy">

Door het attribuut loading="lazy" toe te voegen, instrueer je de browser om de afbeelding pas te laden wanneer deze bijna in het zicht van de gebruiker komt. Dit kan de laadtijd van de pagina aanzienlijk verkorten.

Tip: Voeg "loading='lazy'" alleen toe aan afbeeldingen die below the fold zijn gepositioneerd ("Onder de vouw" of "below the fold" verwijst naar het gedeelte van de webpagina dat niet zichtbaar is zonder te scrollen).

Afbeeldingsformaten

Er zijn verschillende afbeeldingsformaten beschikbaar voor webgebruik, elk met zijn eigen voor- en nadelen:

• WebP - Een modern formaat dat zowel lossy (een compressiemethode waarbij data en kwaliteit verloren kunnen gaan om de bestandsgrootte te verkleinen) als lossless (een compressiemethode waarbij de originele data en kwaliteit behouden blijven, ondanks de compressie) compressie biedt en efficiënt is in termen van bestandsgrootte.
• jpeg - Uitstekend voor foto's en afbeeldingen met veel details en kleuren. JPEG maakt gebruik van lossy compressie, wat betekent dat sommige beelddetails en -kwaliteit worden opgeofferd om de bestandsgrootte aanzienlijk te verminderen. Dit maakt JPEG ideaal voor het opslaan en delen van foto's op het web en andere platforms waar een kleinere bestandsgrootte gewenst is. Ondanks het verlies van details, behoudt JPEG nog steeds een hoge beeldkwaliteit bij een lagere bestandsgrootte.
• png - Ideaal voor afbeeldingen die transparantie nodig hebben.
• gif - Geschikt voor eenvoudige animaties en afbeeldingen met beperkte kleuren.
• svg - Perfect voor vectorafbeeldingen zoals iconen en logo's.

Voor een gedetailleerd overzicht van de verschillende afbeeldingsformaten en hun toepassingen kun je hier terecht.

Samenvatting

In dit hoofdstuk hebben we het gehad over hoe je afbeeldingen in HTML kunt gebruiken, hoe je hun grootte kunt specificeren, en het belang van het alt-attribuut voor toegankelijkheid en SEO. We hebben ook het concept van lazy loading geïntroduceerd om de prestaties van je webpagina's te verbeteren en de verschillende afbeeldingsformaten besproken die je kunt gebruiken, afhankelijk van je specifieke behoeften en vereisten.

Het <a> element - koppelingen maken

Het <a>-element, afgeleid van "anchor" of "link," is een onmisbaar HTML-element dat wordt gebruikt om verwijzingen naar andere webpagina's of bronnen te creëren. Koppelingen vormen de kern van het web en stellen gebruikers in staat om naadloos van de ene webpagina naar de andere te navigeren. In dit hoofdstuk zullen we leren hoe het <a>-element op de juiste manier te gebruiken om doeltreffende koppelingen te maken.

Het <a>-element wordt geopend met <a> en gesloten met </a>. Binnen het <a>-element plaatsen we de URL waarnaar we willen verwijzen tussen dubbele aanhalingstekens in het href-attribuut.

Standaard worden links in de browser weergegeven in blauw en onderstreept om aan te geven dat ze klikbaar zijn. Hun stijl kan worden aangepast met behulp van CSS, zowel wanneer ze worden bezocht als wanneer de muisaanwijzer erover beweegt. Met CSS kunnen ontwikkelaars de standaardweergave van links aanpassen en verfraaien, inclusief de kleur, tekstdecoratie en interactieve effecten.

Het basisgebruik van <a>

Absolute URL's

Een absolute HTML-ankerlink, ook wel een absolute URL-link genoemd, is een hyperlink binnen een HTML-document die de volledige URL van de doelpagina of bron specificeert. Deze URL bevat zowel het protocol (zoals "http://" of "https://") als het domein (zoals "www.example.com") van de doelpagina.

Hier is een voorbeeld:

<a href="https://www.example.com">Ga naar voorbeeld.com</a>

In dit voorbeeld wordt de tekst "Ga naar voorbeeld.com" weergegeven als een klikbare link. Wanneer een gebruiker erop klikt, wordt hij doorgestuurd naar de webpagina https://www.example.com.

Relatieve URL's

Naast absolute URL's kunnen we ook HTML-ankerlinks gebruiken om naar andere pagina's binnen dezelfde website te linken. Een relatieve URL is een pad naar een bestemming binnen de huidige website, zoals:

<a href="/pagina2.html">Ga naar Pagina 2</a>

Dit zou de gebruiker naar de pagina met de naam "pagina2.html" in dezelfde directory sturen.

Het openen van koppelingen in nieuwe tabbladen

Soms willen we dat een koppeling wordt geopend in een nieuw browser tabblad of venster. Dit kan worden bereikt met het target-attribuut:

<a href="https://www.example.com" target="_blank">Open in nieuw tabblad</a>

Met target="_blank" wordt de koppeling geopend in een nieuw tabblad. Er kunnen verschillende waarden worden toegewezen aan het target-attribuut, zoals:

• _self: Opent het gekoppelde document in hetzelfde venster of tabblad waarin de link is aangeklikt (dit is de standaardinstelling).
• _parent: Opent het gekoppelde document in het bovenliggende venster.
• _top: Opent het gekoppelde document in het volledige venster.
• framenaam: Opent het gekoppelde document in het genoemde iframe.

Koppelingen naar e-mailadressen

Je kunt ook e-mailadressen koppelen door "mailto:" voor het e-mailadres te plaatsen:

<a href="mailto:voorbeeld@email.com">Stuur een e-mail</a>

Samenvatting

Het <a>-element is cruciaal voor het maken van koppelingen in HTML-documenten. Met het href-attribuut definieer je de doel-URL van de koppeling, en met het target-attribuut kun je aangeven hoe de koppeling moet worden geopend. Of je nu naar andere webpagina's, bestanden binnen dezelfde website of zelfs e-mailadressen wilt linken, het <a>-element biedt de flexibiliteit om dit te bereiken.

Geavanceerd gebruik van het <a> element

Het <a>-element biedt meer dan alleen basislinking. Hier gaan we dieper in op geavanceerde toepassingen en attributen die je kunt gebruiken om je koppelingen krachtiger te maken.

Ankerlinks binnen dezelfde pagina

Met ankerlinks kun je gebruikers naar specifieke secties van dezelfde webpagina leiden. Dit wordt vaak gebruikt voor lange pagina's met meerdere secties. Om een ankerlink te maken, voeg je een `id`-attribuut toe aan het doelgedeelte en gebruik je de `#`-notatie in het `href`-attribuut:

<a href="#sectie1">Ga naar Sectie 1</a>

En hier is het doelgedeelte met het `id`-attribuut:

<section id="sectie1"><h3>Sectie 1</h3><p>Dit is de eerste sectie van de pagina.</p></section>

Title-attribuut

Het `title`-attribuut voegt extra informatie toe aan de koppeling, die wordt weergegeven als een tooltip wanneer de gebruiker met de muis over de link beweegt:

<a href="https://www.example.com" title="Bezoek voorbeeld.com voor meer informatie">Voorbeeld</a>

Downloadbare bestanden

Je kunt het <a>-element gebruiken om bestanden te koppelen die door gebruikers kunnen worden gedownload. Gebruik hiervoor het `download`-attribuut:

<a href="document.pdf" download>Download PDF</a>

Externe Koppelingen en Veiligheid

Bij het linken naar externe websites, is het een best practice om het rel-attribuut te gebruiken met de waarde noopener noreferrer voor verbeterde veiligheid:

<a href="https://www.externesite.com" target="_blank" rel="noopener noreferrer">Externe Site</a>

Deze aanpak voorkomt dat de nieuwe pagina toegang heeft tot de window.opener eigenschap en zorgt ervoor dat de oorspronkelijke pagina niet door de nieuwe pagina kan worden gemanipuleerd.

Class en ID attributen in HTML

In HTML worden class en id attributen gebruikt om elementen te identificeren en te manipuleren. Ze zijn essentieel voor het toepassen van CSS-stijlen en het implementeren van JavaScript-functionaliteiten. In deze uitgebreide handleiding duiken we dieper in deze concepten.

Class attribuut

Het class attribuut wordt gebruikt om een of meer stijlen te definiëren die kunnen worden toegepast op meerdere elementen op een webpagina. Dit vergemakkelijkt de toepassing van specifieke stijlen zonder elk element individueel te hoeven benoemen.

Als voorbeeld: een enkele class:

<p class="highlight">Dit is een opvallende paragraaf.</p>

In CSS begin je de regel met een punt, gevolgd door de klassennaam om de class te selecteren. In dit voorbeeld wordt alle tekst met de class "highlight" rood weergegeven:

<style>
.highlight { color: red; }
</style>

Elementen kunnen ook meerdere klassen hebben, gescheiden door spaties, zoals hier:

<p class="highlight information">Dit is een informatieve en opvallende paragraaf.</p>

Je kunt specifieke stijlen toepassen op alle elementen met de class "highlight" of "information", wat bijdraagt aan flexibiliteit en efficiëntie in webdesign.

<style>
.highlight { color: red; }
.information { font-size: 18px; }
.highlight.information { font-weight: bold; }
</style>

Het benoemen van klassen

Het kiezen van passende klassennamen is essentieel. Deze namen moeten duidelijk, beschrijvend en consistent zijn om de leesbaarheid en het onderhoud van de code te optimaliseren.

Bijvoorbeeld, in het geval van een e-commerce website, kun je klassennamen hebben zoals .product-list voor een lijst van producten, .product-item voor individuele productitems en .shopping-cart voor het winkelwagentje. Het is belangrijk om generieke of stijlgebaseerde namen te vermijden. In plaats daarvan kies je voor namen die de functie of context van de elementen aangeven.

<div class="product-list">
  <div class="product-item">
    <h2>Product Naam</h2>
    <p>Product Beschrijving.</p>
  </div>
  <!-- Meer product items -->
</div>

<div class="shopping-cart">
  <!-- Winkelwagentje items -->
</div>

BEM methodologie

BEM, een afkorting voor Block, Element, Modifier, is een benamingconventie die de leesbaarheid en onderhoudbaarheid van CSS/HTML code versterkt. Het helpt ontwikkelaars om snel de functie en relaties van de HTML-elementen te identificeren, wat vooral handig is voor grotere projecten en teams.

De cursus over het benoemen van klassen volgens de BEM methodologie, vind je hier.

ID Attribuut

Het id attribuut identificeert een uniek element op de webpagina. Dit attribuut is vooral nuttig voor het stijlen van specifieke elementen, ankerpunten voor interne links en het manipuleren van elementen met JavaScript.

<style>
#intro { font-weight: bold; color: blue; }
</style>
<p id="intro">Dit is de inleidende paragraaf.</p>

Wanneer ID’s en classes te gebruiken

ID’s zijn bestemd voor unieke elementen, terwijl classes vaak worden gebruikt voor stijlen die op meerdere elementen van toepassing zijn.

ID voor navigatie

ID’s verbeteren de navigatie op een webpagina. Gebruikers kunnen met ankerlinks snel naar verschillende secties van een pagina springen, wat de gebruikerservaring verbetert.

<a href="#intro">Spring naar de Introductie</a>

Aanvullend voorbeeld

Laten we nog een voorbeeld bekijken om de concepten van classes en id's te versterken. Hier is een voorbeeld van het gebruik van zowel class als ID attributen om een gestructureerde en gestileerde webpagina-element te creëren:

<div id="header" class="site-header">
  <h1 class="title">Welkom op Mijn Website</h1>
  <nav class="main-nav">
    <ul>
      <li class="nav-item"><a href="#home">Home</a></li>
      <li class="nav-item"><a href="#about">Over Mij</a></li>
    </ul>
  </nav>
</div>

Samenvatting en Best Practices

• Class Attributen: Gebruik class attributen voor herbruikbare stijlen en groepen van elementen. Bijvoorbeeld, .button voor alle knoppen die dezelfde stijl delen.
• ID Attributen: Reserveer id attributen voor unieke, specifieke elementen op de pagina, zoals #header voor de hoofdkop van een pagina.
• Beschrijvende Namen: Kies betekenisvolle, beschrijvende namen voor klassen en id’s om de leesbaarheid van de code te bevorderen. Namen als .navigation-menu zijn duidelijker dan generieke namen als .menu1.
• BEM Conventie: Overweeg het gebruik van benamingconventies zoals BEM om de consistentie en onderhoudbaarheid van de code te verbeteren. Het maakt de structuur en relaties binnen de code meteen duidelijk.

Door deze richtlijnen en best practices toe te passen, kun je efficiënt en effectief stijlen en interacties toewijzen aan HTML-elementen, wat resulteert in goed gestructureerde, functionele en gebruiksvriendelijke websites.

Het <div>-element

Het <div>-element dient als een algemene container die wordt gebruikt voor het groeperen en structureren van inhoud op webpagina's. Het kan worden beschouwd als een lege doos, klaar om te worden gevuld met vrijwel elk type inhoud of web-element. Hoewel het geen semantische betekenis heeft, biedt het flexibiliteit en wordt het vaak gebruikt voor stijl- en scripttoepassingen.

Het gebruik van het <div>-element

<div>
    <p>Dit is de inhoud van mijn eerste div.</p>
</div>

Toepassingen van het <div>-element

Het <div>-element wordt vaak gebruikt in combinatie met CSS om elementen zoals headers, navigatiebalken, zijbalken, hoofdinhoud en voetnoten te stijlen en positioneren.

Styling met CSS

<div class="content">
    <h1>Welkom op mijn website</h1>
    <p>Hier vind je diverse inhoud.</p>
</div>

<style>
.content {
    background-color: lightgrey;
    padding: 20px;
    border-radius: 5px;
}
</style>

Responsieve lay-outs

Je kunt ook responsieve lay-outs creëren met <div>-elementen en CSS-frameworks zoals Bootstrap, of technieken zoals Flexbox en CSS Grid, om een adaptieve gebruikerservaring te bieden op verschillende apparaten.

Semantische HTML-elementen

Introductie tot Semantische HTML-elementen

HTML biedt naast het <div>-element ook een reeks semantische elementen die een specifieke betekenis hebben. Ze helpen bij het organiseren en structureren van webinhoud.

<header>

Dit element vertegenwoordigt een container voor inleidende inhoud of een navigatiebalk. Het wordt meestal eenmaal bovenaan een pagina gebruikt.

<header>
    <h1>Website Titel</h1>
    <nav>
        ...
    </nav>
</header>

<nav>

Vertegenwoordigt een sectie met navigatielinks. Hoewel niet elk groepje links in een <nav> hoeft te worden gezet, is het bedoeld voor de belangrijkste navigatieblokken.

<nav>
    <ul>
        <li>Home</li>
        <li>Over</li>
        <li>Contact</li>
    </ul>
</nav>

<section>

Dit element vertegenwoordigt een zelfstandige sectie in een document, pagina of applicatie. Een sectie moet een unieke kop hebben die het onderwerp of doel beschrijft.

<section>
    <h2>Sectie Titel</h2>
    ...
</section>

<article>

Dit element is bedoeld voor inhoud die zelfstandig gedistribueerd of syndiceerd kan worden, zoals een blogpost, nieuwsverhaal of opmerking.

<article>
    <h2>Blog Titel</h2>
    <p>Dit is een blogpost.</p>
</article>

<aside>

Dit vertegenwoordigt een sectie van een pagina waarvan de inhoud slechts indirect gerelateerd is aan de hoofdinhoud. Het kan worden gebruikt voor zijbalken, call-outs of advertenties.

<aside>
    <h3>Gerelateerd nieuws</h3>
    ...
</aside>

<footer>

Een container voor de voettekst van een document of sectie. Het kan auteursinformatie, copyrightgegevens, links naar gerelateerde documenten en andere dergelijke informatie bevatten.

<footer>
    <p>Copyright © 2023</p>
</footer>

<main>

Dit element wordt gebruikt voor het hoofdcontentgebied van een document dat uniek is voor dat document en exclusief inhoud bevat die over de hoofdonderwerpen gaat. Er mag slechts één <main>-element per pagina zijn.

<main>
    ...
</main>

Voordelen van Semantische Elementen

Het gebruik van semantische elementen verbetert de leesbaarheid van de code, maakt de structuur van een document duidelijk en heeft verschillende voordelen voor zowel gebruikers als zoekmachines. Ten eerste bevordert het de toegankelijkheid voor diverse groepen gebruikers, waaronder:

• Blinden en slechtzienden die schermlezers of brailleleesregels gebruiken.
• Doven en slechthorenden die afhankelijk kunnen zijn van ondertiteling of transcripties.
• Gebruikers met motorische beperkingen die wellicht geen muis kunnen gebruiken en vertrouwen op toetsenbordnavigatie of spraakbediening.
• Gebruikers met cognitieve beperkingen die baat hebben bij duidelijke structuren en semantische aanwijzingen.

Bovendien verbetert het gebruik van semantische elementen de SEO (Search Engine Optimization) omdat zoekmachines beter begrijpen welke delen van de pagina het belangrijkst zijn, wat resulteert in effectievere en relevantere indexering en rangschikking van webcontent.

HTML structuur: ouder-, kind- en broer/zus-elementen

In HTML is de structuur en relatie tussen elementen essentieel voor het organiseren van de inhoud op een webpagina. Elementen kunnen binnen andere elementen worden genest, wat resulteert in een hiërarchische structuur van parent- en child-elementen. Daarnaast kunnen elementen ook siblings of broer/zus-elementen zijn.

Parent- en child-elementen

Een parent-element is een HTML-element dat andere elementen bevat. De elementen binnen een parent-element worden child-elementen genoemd. Child-elementen erven eigenschappen en stijlen van hun parent-elementen.

Voorbeeld:

<div> 
  <p>Dit is een child-element van de div.</p> 
</div>

Siblings

Elementen die op hetzelfde niveau binnen een parent-element zijn genest, worden siblings of broer/zus-elementen genoemd. Ze delen hetzelfde parent-element.

Voorbeeld:

<div>
  <p>Dit is een sibling-element.</p>
  <p>Dit is een ander sibling-element.</p>
</div>

Overerving van stijlen

Stijlen die aan een parent-element zijn toegevoegd, worden vaak overgeërfd door de child-elementen. Dit betekent dat als een tekstkleur is toegevoegd aan een div-element, alle tekst binnen dat div-element dezelfde kleur zal hebben, tenzij anders gespecificeerd.

Voorbeeld:

<div style="color: blue;">
  <p>De tekstkleur van dit p-element is blauw vanwege overerving.</p>
</div>

Implicaties van Overerving en Nesten

Het correct begrijpen en gebruiken van deze relaties tussen elementen is cruciaal voor effectieve HTML-codering. Het stelt webontwikkelaars in staat om complexe paginastructuren te creëren en stijlen op een voorspelbare en georganiseerde manier toe te passen.

Tip: Het gebruik van ontwikkelaarstools in browsers zoals Chrome of Firefox kan u helpen de relatie tussen HTML-elementen visueel te onderzoeken. Je kunt de structuur en stijlen van bestaande webpagina's inspecteren om te zien hoe ze zijn opgebouwd.

Samenvatting van het hoofdstuk

• Elementen binnen andere elementen worden child-elementen genoemd; het omliggende element is het parent-element.
• Elementen op hetzelfde niveau binnen een parent-element worden siblings of broer/zus-elementen genoemd.
• Overerving betreft het proces waarbij child-elementen stijlen en eigenschappen erven van hun parent-elementen.
• Een goed begrip van deze concepten is fundamenteel voor het creëren van goed gestructureerde en gestileerde webpagina's.

Eenheden in HTML en CSS

In dit hoofdstuk verkennen we uitgebreid de verschillende eenheden in HTML en CSS die worden gebruikt om de grootte, afstand, en positie van elementen op een webpagina te specificeren. Een grondige kennis van deze eenheden is cruciaal voor het ontwerpen van webpagina's die niet alleen responsief zijn, maar ook optimaal toegankelijk voor een breed scala aan apparaten en schermgroottes.

Pixels (px)

Pixels (px) zijn een absolute maateenheid. Eén pixel komt overeen met één beeldpunt op het scherm van een apparaat. Het gebruik van pixels zorgt voor een nauwkeurige controle over de grootte en positie van elementen, maar het kan ook leiden tot inconsistenties over verschillende schermresoluties.

Aanbeveling:

Gebruik pixels voor het definiëren van de grootte van elementen die een consistente grootte moeten hebben op alle apparaten, zoals iconen, afbeeldingen of grafische knoppen.

Proportionele eenheden

Proportionele eenheden zijn flexibel en passen zich aan de omringende tekst of elementen aan. Hieronder worden twee gangbare proportionele eenheden besproken.

Em (em)

De 'em' eenheid heeft zijn wortels in de typografie, waar het traditioneel de breedte van de hoofdletter 'M' in een bepaald lettertype en -grootte aangeeft. In de context van webdesign is 'em' aangepast als een relatieve maateenheid die verwijst naar de lettergrootte van het huidige element waarop het wordt toegepast. Het is bijzonder nuttig voor het creëren van schaalbare en responsieve tekst en lay-outs, aangezien een 'em' zich automatisch aanpast aan de basistekstgrootte van het element, de pagina, of de browserinstellingen van de gebruiker.

Voorbeeld:

<style>
p {
    font-size: 2em; /* De tekstgrootte is tweemaal de basistekstgrootte */
    margin: 1em; /* De marge is gelijk aan de huidige tekstgrootte */
}
</style>
<p>Deze tekst is aangepast met 'em' eenheden.</p>

Rem (rem)

De 'rem' (Root EM) eenheid is relatief aan de lettergrootte van het root html element. Het verschil met 'em' is dat 'em' afhankelijk is van de lettergrootte van zijn directe of dichtstbijzijnde ouder, terwijl 'rem' altijd relatief is aan de basislettergrootte van het document.

Voorbeeld:

<style>
html {
    font-size: 18px; /* Dit stelt de basis lettergrootte voor het document in */
}

h1 {
    font-size: 2rem; /* Dit zal 36px zijn omdat het gebaseerd is op de basisgrootte van 18px */
    margin-bottom: 1rem; /* Dit stelt een marge in van 18px, opnieuw gebaseerd op de basisgrootte */
}
</style>
<h1>Deze koptekst is aangepast met rem.</h1>

4.3 Percentage (%)

Percentage is een veelzijdige relatieve eenheid, nuttig voor het creëren van responsieve ontwerpen die zich aanpassen aan de grootte van het bovenliggende element of het viewport.

Aanbeveling:

width: 50%;

4.4 Viewport Percentage (vh en vw)

Vh en vw zijn eenheden gebaseerd op het viewport van het apparaat, wat ze ideaal maakt voor het ontwerpen van interfaces die zich aanpassen aan verschillende schermgroottes.

Aanbeveling:

height: 50vh;
width: 50vw;

Aanvullende Overwegingen

Bij het kiezen van eenheden is het essentieel om het doel en de context van elk element zorgvuldig te overwegen. Aspecten zoals toegankelijkheid, gebruiksvriendelijkheid, en cross-browser compatibiliteit spelen een cruciale rol. Het is ook raadzaam om de ontworpen webpagina's uitvoerig te testen op verschillende apparaten en schermgroottes om de uniformiteit en functionaliteit van de gebruikersinterface te garanderen.

Praktische Tips

In de praktijk is het mengen van verschillende eenheden soms onvermijdelijk. Wees echter bedachtzaam en zorg dat je keuzes de gebruiksvriendelijkheid en toegankelijkheid niet ondermijnen. Tools zoals CSS Grid en Flexbox kunnen ook bijdragen aan het effectief managen van ruimte en lay-out op webpagina's, complementair aan het gebruik van de juiste maateenheden.

In dit hoofdstuk hebben we een grondige duik genomen in de wereld van HTML en CSS-eenheden. Met deze kennis ben je nu uitgerust om webpagina's te creëren die niet alleen esthetisch aantrekkelijk zijn, maar ook functioneel en toegankelijk voor een breed publiek op diverse apparaten.

Aanbeveling voor Tekstgrootte

Voor een optimale leesbaarheid en gebruikservaring op het web is een minimale tekstgrootte van 1rem vaak aangewezen. Dit komt overeen met de standaard tekstgrootte van veel browsers (16px) en biedt een evenwicht tussen leesbaarheid en esthetiek. Uiteraard kan afhankelijk van de specifieke context en doelgroep de noodzaak ontstaan om de tekstgrootte aan te passen voor optimale leesbaarheid en toegankelijkheid.

Voorbeeld:

<style>
html {
    font-size: 16px; /* Dit stelt de basisgrootte van het rootelement in */
}

p {
    font-size: 1rem; /* Dit zorgt voor een goede balans tussen leesbaarheid en esthetiek op het web */
}
</style>
<p>Deze paragraaf is ingesteld op een tekstgrootte die zorgt voor een goede leesbaarheid op diverse apparaten en schermgroottes.</p>

Houd er echter rekening mee dat afhankelijk van de content, het ontwerp, en de doelgroep van je website, het soms wenselijk kan zijn om de tekstgrootte aan te passen om de gebruikservaring te optimaliseren. Test altijd hoe je website eruitziet en functioneert op verschillende apparaten en schermgroottes om ervoor te zorgen dat je content toegankelijk en leesbaar is voor een breed publiek.

Lijsten in HTML

Lijsten zijn een integraal onderdeel van webcontent, waarmee structurele informatie en gegevens op een georganiseerde manier worden weergegeven. HTML biedt verschillende elementen om zowel geordende als ongeordende lijsten te creëren, evenals beschrijvende lijsten voor termen en definities.

Ongeordende Lijsten: <ul> en <li>

<ul>
    <li>Appel</li>
    <li>Banaan</li>
    <li>Kers</li>
</ul>

Gebruik van <ul> in Navigatiebalken

Een veelvoorkomende toepassing van de <ul> en <li> elementen is in navigatiebalken. Veel websites maken gebruik van ongeordende lijsten om navigatielinks te structureren. Gecombineerd met CSS en soms JavaScript, kan een eenvoudige lijst worden getransformeerd in een stijlvolle en interactieve navigatiebalk.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">Over</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

In latere hoofdstukken zullen we dieper ingaan op het stijlen en optimaliseren van navigatiebalken voor een verbeterde gebruikerservaring.

Ongeordende lijsten, aangeduid met het <ul>-element, hebben lijstitems die geen specifieke volgorde hebben. Elk item binnen deze lijst wordt gedefinieerd met het <li>-element.

Geordende Lijsten: <ol> en <li>

<ol>
    <li>Eerste stap</li>
    <li>Tweede stap</li>
    <li>Derde stap</li>
</ol>

Geordende lijsten, aangeduid met het <ol>-element, hebben een specifieke volgorde. Net als bij ongeordende lijsten wordt elk item gedefinieerd met het <li>-element.

Beschrijvende Lijsten: <dl>, <dt> en <dd>

<dl>
    <dt>HTML</dt>
    <dd>Een opmaaktaal voor het structureren van webcontent.</dd>
    <dt>CSS</dt>
    <dd>Een stijlbladtaal voor het vormgeven van webcontent.</dd>
</dl>

Beschrijvende lijsten, aangeduid met het <dl>-element, zijn bedoeld voor het weergeven van termen en hun bijbehorende definities. De term wordt gedefinieerd met het <dt>-element en de bijbehorende definitie met het <dd>-element.

In toekomstige hoofdstukken zullen we dieper ingaan op geavanceerde lijststijlen en gebruikspatronen, zoals het maken van navigatiebalken met behulp van lijsten.

Inbedden van Media in HTML

Media-inhoud zoals video's, audio en andere multimedia-elementen kunnen een webpagina levendiger maken en een rijkere gebruikerservaring bieden. HTML biedt verschillende elementen waarmee je eenvoudig media-inhoud op je website kunt insluiten.

Video's: <video>

Met het <video>-element kun je videobestanden insluiten en afspelen op je webpagina. Het ondersteunt meerdere bronformaten om maximale compatibiliteit met verschillende browsers te garanderen.

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Uw browser ondersteunt de video tag niet.
</video>

De controls attribuut voegt afspeelbedieningen toe zoals afspelen/pauzeren en volume.

Audio: <audio>

Net als video's, kunt u ook audiobestanden insluiten met het <audio>-element.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Uw browser ondersteunt de audio tag niet.
</audio>

Net als bij het video-element, zorgt het controls attribuut voor bedieningselementen voor de audio.

Inbedden van Externe Media

Naast het hosten van je eigen media, kun je ook externe media insluiten, zoals YouTube-video's, met behulp van de <iframe> tag.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Vervang VIDEO_ID door de specifieke ID van de YouTube-video die je wilt insluiten.

Overwegingen voor Media-inhoud

Hoewel media een geweldige manier is om je content te verrijken, is het belangrijk om rekening te houden met de bestandsgrootte en formaten om ervoor te zorgen dat je website snel blijft laden en toegankelijk is voor alle gebruikers.

Media Responsief Maken

Met het toenemende gebruik van mobiele apparaten is het essentieel dat media-inhoud zich aanpast aan verschillende schermformaten. Hier zijn enkele technieken om media responsief te maken:

Responsieve Video en Audio

Om video's en audio-elementen responsief te maken, kun je gebruik maken van CSS. Een algemene methode is het gebruik van relatieve breedte en automatische hoogte.

<style>
video, audio {
    max-width: 100%;
    height: auto;
}
</style>

Responsieve Iframes

Iframes, zoals die worden gebruikt voor het insluiten van YouTube-video's, kunnen iets uitdagender zijn om responsief te maken vanwege hun vaste breedte en hoogte. Een gangbare oplossing hiervoor is het gebruik van een container met een padding hack.

<style>
.responsive-iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Voor 16:9 ratio */
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

Je kunt je iframe vervolgens in de container plaatsen:

<div class="responsive-iframe-container">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

Met deze techniek zal je iframe zich aanpassen aan de breedte van zijn container, terwijl het de aspectverhouding behoudt.

Tabellen in HTML

Tabellen zijn een effectief hulpmiddel om gestructureerde gegevens op een overzichtelijke manier weer te geven. In webdesign worden tabellen traditioneel gebruikt om gegevens te presenteren in rijen en kolommen, vergelijkbaar met hoe je dat zou doen in spreadsheetprogramma's zoals Microsoft Excel of Google Sheets.

Basiselementen van een Tabel

Een tabel in HTML wordt gemaakt met het <table> element. Binnen een tabel gebruik je de <tr> (table row) elementen om rijen te definiëren, en binnen deze rijen gebruik je <td> (table data) voor individuele cellen.

<table>
    <tr>
        <td>Rij 1, Cel 1</td>
        <td>Rij 1, Cel 2</td>
    </tr>
    <tr>
        <td>Rij 2, Cel 1</td>
        <td>Rij 2, Cel 2</td>
    </tr>
</table>

Kopteksten in Tabellen

Voor tabellen met kopteksten kun je het <th> (table header) element gebruiken. Dit element benadrukt visueel dat de celinhoud een kop is. Deze worden meestal in een <thead> geplaatst, gevolgd door <tbody> voor de hoofdinhoud van de tabel.

<table>
    <thead>
        <tr>
            <th>Koptekst 1</th>
            <th>Koptekst 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rij 1, Cel 1</td>
            <td>Rij 1, Cel 2</td>
        </tr>
        <tr>
            <td>Rij 2, Cel 1</td>
            <td>Rij 2, Cel 2</td>
        </tr>
    </tbody>
</table>

Samenvoegen van Cellen

In sommige gevallen wil je misschien cellen samenvoegen over meerdere kolommen of rijen. Dit kan gedaan worden met de colspan en rowspan attributen.

Styling van Tabellen

Hoewel de standaardpresentatie van tabellen duidelijk en functioneel is, kun je met CSS veel doen om ze visueel aantrekkelijker en leesbaarder te maken. Denk aan het toevoegen van randen, het kleuren van alternatieve rijen en het aanpassen van de tekstuitlijning.

Toegankelijkheid van Tabellen

Wanneer je tabellen gebruikt, is het belangrijk om toegankelijkheid in gedachten te houden. Zorg ervoor dat de inhoud logisch is geordend en overweeg om het <caption> element te gebruiken om een beschrijvende titel aan je tabel toe te voegen.

In latere hoofdstukken gaan we dieper in op geavanceerde technieken voor het werken met tabellen, inclusief responsief design en interactieve features.

HTML-validatie

Naarmate je meer vertrouwd raakt met HTML en grotere projecten gaat bouwen, wordt het cruciaal om ervoor te zorgen dat je code correct is en geen fouten bevat. Validatie is het proces waarbij je controleert of je HTML (of CSS) voldoet aan de vastgestelde normen en richtlijnen. Door je code te valideren, zorg je ervoor dat je website consistent werkt over verschillende browsers en apparaten heen.

Waarom is validatie belangrijk?

• Compatibiliteit: Door ervoor te zorgen dat je code voldoet aan de standaarden, minimaliseer je het risico van compatibiliteitsproblemen met verschillende browsers.
• Toegankelijkheid: Correcte code helpt om ervoor te zorgen dat je website toegankelijk is voor alle gebruikers, inclusief die met beperkingen.
• Zoekmachineoptimalisatie (SEO): Schone en geldige HTML kan je helpen bij het verbeteren van de zoekmachine ranking.
• Leren en debuggen: Door validatie kom je vaak achter fouten die je anders misschien over het hoofd had gezien. Het helpt je ook om beter te begrijpen hoe HTML werkt.

Hoe valideer je HTML?

Er zijn verschillende online tools en softwarepakketten die je kunt gebruiken om je HTML-code te valideren. Een van de meest populaire en betrouwbare tools is de W3C Markup Validation Service.

Om deze service te gebruiken:

1. Ga naar de W3C Markup Validation Service.
2. Voer de URL van je website in, upload je HTML-bestand of plak je code direct in het voorziene veld.
3. Klik op "Check" of "Valideer".
4. De validator geeft feedback over je code, inclusief eventuele fouten of waarschuwingen.

Het is een goed idee om tijdens de ontwikkelingsfase regelmatig te valideren, zodat je problemen vroegtijdig kunt opsporen en corrigeren.

Veelvoorkomende validatiefouten

Hier zijn enkele veelvoorkomende fouten die tijdens de validatie kunnen optreden:

• Ontbrekende of onjuiste DOCTYPE.
• Niet gesloten of verkeerd geneste tags.
• Ontbrekende attributen zoals 'alt' voor afbeeldingen.
• Gebruik van verouderde of niet-ondersteunde tags of attributen.

Conclusie

HTML-validatie is een essentieel onderdeel van het webontwikkelingsproces. Het zorgt ervoor dat je code schoon, consistent en toegankelijk is. Hoewel het in eerste instantie misschien wat extra tijd kost, zal het op de lange termijn veel voordelen bieden en veelvoorkomende problemen helpen voorkomen.

Het <span> in HTML

Gebruik van het <span> Element in HTML

• Het <span> element is een inline container gebruikt om specifieke delen van een tekst te stileren of te markeren zonder de inhoudelijke structuur te beïnvloeden. Aangezien <span> een lege generieke container is, beïnvloedt het de inhoud ervan niet visueel, tenzij CSS wordt toegepast.

• Voorbeeld van het toepassen van inline stijlen met <span>:

  
  <p>Dit is een <span style="color: blue;">blauwe</span> tekst.</p>
              

  Dit voorbeeld toont het kleuren van het woord "blauwe" in een zin.

• Gebruik van <span> met een CSS klasse:

  
  <style>
  .highlight {
      color: red;
      font-weight: bold;
  }
  </style>
  <p>Dit is een <span class="highlight">belangrijke</span> tekst.</p>
              

  In dit voorbeeld wordt de tekst "belangrijke" benadrukt met een CSS-klasse "highlight".

Bekijk en experimeteer met deze pen.

Block, inline en inline-block elementen in HTML

In dit hoofdstuk van de HTML-cursus gaan we dieper in op HTML-elementen en hun weergavetypes: block, inline en inline-block. Deze eigenschappen bepalen hoe elementen op de webpagina worden gerangschikt en met elkaar interageren.

1. Block Elementen

Block elementen zijn de bouwstenen van elke webpagina. Ze nemen standaard de volledige beschikbare breedte in, ongeacht hun inhoudelijke breedte. Hierdoor begint elk block element op een nieuwe lijn en creëert het een "blok" op de pagina. Voorbeelden van block elementen zijn:

• Nemen de volledige breedte van hun ouder element in.
• Beginnen altijd op een nieuwe regel.
• Je kunt de hoogte en breedte bepalen.
• Margin en padding worden toegepast aan alle zijden.

Voorbeeld van een block element, neemt de volledige beschikbare breedte in van zijn parent-element.

2. Inline Elementen

In tegenstelling tot block elementen, nemen inline elementen alleen de breedte in die hun inhoud nodig heeft. Ze breken de regel niet en kunnen naast andere elementen op dezelfde regel staan. Voorbeelden van inline elementen zijn:

• Nemen alleen de breedte van hun inhoud in.
• Blijven op dezelfde regel als hun omliggende content.
• Hoogte en breedte kunnen niet geforceerd worden.
• Margin en padding worden enkel horizontaal toegepast.

Voorbeeld van een inline element,<span style="background-color:gray; color:white"> neemt enkel de breedte in van de inhoud </span>in.

3. Inline-Block Elementen

Inline-block elementen combineren kenmerken van zowel inline als block elementen. Net als inline elementen, nemen ze alleen de breedte in die nodig is voor hun inhoud, waardoor ze efficiënt ruimtegebruik mogelijk maken. Dit onderscheidt ze van block elementen, die standaard de volledige breedte van hun ouder innemen. Een voorbeeld van een inline-block element is:

• Nemen de ruimte in die nodig is voor hun inhoud, zonder de volledige breedte van hun ouder element in te nemen.
• Kunnen naast andere elementen staan op dezelfde regel.
• Breedte en hoogte zijn aanpasbaar, wat meer controle geeft over de vormgeving.
• Behouden de eigenschappen van zowel inline als block elementen.
• Zijn volledig klikbaar, wat hen ideaal maakt voor interactieve elementen zoals knoppen en aangepaste links.

inline-block element

inline-block element

Door deze eigenschappen zijn inline-block elementen bijzonder veelzijdig en nuttig voor webdesign, omdat ze de mogelijkheid bieden om elementen nauwkeurig te positioneren en te stijlen, terwijl ze interactief en functioneel blijven.