Een website publiceren en onderhouden

Een website heeft één projectmap nodig met alle bestanden die bezoekers gebruiken. Dit is de hoofdmap van de website. Publiceren is veel gemakkelijker wanneer die map een volledige, verplaatsbare website is: geen afbeeldingen geleend uit Downloads en geen stijlblad dat in de map van een ander project is blijven staan.

Geef elk soort bestand een plaats

Een kleine fietsenmaker zou deze indeling kunnen gebruiken:

riverside-bikes/
  index.html
  prices.html
  contact.html
  404.html
  css/styles.css
  scripts/menu.js
  images/logo.svg
  images/workshop-800.jpg
  images/workshop-1600.jpg
  blog/index.html
  blog/winter-checklist.html

De HTML-pagina's bevatten de inhoud, css/ bevat stijlen, scripts/ bevat JavaScript-bestanden en images/ bevat de afbeeldingen die klaar zijn voor bezoekers. Een website zonder scripts heeft geen scriptsmap nodig. Door aparte mappen zijn bij elkaar horende bestanden gemakkelijker te vinden, zonder dat de manier verandert waarop een browser ze gebruikt.

De meeste webservers versturen index.html wanneer een bezoeker een map opvraagt. Het adres https://www.example.com/ opent de startpagina in de hoofdmap. Het adres https://www.example.com/blog/ opent blog/index.html. Een bestand met de naam home.html is nog steeds een pagina, maar de server kiest die meestal niet voor het kale adres van de website.

Kies namen vóór publicatie

Gebruik kleine letters, koppeltekens tussen woorden en de juiste extensie. opening-hours.html en team-photo.jpg zijn duidelijke namen. Spaties kunnen in URL's verschijnen als %20, waardoor een adres moeilijker te lezen en te typen is. Namen worden onderdeel van de openbare adressen van de website, dus kies ze op basis van de inhoud die ze aanduiden.

De extensie moet bij het bestand passen: .html voor HTML, .css voor CSS, .js voor scripts en een geschikte afbeeldingsextensie zoals .jpg, .webp of .svg. De server verstuurt een Content-Type-header die het formaat van het bestand beschrijft. Hostingsystemen gebruiken meestal extensies om dat type te kiezen. Als je een foto hernoemt van .jpg naar .webp, wordt de inhoud niet omgezet; exporteer de foto met een afbeeldingsprogramma in het nieuwe formaat.

De meeste servers maken onderscheid tussen hoofdletters en kleine letters. Een link naar Logo.svg kan mislukken wanneer het geüploade bestand logo.svg heet, ook als de link werkte op een computer met een bestandssysteem dat geen onderscheid maakt tussen hoofdletters en kleine letters. Door namen in kleine letters te gebruiken, voorkom je dit verschil in nieuwe projecten.

Scheid openbare bestanden van werkbestanden

Bewaar originele camerafoto's, ontwerpbestanden en notities buiten de hoofdmap van de website, bijvoorbeeld in riverside-bikes-originals/. Exporteer alleen de voorbereide webafbeeldingen naar images/. Bestanden in de gepubliceerde map kunnen worden gedownload, ook wanneer geen enkele pagina ernaar linkt. Houd wachtwoorden, privédocumenten en persoonsgegevens buiten die map.

Controleer vóór upload of elk gekoppeld lokaal websitebestand binnen het project staat. Een foto op een persoonlijk file://-adres staat op je computer; die gaat niet mee met de website tenzij je die naar de gepubliceerde map kopieert. Werk na het verplaatsen de link bij en test die opnieuw.

Een stabiele structuur beschermt links ook na publicatie. Als je prices.html naar een nieuw adres verplaatst, werken oude bladwijzers niet meer, tenzij de hostingprovider dat oude adres omleidt naar de nieuwe pagina.

Een pad vertelt de browser waar die naar een bestand moet zoeken. Om een pad correct te schrijven, bepaal je zowel welk bestand wordt opgevraagd als vanaf welke locatie de browser het pad zal bepalen.

Begin in de map van het verwijzende bestand

Een relatief pad begint vanuit de map van de huidige pagina. Op de website van de fietsenmaker linkt index.html naar prices.html met href="prices.html", naar het logo met src="images/logo.svg" en naar een bericht met href="blog/winter-checklist.html".

Vanuit blog/winter-checklist.html verandert de route:

<link rel="stylesheet" href="../css/styles.css">
<a href="../index.html">Home</a>
<img src="../images/logo.svg" alt="Riverside Bike Repair">
<a href="autumn-tips.html">Autumn tips</a>

Voor het logo ga je eerst vanuit blog/ omhoog met ../ en daarna naar images/. Voor een bestand in dezelfde map is alleen de naam nodig. Voor twee niveaus omhoog gebruik je ../../. Gebruik altijd voorwaartse schuine strepen / in webpaden, ook wanneer je op Windows werkt.

Een pad in een CSS-bestand begint vanuit de map van het CSS-bestand. In css/styles.css gaat de regel background-image: url("../images/pattern.svg"); vanuit css/ omhoog en daarna naar images/. Het pad begint niet vanuit de HTML-pagina die het stijlblad toevallig laadt.

Onderscheid drie adresvormen

Een absolute URL bevat het schema en de hostnaam. Gebruik die voor een andere website. Met relatieve paden kan je eigen website tussen een lokale server, een voorbeeldadres en het definitieve domein worden verplaatst zonder het domein in elke link te vervangen.

Een schuine streep aan het begin heeft een specifieke betekenis. Op https://username.github.io/riverside-bikes/ vraagt /css/styles.css het bestand https://username.github.io/css/styles.css op. De projectmap valt uit het adres weg. Vanaf de pagina in de hoofdmap van de website behoudt css/styles.css die map en bereikt het pad het bedoelde bestand.

Test het adres dat de browser werkelijk gebruikt

Als je HTML rechtstreeks vanaf de schijf opent, krijg je een file://-adres. Links naar mappen en paden die met / beginnen, kunnen zich daar anders gedragen. Start een lokale ontwikkelserver vanuit de websitemap, bijvoorbeeld met python3 -m http.server, of gebruik een livevoorbeeld van een code-editor. Open daarna het lokale HTTP-adres dat je krijgt.

Op een server opent href="blog/" het bestand blog/index.html. Als een link of afbeelding niet werkt, open dan de ontwikkelaarstools voordat je opnieuw laadt en zoek het verzoek in het netwerkpaneel. Een 404 betekent dat de opgevraagde bron niet is gevonden. Lees de volledige opgevraagde URL en vergelijk elke map, schuine streep, letter en extensie met de geüploade bestanden. Een hoofdletter of ontbrekende ../ is genoeg om de browser ergens anders naartoe te sturen. Een persoonlijk computerpad dat uit een bestandsverkenner is gekopieerd, werkt niet voor bezoekers; vervang het door een pad binnen de website.

Browsers proberen pagina's weer te geven, ook wanneer de code fouten bevat. Dat foutherstel is nuttig voor bezoekers, maar kan problemen voor de maker verbergen. Validatie controleert HTML of CSS aan de hand van de regels van de bijbehorende standaard, ongeacht of de pagina er toevallig goed uitziet.

Gebruik het controleprogramma voor de taal

De W3C Nu Html Checker controleert HTML. De W3C CSS Validation Service controleert CSS. Je kunt een gepubliceerde URL opgeven, een bestand uploaden of code plakken. De ingebouwde controles van een editor zijn nuttig tijdens het schrijven; met de online controleprogramma's kun je ook de gepubliceerde kopie controleren.

Lees het regel- en kolomnummer bij elke melding. Een fout overtreedt een regel en moet worden hersteld. Een waarschuwing of informatieve melding vraagt om aandacht, maar kan toegestane code beschrijven. Lees wat de melding zegt voordat je beslist of een wijziging nodig is.

Werk vanaf de eerste fout naar beneden en voer het controleprogramma na de oplossing opnieuw uit. Door één ontbrekend aanhalingsteken of verkeerd afgesloten element kan latere code ergens anders lijken te horen, wat veel vervolgmeldingen oplevert.

Herstel de structuur in HTML

Bekijk verkeerd geneste elementen:

<p>Open <strong>daily</p></strong>

Het binnenste element <strong> moet vóór het buitenste element <p> worden afgesloten:

<p>Open <strong>daily</strong></p>

Geef een betekenisvolle foto een alt-attribuut dat de relevante inhoud beschrijft, zoals alt="Mechanic adjusting the brakes of a city bike". Een decoratieve afbeelding gebruikt een lege alt="". Elke id moet ook uniek zijn binnen de pagina. Gebruik een gedeelde klasse wanneer meerdere elementen dezelfde stijl nodig hebben.

Andere nuttige controles betreffen het doctype, een paginatitel, volledige aanhalingstekens rond attribuutwaarden en lijstitems binnen een lijst. Een <div> kan niet binnen een alinea staan. De browser sluit die alinea vóór het div-element, en een latere </p> kan een losstaande eindtag worden. De gecorrigeerde browserstructuur kan verschillen van de tekst die je schreef.

Herstel declaraties in CSS

Een getal en de bijbehorende CSS-eenheid horen bij elkaar: schrijf width: 100px;, zonder spatie tussen 100 en px. De eigenschap voor tekstkleur is color. Een onbekende eigenschap wordt genegeerd.

Een ontbrekende puntkomma kan ook de volgende declaratie verstoren:

.card {
  margin: 10px
  padding: 5px;
}

De browser leest de twee regels als één ongeldige declaratie. Voeg de ontbrekende puntkomma na 10px toe en controleer opnieuw. Browsers slaan ongeldige declaraties meestal over zonder een fout op de pagina te tonen.

Combineer codecontroles met paginacontroles

Als een pagina de validatie doorstaat, staat daarmee niet vast dat die toegankelijk, snel, nuttig of feitelijk correct is. Probeer toetsenbordnavigatie, bekijk de lay-out in browsers en controleer de inhoud zelf. Als het CSS-controleprogramma een zeer nieuwe functie markeert, controleer dan de specificatie en de ondersteuningsinformatie op MDN voordat je werkende code verwijdert; controleprogramma's kunnen achterlopen op nieuwere functies.

Valideer na ingrijpende wijzigingen en vóór publicatie. Geef na upload het gepubliceerde adres op en controleer of de nieuwste inhoud zichtbaar is. Een geldige oudere pagina kan net zo gemakkelijk door de controle komen als de bijgewerkte pagina.

Ontwikkelaarstools tonen hoe de browser je pagina interpreteert. Klik met de rechtermuisknop op een onderdeel en kies Inspecteren. Je kunt ook F12 of Ctrl+Shift+I gebruiken op Windows en Linux, of Cmd+Option+I op macOS. Schakel in Safari eerst “Toon functies voor webontwikkelaars” in via Instellingen, Geavanceerd.

Inspecteer de structuur van de browser

Het elementenpaneel, in Firefox Inspector genoemd, toont het DOM: de structuur die uit de HTML is opgebouwd. De browser kan ongeldige opmaakcode hebben hersteld, dus dit is niet altijd een rechtstreekse kopie van de bron. Een <div> die binnen een alinea is geschreven, verschijnt daarbuiten in het DOM omdat de browser de alinea eerst beëindigt.

Selecteer het onderdeel met het probleem. Het stijlenpaneel toont overeenkomende CSS-regels en linkt naar hun bronbestanden en regelnummers. Een doorgestreepte declaratie is niet actief. Een andere regel kan voorrang hebben, of een waarschuwingspictogram kan aangeven dat de declaratie ongeldig is. Het paneel Computed toont de uiteindelijke waarden van eigenschappen nadat de browser die regels heeft verwerkt.

Volg een kleurregel die geen voorrang krijgt

Stel dat deze link donkerblauw verschijnt terwijl de knopklasse om wit vraagt:

<a class="btn" href="contact.html">Contact us</a>

#main a { color: navy; }
.btn { color: white; }

Beide regels komen overeen wanneer de link binnen id="main" staat. De ID-selector maakt #main a specifieker: de specificiteit is (1, 0, 1), tegenover (0, 1, 0) voor .btn. Bij deze gewone regels wordt dat verschil niet opgeheven door .btn later te plaatsen.

Een gerichte oplossing is #main .btn, met specificiteit (1, 1, 0). Een andere is de brede ID-regel vervangen door een linkklasse zoals .nav-link. Twee selectors met elk één klasse hebben dezelfde specificiteit, zodat hun volgorde de kleur kan bepalen. Als je #main a verandert in .main a, blijft de specificiteit (0, 1, 1), die vóór .btn gaat. Inspecteer welke regel daadwerkelijk voorrang krijgt voordat je de kleinste bruikbare correctie kiest.

Meet de hele box

Het boxmodeldiagram maakt onderscheid tussen inhoud, binnenruimte, rand en marge. Met box-sizing: content-box neemt een inhoudsbreedte van 300px plus 20px binnenruimte aan elke kant en randen van 2px het volgende in:

Dat is een box tot en met de rand van 344px, vóór eventuele marges. Met box-sizing: border-box blijft de hele box tot en met de rand 300px breed; de inhoudsbreedte wordt:

Gebruik het diagram om een tussenruimte of overlopende inhoud te verklaren in plaats van breedtes herhaaldelijk op goed geluk te veranderen. Flexbox- en gridaanduidingen kunnen ook lay-outsporen, lijnen en tussenruimtes tonen.

Probeer een wijziging en sla die daarna op

Schakel een declaratie uit, bewerk een waarde of voeg een regel toe in het stijlenpaneel. Dwing :hover of :focus af om een toestand te onderzoeken zonder de aanwijzer op het element te houden of het element met het toetsenbord focus te geven. Deze bewerkingen zijn tijdelijk: gewone bewerkingen in de ontwikkelaarstools werken je projectbestanden niet bij. Neem de werkende wijziging over in de bron, sla op en laad opnieuw. Als de oplossing verdwijnt, is die nog niet opgeslagen in de kopie die de browser laadt.

Een pagina wordt opgebouwd uit meerdere verzoeken. De HTML kan aankomen terwijl een stijlblad of afbeelding niet wordt geladen. Meldingen in de console en het netwerkpaneel tonen deze afzonderlijke resultaten.

Open de tools voordat je opnieuw laadt

De console meldt fouten en waarschuwingen, waaronder mislukte scripts, ontbrekende bronnen en gemengde inhoud. Meldingen linken vaak naar het betreffende bestand en de betreffende regel. Ook een website met alleen HTML en CSS kan nuttige consolemeldingen hebben.

Het netwerkpaneel registreert de verzoeken van de pagina terwijl de ontwikkelaarstools openstaan. Open die, laad opnieuw en filter daarna op CSS, afbeeldingen of lettertypen om de lijst te verkorten. Lees de opgevraagde URL, status, het type, de grootte en de tijd. Selecteer een item om de antwoordheaders en inhoud te inspecteren.

Een status in de 400-reeks betreft het verzoek; een status in de 500-reeks betreft de server. Een 404 is geen bewijs dat je de CSS-lay-out moet veranderen.

Spoor een ontbrekend logo op

De gepubliceerde pagina heeft een lege afbeeldingsruimte. In het netwerkpaneel is het verzoek https://www.example.com/images/Logo.svg, met als antwoord 404. Het geüploade bestand is images/logo.svg. De opgevraagde hoofdletter L komt niet overeen met de werkelijke naam in kleine letters. Corrigeer het HTML-pad, rol de pagina uit en controleer of het verzoek nu slaagt.

Onderzoek een pagina zonder vormgeving

Zoek eerst het CSS-verzoek. Verschijnt er geen verzoek, inspecteer dan het <link>-element, inclusief rel="stylesheet". Geeft het verzoek 404, vergelijk de URL dan met de geüploade locatie.

Een 200 betekent alleen dat een antwoord succesvol is ontvangen, niet dat het antwoord CSS is. Controleer de console en de Content-Type van het antwoord, die text/css moet zijn. Een hostingprovider kan per ongeluk een HTML-foutpagina met status 200 terugsturen; de browser weigert die als stijlblad toe te passen. Zodra de juiste CSS met het juiste type is aangekomen, inspecteer je ongeldige declaraties en selectors die niet overeenkomen met het betreffende element.

Sluit de opgeslagen kopie van de browser uit

Een cache bewaart bestanden voor hergebruik. Dat bespaart downloadtijd, maar door een oude kopie kan een geslaagde update lijken te ontbreken. Schakel met de ontwikkelaarstools open “Disable cache” in het netwerkpaneel in en laad opnieuw. In Chrome, Edge en Firefox dwingt Ctrl+Shift+R op Windows en Linux of Cmd+Shift+R op macOS een volledige herlaadactie af. Inspecteer de teruggestuurde inhoud voordat je concludeert dat de upload is mislukt.

De kolommen voor grootte en tijd helpen ook bij snelheidsproblemen. Een afbeelding van 3,6 MB tussen kleine tekstbestanden is een bruikbaar beginpunt. Met netwerkvertraging simuleren boots je een tragere verbinding na. Een HTTPS-pagina die een bestand met http:// opvraagt, kan een waarschuwing over gemengde inhoud veroorzaken; inspecteer de exacte URL van de bron om de onveilige verwijzing te vinden.

Een bruikbare foutmelding beschrijft een waarneembaar verschil: “Bij een breedte van 360px scrolt de contactpagina zijwaarts.” Dat is gemakkelijker te onderzoeken dan “de mobiele lay-out is kapot”. Noteer het pagina-adres, de browser, de schermbreedte, het werkelijke resultaat en het verwachte resultaat.

Volg de aanwijzingen in vijf stappen

1. Reproduceer. Laat het probleem onder dezelfde omstandigheden opnieuw optreden.
2. Verzamel aanwijzingen. Lees de console en het netwerkpaneel, valideer de code en inspecteer het betreffende element.
3. Isoleer. Schakel één regel uit of verwijder tijdelijk een klein stuk code om de oorzaak af te bakenen.
4. Verander één ding. Test of die verandering het resultaat verklaart.
5. Sla op en test opnieuw. Zet de oplossing in de bron, laad opnieuw en controleer andere omstandigheden.

Als je meerdere dingen tegelijk verandert, is het resultaat moeilijk te interpreteren. De ene wijziging kan het oorspronkelijke probleem oplossen terwijl een andere een nieuw probleem veroorzaakt. Houd de situatie waarin het misgaat beschikbaar, zodat je voor en na kunt vergelijken.

Onderzoek overlopende inhoud op een smal scherm

Een pagina past op een laptop, maar scrolt zijwaarts bij een viewport van 360px. Open de responsieve modus op die breedte. Wijs elementen aan in het elementenpaneel en bekijk hun gemarkeerde boxen. Een afbeelding is breder dan de kolom; de HTML geeft de afbeelding een grote intrinsieke breedte en geen CSS beperkt die breedte.

Probeer deze regel:

img {
  max-width: 100%;
  height: auto;
}

Door de maximumbreedte kan de afbeelding krimpen tot de breedte van de container. De automatische hoogte behoudt de verhoudingen. Verdwijnt de overlopende inhoud, sla die regel dan op in het juiste stijlblad en laad opnieuw. Test de afbeelding daarna ook bij grotere breedtes. Als je horizontaal overlopende inhoud op de pagina verbergt, kun je een deel van de afbeelding aan het zicht onttrekken zonder die passend te maken.

Doet de wijziging niets, gebruik de aanwijzingen dan om de volgende stap af te bakenen. Verschijnt de regel in het stijlenpaneel? Wordt die door een andere regel overschreven? Heeft de browser het bestand geladen dat je hebt bewerkt? Veelvoorkomende oorzaken zijn niet-overeenkomende klassenamen, onjuiste paden, ontbrekende accolades of puntkomma's, niet-opgeslagen bestanden en kopieën in de cache.

Test zowel engines als venstergroottes

De responsieve modus verandert de viewportbreedte en kan aanraakbediening simuleren, maar bootst niet elk detail van de snelheid, lettertypen of weergave van een echte telefoon na. Controleer de breekpunten van mediaquery's en de breedtes daartussen en gebruik daarna minstens één echte telefoon.

Chrome en Edge gebruiken Blink, Firefox gebruikt Gecko en Safari gebruikt WebKit. Twee browsers die dezelfde engine gebruiken, bieden niet dezelfde testbreedte als browsers met verschillende engines. Safari is vooral relevant voor de vele iPhone-browsers die WebKit gebruiken. Controleer de ondersteuningsinformatie van MDN voordat je op een nieuwere functie vertrouwt.

Controleer de gepubliceerde versie

Door servergedrag kunnen fouten zichtbaar worden die op de schijf verborgen blijven: hoofdlettergevoelige namen, ontbrekende uploads en paden die een projectsubmap overslaan. Open het gepubliceerde adres, volg de links en inspecteer daar de mislukte verzoeken.

Valideer vóór publicatie de HTML en CSS, inspecteer consolefouten, controleer op onbedoelde 404's, probeer telefoon-, tablet- en desktopbreedtes en controleer minstens twee browserengines. Volg de navigatie met het toetsenbord en activeer bedieningselementen. Herhaal na de uitrol de controles op de gepubliceerde website waar de gewijzigde functie wordt gebruikt.

Een geoptimaliseerde afbeelding is een klein bestand dat er nog goed uitziet op de grootte waarop het wordt getoond. Begin met het formaat, de pixelafmetingen en de compressie. Als je een te grote foto met CSS verkleint, verandert het uiterlijk, maar de browser downloadt en decodeert nog steeds het oorspronkelijke bestand.

Stem het formaat af op de inhoud

Rasterafbeeldingen slaan pixels op. Als je een kleine rasterafbeelding vergroot, wordt die onscherp omdat er geen extra detail ontstaat. SVG slaat vormen en lijnen op en is daarom geschikt voor een logo, maar niet voor een camerafoto. Huidige grote browsers ondersteunen WebP en AVIF. Voor animatie levert een modern afbeeldingsformaat of een korte video vaak een kleiner bestand op dan GIF.

Compressie zonder verlies behoudt pixelwaarden. Compressie met verlies verwijdert een deel van de details om meer bytes te besparen. Lagere kwaliteit levert uiteindelijk blokkerige vlakken of onscherpe randen op. Vergelijk de export op de werkelijke weergavegrootte. Maak elke nieuwe export vanuit het origineel en voorkom herhaald opslaan met verlies van een al gecomprimeerde kopie.

Pas de afmetingen aan het grootste gebruik aan

Een foto die maximaal 800 CSS-pixels breed wordt getoond, heeft ongeveer 800 afbeeldingspixels nodig op een scherm met standaarddichtheid en 1.600 op een scherm met twee apparaatpixels per CSS-pixel. Maak geschikte alternatieven in plaats van het cameraorigineel naar iedereen te sturen.

Het origineel van de fietsenmaker is 4.000 × 3.000 pixels en 3,6 MB. Een export van 1.600 × 1.200 heeft:

pixels, ofwel 16% van de oorspronkelijke 12 miljoen. Een JPEG-export met kwaliteit 80 kan ongeveer 240 KB zijn; de werkelijke grootte hangt af van de foto. Dat voorbeeld bespaart ongeveer 93% van de bestandsbytes.

Bij 10 Mbit/s is de ideale overdrachtstijd van het origineel, met decimale MB:

seconden. De export van 0,24 MB duurt ongeveer 0,19 seconden. Dit zijn alleen overdrachtstijden; werkelijk laden omvat ook vertragingen door de verbinding en de server. Gedecodeerd met 4 bytes per pixel daalt het geheugengebruik van 48 MB naar 7,68 MB. Een kleiner gecodeerd bestand en minder gedecodeerde pixels zijn afzonderlijke voordelen.

Exporteer een openbare kopie

Gebruik de exportinstellingen van een afbeeldingseditor of een hulpmiddel zoals Squoosh. Bewaar het origineel buiten de gepubliceerde map en geef de exports duidelijke namen zoals workshop-800.jpg en workshop-1600.jpg. Verwijder camerametadata tijdens het exporteren; die kunnen de datum van de foto, cameragegevens en GPS-locatie bevatten.

Voor een SVG verwijdert een optimalisatieprogramma zoals SVGO restgegevens van het tekenprogramma. Tekstcompressie op de server kan de overdrachtsgrootte verder verkleinen. Inspecteer bij elk formaat de voltooide afbeelding: een foto die als PNG is opgeslagen, kan onnodig groot zijn, terwijl een logo met veel tekst dat als JPEG is opgeslagen uitgesmeerde randen kan hebben.

Een afbeelding kan klein genoeg zijn om snel te downloaden en toch een pagina laten verspringen. De browser moet de verhoudingen kennen voordat de afbeelding binnenkomt en heeft bruikbare keuzes voor verschillende schermen nodig.

Reserveer ruimte met afmetingen

Schrijf numerieke width- en height-attributen zonder eenheden:

<img src="images/workshop-800.jpg"
     width="800" height="600"
     alt="Mechanic adjusting the brakes of a city bike">

Deze afmetingen geven de browser de beeldverhouding 4:3. Met max-width: 100%; height: auto; in CSS krimpt de afbeelding om in een smalle kolom te passen. In een kolom van 360px breed is de hoogte:

pixels. Door die ruimte te reserveren voorkom je dat de tekst eronder naar beneden schuift wanneer de afbeelding laadt. Ontbrekende afmetingen kunnen lay-outverschuivingen veroorzaken, de onverwachte bewegingen die CLS meet.

Bied breedtes aan waaruit de browser kan kiezen

Gebruik voor dezelfde foto op twee groottes breedteaanduidingen en een beschrijving van de weergavebreedte:

<img src="images/workshop-800.jpg"
     srcset="images/workshop-800.jpg 800w,
             images/workshop-1600.jpg 1600w"
     sizes="(max-width: 840px) 100vw, 800px"
     width="800" height="600"
     alt="Mechanic adjusting the brakes of a city bike">

800w en 1600w geven de werkelijke bestandsbreedtes aan. In deze lay-out zegt sizes dat de afbeelding tot 840px de viewportbreedte inneemt en daarboven 800px. De browser gebruikt de opgegeven ruimtebreedte, de schermdichtheid en de eigen selectieregels om een bestand te kiezen. Laat sizes overeenkomen met de werkelijke lay-out; als je voor een veel smallere kolom de volledige viewportbreedte opgeeft, kan dat onnodige downloads veroorzaken.

Bied formaten met een terugvalmogelijkheid aan

<picture>
  <source srcset="images/workshop.avif" type="image/avif">
  <source srcset="images/workshop.webp" type="image/webp">
  <img src="images/workshop.jpg" width="800" height="600"
       alt="Mechanic adjusting the brakes of a city bike">
</picture>

De browser kiest het eerste ondersteunde bronformaat. De verplichte <img> biedt de terugvalmogelijkheid, afmetingen en alternatieve tekst. Dit is een formaatkeuze; srcset met breedteaanduidingen lost het verwante probleem op van het kiezen van een geschikte pixelbreedte.

Stel afbeeldingen uit die nog niet nodig zijn

Gebruik loading="lazy" voor afbeeldingen verderop op een pagina. De browser kan wachten totdat de bezoeker erbij in de buurt komt en zo gegevens besparen voor afbeeldingen die nooit worden bereikt. Laat afbeeldingen die bij het eerste laden zichtbaar zijn direct laden, vooral de grote prominente hoofdafbeelding. Als je het laden van die afbeelding uitstelt, vertraag je de inhoud waarop bezoekers wachten. Een prominente hoofdafbeelding in de HTML wordt vroeg ontdekt; met fetchpriority="high" kun je vragen om een hogere prioriteit bij het ophalen.

Schrijf alt-tekst voor het doel van de afbeelding in de context. Een decoratieve afbeelding krijgt alt="". Betekenisvolle foto's en diagrammen horen als afbeeldingen in de HTML; een CSS-achtergrond is geschikt voor decoratie en heeft geen alt-attribuut of ingebouwd loading-attribuut.

De totale downloadgrootte van een pagina is de totale hoeveelheid gegevens die voor een pagina wordt gedownload. De HTML leidt tot verzoeken om CSS, afbeeldingen, scripts en lettertypen. Bestandsgroottes, het aantal verzoeken, de verbindingssnelheid en de prestaties van het apparaat dragen allemaal bij aan de ervaring.

Zoek het grootste aandeel

De startpagina van de fietsenmaker downloadt 15 KB HTML, 30 KB CSS, twee lettertypen van 40 KB, een prominente hoofdafbeelding van 2.400 KB en drie foto's van 350 KB:

KB. Afbeeldingen zijn goed voor 3.450 KB, ongeveer 96,5%. Met een prominente hoofdafbeelding van 220 KB en drie foto's van 45 KB wordt het totaal:

KB, ongeveer 87% minder. Bij 10 Mbit/s daalt de ideale overdrachtstijd van ongeveer 2,86 seconden naar 0,38 seconden. Het antwoord van de server en het opzetten van de verbinding kosten extra tijd. Een paar spaties uit CSS verwijderen zou weinig effect hebben naast deze besparing op afbeeldingen.

Lees de ervaringsmaten

De Core Web Vitals meten, volgens de stand van oktober 2026, verschillende problemen:

Goede prestaties in de praktijk voldoen aan elke drempelwaarde op het 75e percentiel. CLS kan ook een banner omvatten die na het laden inhoud verschuift, niet alleen een afbeelding die tijdens het eerste laden binnenkomt.

Lighthouse in Chrome of Edge voert een laboratoriumtest uit met scores en voorgestelde oplossingen. PageSpeed Insights voert online tests uit en toont, wanneer er voldoende waarnemingen zijn, praktijkgegevens van echte Chrome-bezoeken. Een laboratoriumscore is één test onder gekozen omstandigheden. Herhaal vergelijkingen met dezelfde instellingen en bekijk echte bezoeken wanneer die gegevens beschikbaar zijn.

Verbeter eerst de grootste kostenposten

Bereid eerst afbeeldingen en hun opmaakcode voor. Beperk daarna onnodige lettertypefamilies en -diktes, gebruik WOFF2-lettertypen en gebruik font-display: swap, zodat tekst in een terugvallettertype verschijnt terwijl het lettertype laadt. Voeg defer toe aan geschikte externe scripts, zodat het downloaden het parsen van HTML niet blokkeert en de uitvoering na het parsen volgt. Grote kaarten, videospelers en andere ingebedde inhoud van derden kunnen op aanvraag worden geladen.

Minificatie verwijdert spaties en commentaar uit code. Compressie met gzip of Brotli vermindert het aantal overgedragen tekstbytes. Dit helpt, maar al gecomprimeerde JPEG-, WebP- en AVIF-afbeeldingen worden door verdere tekstcompressie nauwelijks kleiner.

Door caching kunnen terugkerende bezoekers bestanden opnieuw gebruiken; dit wordt geregeld via headers zoals Cache-Control. Een CDN bewaart kopieën in verschillende regio's om de afstand die verzoeken afleggen te verkleinen. Wanneer een bron die lang in de cache blijft verandert, zorgt een naam zoals styles-v2.css of een adres zoals styles.css?v=2 voor een nieuw verzoek. Test met gesimuleerde netwerkvertraging en op een telefoon; een snelle laptop via wifi kan een trage mobiele ervaring verbergen.

Elke pagina moet in de eigen HTML het doel duidelijk maken. Zoekmachines lezen die opmaakcode, terwijl ook browsertabbladen, bladwijzers en schermlezers ervan afhankelijk zijn. Een duidelijke structuur begint met de inhoud die bezoekers daadwerkelijk kunnen lezen.

Geef de pagina een naam in de head

Het <title>-element hoort in <head>. Geef elke pagina een eigen beschrijvende titel, met de naam van de website na het specifieke onderwerp:

<title>Repair Prices – Riverside Bike Repair</title>
<meta name="description"
      content="Prices for flat repairs, brake adjustments and full services at Riverside Bike Repair. Walk in Monday to Saturday or book online.">

De titel verschijnt op het browsertabblad en in bladwijzers en levert meestal de kop in zoekresultaten. HTML stelt geen lengtelimiet aan de titel, maar zoekresultaten korten tekst in zodat die past. Zet daarom de nuttige woorden vooraan. Een algemene titel zoals “Home” geeft weinig informatie wanneer die los van de website wordt getoond.

De metabeschrijving is een leesbare samenvatting van de pagina in één of twee zinnen. Zoekmachines kunnen die gebruiken voor het tekstfragment van een resultaat, maar kunnen ook paginatekst kiezen. Stem de beschrijving af op de inhoud van die pagina. Als je één beschrijving naar elke pagina kopieert, verberg je de verschillen ertussen; een lijst met herhaalde zoekwoorden is geen bruikbare samenvatting. Google negeert de oude keywords-metatag.

Geef taal en tekens op

Gebruik <html lang="en"> voor een Engelstalige pagina. Het helpt schermlezers de uitspraak te kiezen en browsers taalfuncties te gebruiken. Google bepaalt de taal op basis van zichtbare tekst en negeert dit attribuut, dus beschouw het niet als een schakelaar voor de taalinstelling van Google.

Plaats <meta charset="utf-8"> vroeg in de head, zodat tekens zoals é en een gedachtestreepje correct worden weergegeven. Voeg de viewportmetatag toe die voor responsieve pagina's wordt gebruikt:

<meta name="viewport" content="width=device-width, initial-scale=1">

Laat het overzicht bij de inhoud passen

Gebruik één duidelijke <h1> voor het hoofdonderwerp van de pagina, <h2> voor de hoofdsecties en <h3> voor subsecties. Op de prijzenpagina is “Onderhoudsbeurten” een h2, met “Basisbeurt” en “Volledige beurt” als h3-koppen daaronder. Kies kopniveaus voor deze onderlinge verhouding; pas hun visuele grootte aan met CSS.

Semantische elementen geven rollen aan: <nav> voor navigatie, <main> voor de hoofdinhoud en passende <header>-, <article>-, <section>- en <footer>-elementen. Gebruik echte lijsten, links voor navigatie en knoppen voor acties. Een pagina met algemene div-elementen verliest deze rolsignalen. Houd belangrijke woorden zoals prijzen, openingstijden en koppen in HTML-tekst, waar ze als tekst beschikbaar zijn voor bezoekers en hulpmiddelen.

Stel een bruikbaar voorbeeld voor gedeelde links in

Open Graph-tags beschrijven een linkvoorbeeld in sociale apps en chatapps. Veelgebruikte eigenschappen zijn og:title, og:description en og:image:

<meta property="og:title" content="Repair Prices">
<meta property="og:image"
      content="https://www.example.com/images/workshop-800.jpg">

Gebruik een volledige HTTPS-URL voor de voorbeeldafbeelding. Deze tags beschrijven de gedeelde kaart; ze vervangen niet de zichtbare paginakoppen of de gewone titel en beschrijving.

Crawlen is het ophalen van pagina's, vaak door links te volgen. Indexeren is het opslaan van informatie over die pagina's voor zoekresultaten.

Geef elke pagina een toegangsroute

Link vanaf minstens één andere pagina naar elke pagina met een gewone <a href>-link. Beschrijvende tekst zoals “reparatieprijzen” vertelt bezoekers en crawlers wat de doelpagina bevat. Een leesbaar pad zoals /blog/winter-checklist.html geeft meer context dan /page7.html.

Een sitemap vermeldt de volledige voorkeurs-URL's die je gevonden wilt laten worden. Een XML-item kan er zo uitzien:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/prices.html</loc>
    <lastmod>2026-10-01</lastmod>
  </url>
</urlset>

De optionele datum van de laatste wijziging moet een aanzienlijke wijziging weergeven. Werk de sitemap bij wanneer pagina's veranderen. Een kleine website waarvan de pagina's goed met links zijn verbonden, kan zonder sitemap worden ontdekt.

Houd instellingen voor crawlen en indexeren uit elkaar

Een robots.txt-bestand in de hoofdmap van het domein vraagt crawlers die zich aan de regels houden welke paden ze niet moeten ophalen:

User-agent: *
Disallow: /drafts/
Sitemap: https://www.example.com/sitemap.xml

Dit sluit de map niet af. Mensen kunnen de adressen openen en een geblokkeerde URL kan nog steeds in resultaten verschijnen als andere pagina's ernaar linken. Zonder robots.txt-bestand mogen crawlers pagina's ophalen. Een gekopieerde Disallow: / blokkeert het crawlen van de hele website, dus verwijder een blokkade van een testwebsite vóór publicatie wanneer de website moet worden gecrawld.

Om uitsluiting van zoekresultaten te vragen, zet je dit in de head van de pagina:

<meta name="robots" content="noindex">

De crawler moet de pagina ophalen om die instructie te lezen. Als je dezelfde URL in robots.txt blokkeert, kan dat verhinderen dat de crawler noindex ontdekt. Geen van beide instellingen maakt een pagina privé: privé-inhoud heeft toegangscontrole nodig of moet buiten de openbare website blijven.

Kies één adres voor dubbele inhoud

Een pagina kan bereikbaar zijn op HTTP- en HTTPS-adressen, met en zonder www, of op zowel /blog/ als /blog/index.html. Een canonieke link geeft het voorkeursadres aan:

<link rel="canonical" href="https://www.example.com/blog/">

Gebruik de volledige absolute URL. Canonieke opmaakcode is een sterke aanwijzing; een omleiding die bezoekers daadwerkelijk naar het voorkeursadres stuurt, is een sterker signaal. Laat interne links en sitemap-URL's aansluiten op die voorkeur om tegenstrijdige signalen te voorkomen.

Controleer wat zoekmachines kunnen zien

Google Search Console en Bing Webmaster Tools accepteren sitemaps en tonen indexerings- en crawlproblemen nadat je hebt bevestigd dat je de website beheert. Een zoekopdracht naar site:example.com geeft een globaal beeld van geïndexeerde pagina's. Het kan dagen of weken duren voordat nieuwe websites verschijnen. Een sitemap, nette opmaakcode of een betaling kan geen hoge positie garanderen; deze hulpmiddelen helpen je technische obstakels te vinden en te begrijpen wat is verwerkt.

Een statische website biedt voorbereide HTML-, CSS-, afbeeldings- en scriptbestanden aan. Je kunt de inhoud bijwerken wanneer je nieuwe bestanden publiceert; “statisch” beschrijft hoe de hostingprovider ze aanbiedt. De hostingserver blijft ze leveren wanneer je eigen computer is uitgeschakeld.

Weet wat de hostingprovider biedt

Een dynamische website bouwt antwoorden op de server op, vaak vanuit een database. Een kleine informatieve website of een portfolio dat met HTML en CSS is gebouwd, kan statische hosting gebruiken zonder programmeren aan de serverkant. Als je de opmaakcode voor een contactformulier toevoegt, ontstaat daarmee niet vanzelf een dienst die inzendingen opslaat of e-mailt. Daarvoor is formulierverwerking door de hostingprovider of een aparte dienst nodig.

Aanbieders van statische hosting bieden meestal een tijdelijk adres, publicatiemogelijkheden en HTTPS. Veel providers bieden bestanden aan via een contentdistributienetwerk, dat regionale kopieën bewaart. GitHub Pages, Netlify, Cloudflare Pages en Vercel zijn voorbeelden, met verschillende abonnementsvoorwaarden en werkwijzen. Gedeelde hosting is een andere optie en ondersteunt vaak veilige bestandsoverdracht.

Een statische pagina kan nog steeds JavaScript uitvoeren in de browser van de bezoeker, bijvoorbeeld voor interactie met een menu. De hostingprovider biedt nog steeds een voorbereid scriptbestand aan. Zonder applicatiecode van de website of database op de server zijn er minder applicatieonderdelen om aan te vallen; het hostingaccount en de openbare bestanden hebben nog steeds bescherming nodig.

Een gebruikerswebsite op GitHub Pages gebruikt het hoofdadres https://username.github.io/ vanuit een repository met de naam username.github.io. Een projectwebsite gebruikt een submap zoals /riverside-bikes/. Die adresstructuur is van belang wanneer je paden vanaf de hoofdmap naar websitebestanden test.

Vergelijk behoeften met het huidige abonnement

Lees de limieten en voorwaarden van het abonnement voordat je kiest. Controleer:

• De toegestane opslag en maandelijkse gegevensoverdracht.
• Of het abonnement commercieel gebruik toestaat.
• Ondersteuning voor eigen domeinen en automatische HTTPS.
• Een publicatiemethode die je betrouwbaar kunt gebruiken.
• Eigen foutpagina's, omleidingen en herstel van eerdere uitrollen.
• Formulierverwerking als bezoekers informatie moeten indienen.
• Hoe gemakkelijk je je bestanden naar een andere hostingprovider kunt meenemen.

Een portfolio van een fotograaf met zes pagina's en 40 voorbereide foto's past qua grootte binnen veel gratis abonnementen voor statische hosting. Als het echter betaalde opdrachten oplevert, is het commerciële doel ook van belang. Alleen de grootte bewijst niet dat een gratis abonnement het toestaat. Voorwaarden veranderen, dus controleer de daadwerkelijke dienst en het abonnement in plaats van op een oude vergelijking te vertrouwen.

Kies een beheersbare publicatieroute

Publiceren door slepen en neerzetten kan bij een klein project passen: je uploadt de map via de interface van de hostingprovider. Een repositorykoppeling publiceert vanuit een gekozen opgeslagen codebron en kan updates uitrollen wanneer wijzigingen worden gepusht. Opdrachtregelprogramma's bieden een andere route. Gedeelde hosting ondersteunt vaak SFTP, een versleutelde methode voor bestandsoverdracht. Gewone FTP stelt inloggegevens en bestanden tijdens de overdracht bloot, dus gebruik een veilige route.

Bij GitHub Pages met een gratis abonnement kun je publiceren vanuit openbare repositories. Iedereen kan de repositorybestanden lezen. Ook gepubliceerde websitebestanden zijn openbaar, zelfs wanneer de navigatie er niet naar linkt. Beperk de upload tot bestanden die openbaar moeten zijn en bescherm het hostingaccount met tweefactorauthenticatie.

Controleer een functie in de daadwerkelijke werkwijze

Als de website een contactformulier bevat, zoek dan het eindpunt of de functie van de hostingprovider die het ontvangt. Controleer of het abonnement die functie omvat en verstuur na publicatie een testinzending. Een formulier dat er compleet uitziet, kan nog steeds nergens gegevens naartoe sturen. Als een eigen 404-pagina of permanente omleiding van belang is, controleer dan de exacte configuratiemethode van de hostingprovider voordat je erop vertrouwt.

Uitrollen betekent dat je de huidige websitebestanden bij een hostingprovider publiceert. De publicatiemap wordt online de hoofdmap van de website. Voor gewone HTML en CSS is geen bouwstap nodig: selecteer de map met het voltooide index.html en de bijbehorende websitebestanden.

Publiceer de eerste versie

Bij een hostingprovider waar je bestanden kunt slepen en neerzetten:

1. Open de map die je wilt publiceren en controleer of index.html er rechtstreeks in staat.
2. Valideer de pagina's en test hun links en lay-out via een lokale server.
3. Upload die map via de publicatie-interface van de hostingprovider.
4. Wacht tot de provider meldt dat de uitrol live is.
5. Open het opgegeven webadres en controleer de website daar.

Als de startpagina alleen op /riverside-bikes/index.html verschijnt, heb je mogelijk de bovenliggende map één niveau te hoog geüpload. De bedoelde publicatiemap is riverside-bikes/, niet de map waarin die staat. Corrigeer de mapselectie en publiceer opnieuw; als je bezoekers alleen naar het diepere adres linkt, blijft het kale startadres verkeerd.

Publiceer vanuit een repository

Open in GitHub Pages de instellingen van de repository en ga naar Pages. Kies “Deploy from a branch”, selecteer daarna de branch en de publicatiemap, de hoofdmap of /docs, en sla op. Wanneer een nieuwe versie naar die publicatiebron wordt gepusht, rolt Pages die opnieuw uit. Controleer het weergegeven Pages-adres nadat de uitrol is voltooid. Een project-URL kan de repositorynaam bevatten, dus test paden op die daadwerkelijke locatie.

Andere hostingproviders hebben eigen instellingen voor repositorykoppelingen en mappen. Voeg voor een website van gewone bestanden geen bouwopdracht toe alleen omdat de interface daar een veld voor biedt.

Controleer de geleverde versie

Open elke pagina, volg interne links en inspecteer de console en het netwerkpaneel op bronnen die niet zijn geladen. Dwing een volledige herlaadactie af om bestanden uit de cache niet voor de nieuwe versie aan te zien. Probeer de website op een echte telefoon. Controleer de zichtbare wijziging die je wilde publiceren, niet alleen of er geen foutmelding is.

Configureer een eigen 404.html waar de hostingprovider dat ondersteunt. Die pagina moet de bezoeker vertellen dat het adres niet is gevonden en een bruikbare weg naar de startpagina bieden. Controleer een verzonnen ontbrekend adres om na te gaan of de provider de pagina daadwerkelijk gebruikt. Een behulpzame foutpagina vervangt geen omleiding wanneer de inhoud is verplaatst.

Bewaar een bron die je kunt herstellen

Het lokale project of de gekoppelde repository is de gezaghebbende bron, de kopie van waaruit toekomstige versies worden gepubliceerd. Een snelle correctie in de webeditor van een hostingprovider kan bij de volgende upload verdwijnen, tenzij je die ook in die bron zet.

Gebruik een previewdeployment wanneer dat beschikbaar is om een update te testen voordat bezoekers die ontvangen. Als een update de gepubliceerde website kapotmaakt, kun je met het terugzetten van een eerdere versie bij de hostingprovider een eerdere uitrol herstellen. Corrigeer daarna ook de bron, anders kan de volgende versie de fout opnieuw introduceren.

Wanneer een pagina van adres verandert, voeg je met de omleidingsregels van de hostingprovider een permanente 301-omleiding toe van de oude naar de nieuwe URL. Test het oude adres na publicatie: het moet naar de bedoelde nieuwe pagina leiden. Bij Netlify is een _redirects-bestand één manier om dit te configureren; andere providers gebruiken andere instellingen.

Een domeinnaam is een leesbare naam zoals example.com. DNS koppelt die naam aan informatie zoals het IP-adres van een hostingprovider. Registratie geeft je het recht de naam gedurende een periode te gebruiken; het is geen definitieve aankoop.

Lees een webadres

In https://www.example.com/prices.html is https het schema, www.example.com de hostnaam en /prices.html het pad. Lees de domeinlabels van rechts naar links: .com is het topleveldomein, of TLD; example is de daaronder geregistreerde naam; www is een subdomein.

Generieke TLD's zijn onder meer .com, .org, .net, .dev, .shop en .studio. Landcode-TLD's gebruiken twee letters, zoals .de, .fr, .jp, .ca en .au. Sommige namen worden geregistreerd onder een categorie op het tweede niveau, zoals .co.uk.

Voor sommige uitgangen gelden toelatingseisen. .ca vereist een band met Canada; .eu accepteert EU- of EER-burgers, inwoners en gevestigde organisaties die aan de voorwaarden voldoen; .us vereist een band met de Verenigde Staten. Controleer de regels van de registry voordat je een uitgang met beperkingen kiest. De uitgangen .dev en .app vereisen HTTPS in browsers.

Weet wie de registratie verzorgt

Een registrar legt je registratie vast bij de registry die het TLD beheert. ICANN coördineert het systeem van generieke TLD's en erkent de bijbehorende registrars; registry's voor landcodes stellen hun eigen regels vast. Registraties duren gewoonlijk één tot tien jaar en moeten worden verlengd.

Kies een naam die kort is, gemakkelijk uit te spreken en te spellen is en dicht bij de naam van het project of bedrijf ligt. Vermijd verwarrende cijfers en koppeltekens en controleer of de naam geen merk van iemand anders gebruikt. Als een gewenste .com-naam bezet is, vergelijk dan een duidelijke langere naam, een geschikte lokale uitgang of een relevante generieke uitgang. Beschikbaarheid alleen geeft geen toestemming om de naam van een ander bedrijf te gebruiken.

Vergelijk de verplichtingen op langere termijn

Controleer zowel de verlengingsprijs als de aanbieding voor het eerste jaar. Voor extra diensten, waaronder e-mail, kunnen aparte kosten gelden. Het domein en de websitehosting kunnen van verschillende bedrijven komen; door een domein te registreren upload je niet vanzelf een website.

Geef juiste eigenaar- en contactgegevens op en reageer op de verificatie-e-mail van de registrar. Niet-bevestigde contactgegevens kunnen tot schorsing leiden. Voor registratiegegevens van generieke TLD's werd RDAP in januari 2025 de definitieve openbare opzoekmethode, ter vervanging van de oudere vereisten voor de WHOIS-dienst. Bij openbaar opzoeken blijven persoonsgegevens meestal verborgen; de registrar heeft nog steeds juiste gegevens nodig.

Laat de eigenaar de controle behouden

De eigenaar van het project of bedrijf moet het account van de domeinnaamhouder beheren, ook wanneer een ontwerper de website bouwt. Schakel tweefactorauthenticatie in en houd herstelgegevens actueel. Volg om van registrar te veranderen het verhuisproces, met een verhuiscode en het ontgrendelen van het domein wanneer dat is toegestaan.

Noteer de vervaldatum, schakel verlenging in en houd de betaalmethode geldig. Een verlopen registratie kan de website en domeinmail onderbreken; na de toepasselijke respijt- en verwijderingsperiodes kan iemand anders de naam registreren. Back-ups van de hosting kunnen een domeinregistratie die je laat verlopen niet behouden.

Het domeinnaamsysteem, of DNS, slaat records voor namen op. Een resolver zoekt die records op en bewaart het antwoord vaak in een cache. De gezaghebbende nameservers zijn de servers die verantwoordelijk zijn voor de DNS-informatie van het domein. Breng wijzigingen aan bij de provider waarvan de nameservers het domein daadwerkelijk bedienen.

Kies het recordtype

De IP-adressen en de .example-naam hier zijn waarden voor documentatie. Gebruik voor een echte koppeling de waarden die je hostingprovider voor je website opgeeft.

Het hoofddomein is de geregistreerde hoofdnaam, zoals example.com. Standaard-DNS staat daar geen CNAME toe, omdat het hoofddomein ook andere records nodig heeft, waaronder NS. Gebruik de A- en AAAA-waarden van de hostingprovider, of een door de provider ondersteunde ALIAS-, ANAME- of CNAME-flatteningfunctie. Een subdomein zoals www gebruikt meestal een CNAME.

Koppel twee vormen van een adres

Stel dat een hostingprovider om een A-record voor het hoofddomein en een CNAME voor www vraagt. Een provider die @ voor het hoofddomein gebruikt, kan dit tonen:

Type    Name    Value                           TTL
A       @       192.0.2.44                       3600
CNAME   www     riverside-bikes.pages.example    3600

Voer het eigen domein ook in bij de hostinginstellingen. De hostingprovider moet de opgevraagde naam herkennen en aan de website toewijzen. Kies het hoofdadres en configureer de andere vorm zo dat die daarnaar omleidt.

Lees de instructies van de provider voor het naamveld. Als die automatisch example.com toevoegt, kan het typen van www.example.com leiden tot www.example.com.example.com. Verwijder verouderde adresrecords wanneer je van hostingprovider verandert; als je zowel oude als nieuwe waarden laat staan, kunnen bezoekers op verschillende servers terechtkomen.

Laat antwoorden in de cache verlopen

TTL geeft aan hoeveel seconden een DNS-antwoord in de cache mag blijven. Een TTL van 3.600 is één uur; 86.400 is 24 uur. Na een update kunnen verschillende bezoekers tijdelijk verschillende antwoorden ontvangen. Het kan 24 uur of langer duren voordat wijzigingen overal zichtbaar zijn.

Verlaag voor een geplande verhuizing de TTL naar 300 seconden, minstens één oude TTL-periode vóór de omschakeling. Als je die pas op het moment van omschakelen verlaagt, kan dat de levensduur van een antwoord dat al onder de oude TTL in de cache staat niet verkorten.

Verplaats DNS zonder andere diensten te verliezen

Je kunt DNS bij de registrar laten en records bewerken, of de nameservers veranderen naar die van een nieuwe provider. Bij een nameserverwijziging worden records niet gekopieerd. Maak de benodigde MX-, TXT- en andere records vóór de overstap opnieuw aan bij de nieuwe provider en controleer ze, vooral wanneer domeinmail al werkt.

Controleer antwoorden met nslookup www.example.com, dig example.com A +short of een DNS-opzoekdienst en vergelijk ze met de instellingen van de hostingprovider. Voeg wildcardrecords alleen bewust toe en waar de provider ze ondersteunt. Verwijder bij het weghalen van een gehoste website ook de DNS-records die ernaar verwijzen; door een vergeten alias kan iemand anders mogelijk het verlaten doel bij de hostingprovider claimen.

HTTPS verstuurt HTTP via een versleutelde TLS-verbinding. Het beschermt de privacy en integriteit van gegevens tijdens de overdracht en laat de browser de server voor het opgevraagde domein authenticeren. Gewone HTTP stelt gegevens bloot aan mensen die de verbinding kunnen observeren.

Een certificaat identificeert het domein

Een TLS-certificaat koppelt een domeinnaam aan een openbare sleutel en is ondertekend door een vertrouwde certificaatautoriteit, of CA. Het vermeldt de namen waarvoor het geldt en de vervaldatum. Als bezoekers zowel example.com als www.example.com gebruiken, moet het certificaat beide namen dekken, ook wanneer de ene naar de andere omleidt: de browser maakt een beveiligde verbinding voordat die de omleiding ontvangt.

Een HTTPS-verbinding is geen oordeel over de eerlijkheid van een bedrijf. Een frauduleuze website kan een certificaat verkrijgen voor een naam die de beheerder ervan beheert. De bescherming van de verbinding en de betrouwbaarheid van de website zijn afzonderlijke kwesties.

Laat de hostingprovider het certificaat uitgeven en verlengen

Veel aanbieders van statische hosting vragen automatisch een gratis certificaat aan, vaak bij Let's Encrypt, zodra DNS naar de provider verwijst en het domein is geconfigureerd. De certificaatautoriteit controleert of de aanvrager de naam beheert, bijvoorbeeld via een DNS-record of een bestand dat via het web wordt opgehaald. De uitgifte kan enkele minuten tot ongeveer een dag duren.

Volgens de stand van oktober 2026 hebben nieuw uitgegeven publiek vertrouwde TLS-servercertificaten een maximale geldigheidsduur van 200 dagen onder de regels die op 15 maart 2026 ingingen. Het maximum wordt 100 dagen in maart 2027 en 47 dagen in maart 2029. De standaard klassieke certificaten van Let's Encrypt zijn momenteel 90 dagen geldig; er zijn ook kortere profielen beschikbaar. Automatische verlenging voorkomt dat je dit werk handmatig moet herhalen.

Als voorbeeld van 90 dagen verloopt een certificaat dat op 1 maart 2026 is uitgegeven op 30 mei. Verlenging wanneer er nog 30 dagen over zijn, zou rond 30 april plaatsvinden. De werkelijke vervaldatum en verlengingsstatus zijn beschikbaar via de hostingprovider of de certificaatgegevens; ga er niet van uit dat een werkende domeinregistratie ook betekent dat het certificaat nog geldig is.

Leid om naar HTTPS en herstel onveilige websitebestanden

Schakel bij de hostingprovider het afdwingen van HTTPS in. Dat leidt http://-verzoeken om naar het HTTPS-adres, meestal met status 301 of 308. Kies ook één hoofdhostnaam, met of zonder www, en leid de andere daarnaar om.

Gemengde inhoud ontstaat wanneer een HTTPS-pagina een bron via http:// opvraagt. Browsers blokkeren onveilige scripts, stijlbladen, frames en lettertypen. Ze proberen sommige mediaverzoeken op te waarderen naar HTTPS, wat mislukt als de bron geen HTTPS kan aanbieden. Controleer consolemeldingen en zoek in de code naar http://. Gebruik relatieve paden voor je eigen bestanden en werkende HTTPS-URL's voor externe bronnen.

HSTS, HTTP Strict Transport Security, vertelt browsers gedurende een bepaalde periode HTTPS te gebruiken. Schakel dit in wanneer HTTPS betrouwbaar werkt; browsers die het beleid hebben ontvangen, vallen in die periode niet terug op gewone HTTP. Voor de uitgangen .dev en .app is vooraf ingesteld dat ze alleen met HTTPS werken.

Als na het koppelen van een domein een certificaatwaarschuwing verschijnt, controleer dan DNS, de uitgiftestatus en de gedekte namen. Het kale domein kan werken terwijl www niet werkt wanneer alleen de kale naam wordt gedekt. Corrigeer de configuratie en wacht waar nodig op de uitgifte; bezoekers moeten een certificaatwaarschuwing niet omzeilen.

Een gepubliceerde website verandert zelfs wanneer de bestanden niet veranderen. Externe links verhuizen, contactgegevens raken verouderd, domeinen naderen hun vervaldatum en widgets van derden veranderen. Onderhoud houdt de inhoud correct en de levering betrouwbaar.

Volg voor elke update dezelfde route

Bewerk het lokale project of de repository, test in een browser, valideer de betreffende code, rol uit en controleer de gepubliceerde pagina's. Maak een preview wanneer de hostingprovider dat ondersteunt. Controleer een geslaagde correctie in de kopie die voor toekomstige versies wordt gebruikt, zodat die bij de volgende upload niet verloren kan gaan.

Een inhoudelijke wijziging verdient ook een inhoudelijke controle. Controleer datums, openingstijden, prijzen en contactgegevens aan de hand van hun huidige bron. Geef pagina's een eigenaar of een controledatum. Verwijder of vervang informatie die de dienst niet meer beschrijft; een oude aankondiging van een evenement kan bezoekers misleiden, ook wanneer elke tag geldig is.

Controleer links en bezoekerstaken

Linkrot is het geleidelijk uitvallen van links doordat doelpagina's verhuizen of verdwijnen. Gebruik een linkcontroleprogramma zoals de W3C Link Checker en controleer en herstel daarna de gemelde fouten. Wanneer je eigen pagina is verhuisd, behoudt een omleiding oude inkomende links. Werk voor een externe pagina het doel bij of verwijder de link wanneer er geen bruikbare vervanging is.

Probeer echte bezoekerstaken uit. Verstuur een test via het contactformulier en controleer of die aankomt. Volg de navigatie met een toetsenbord. Test een telefoonlay-out. Een beschikbaarheidscontrole die een pagina ontvangt, kan niet vaststellen of een formulier of navigatie werkt.

Bewaar herstelbare kopieën

Maak op minstens twee plaatsen een back-up van de bron en benodigde websitebestanden, bijvoorbeeld op een computer plus een externe schijf, in cloudopslag of een repository. Een probleem met het hostingaccount of een verkeerde uitrol kan de gepubliceerde kopie verwijderen, dus vertrouw niet alleen op de hostingprovider van de gepubliceerde website als back-up. Met versiegeschiedenis kun je mogelijk eerdere versies herstellen. Bewaar voldoende informatie om het domein opnieuw te koppelen en de website opnieuw te publiceren.

Zorg voor verlengingen en toegang tot accounts

Schakel automatische domeinverlenging in en houd de betaalmethode geldig. Controleer de vervaldatum en bevestigingsberichten. Zorg dat registrar- en hostingaccounts tweefactorauthenticatie en actuele herstelgegevens gebruiken. Certificaatverlenging hangt ook af van een werkende domeinconfiguratie, dus controleer HTTPS na DNS-wijzigingen.

Een beschikbaarheidsmonitor controleert de website herhaaldelijk en waarschuwt wanneer die niet meer reageert. Webmasterhulpmiddelen kunnen mislukte crawls en 404's van oude adressen aan het licht brengen. Bekijk die rapporten en test daarna het onderliggende probleem in plaats van aan te nemen dat elke waarschuwing dezelfde oorzaak heeft.

Plan werk naar het soort wijziging

Lettertypen, scripts, kaarten en andere ingebedde inhoud van derden kunnen onafhankelijk van je website trager worden, veranderen of verdwijnen. Beperk het aantal en beoordeel of ze nog nodig zijn. Waar een licentie dat toestaat, kan het zelf hosten van een lokale kopie van een websitebestand de afhankelijkheid van een andere server verminderen. Controleer bij vervanging opnieuw de licentie en de noodzaak van updates.