. De browser haalt hem op terwijl hij parset en voert hem uit zodra het document geparset is, in volgorde. Scripts met type=\"module\" krijgen automatisch defer. Gebruik async alleen voor onafhankelijke scripts zoals analytics."}},{"@type":"Question","name":"Heb ik de X-UA-Compatible-metatag nodig?","acceptedAnswer":{"@type":"Answer","text":"Nee. Die had alleen effect op oude versies van Internet Explorer, dat Microsoft niet meer ondersteunt. Huidige boilerplates laten hem weg."}},{"@type":"Question","name":"Welke faviconbestanden heb ik echt nodig?","acceptedAnswer":{"@type":"Answer","text":"Een favicon.ico in de root van de site voor oude tools en crawlers, een SVG-icoon voor moderne browsers en een apple-touch-icon-PNG van 180 bij 180 pixels voor iOS-beginschermen dekken bijna elk geval. Een web app manifest voegt grotere iconen toe als u installeerbaarheid wilt."}},{"@type":"Question","name":"Wat is het verschil tussen defer en async?","acceptedAnswer":{"@type":"Answer","text":"Beide downloaden zonder de parser te blokkeren. defer wacht tot het parsen klaar is en houdt scripts in de volgorde van het document. async voert elk script uit zodra het binnen is, in willekeurige volgorde, wat scripts kan breken die van elkaar of van de DOM afhangen."}}]}
HTML boilerplate: een moderne basis, regel voor regel uitgelegd
HTML boilerplate generator
HTML boilerplate: toegelicht template en generator | We.Inc
Een moderne HTML5-boilerplate regel voor regel uitgelegd, plus een generator voor titel, beschrijving, taal, Open Graph, favicons, themakleur en CSS- of JS-links. Kopieer of download index.html.
Een minimale HTML5-boilerplate heeft een doctype nodig, een html-element met een lang-attribuut, een head met de UTF-8-charset, de viewport-metatag, een title en een description, en daarna een body. Koppel CSS met een link-tag in de head en JavaScript met een script-tag met defer. Genereer de uwe hieronder en download index.html.
De regels die elke pagina nodig heeft
Regel
Waarom
<!doctype html>
Zet de standards mode aan
<html lang="en">
Taal voor schermlezers en vertaling
<meta charset="utf-8">
Juiste tekens en symbolen
<meta name="viewport" ...>
Goede schaling op telefoons
<title>
Tekst op het tabblad en kop in zoekresultaten
De generator schrijft met een paar schakelaars een volledige, geldige index.html: paginatitel en beschrijving, taal, Open Graph-tags voor linkvoorbeelden, een set favicons, themakleur, preconnect-hints en uw links naar stylesheet en script met het laadattribuut dat u kiest. Elke regel die hij kan maken, wordt verderop in het toegelichte template uitgelegd.
Vul de titel, beschrijving en taal in en zet de extra's aan die u wilt.
Kies hoe uw script laadt: defer, module of async. Het voorbeeld van het bestand wordt meteen bijgewerkt.
Kopieer de markup of download hem als index.html, klaar om te openen in een browser of editor.
Lees de toegelichte versie hieronder om elke regel te begrijpen voordat u live gaat.
Houd de charset-meta binnen de eerste 1024 bytes van het bestand. Hem als eerste in de head zetten is de eenvoudigste manier om dat zeker te weten.
Schrijf voor elke pagina een unieke titel en beschrijving. Zoekmachines tonen ze vaak als kop en snippet van het resultaat.
Vermijd maximum-scale=1 of user-scalable=no in de viewport-tag. Zoomen blokkeren benadeelt lezers die grotere tekst nodig hebben.
Laad scripts met defer in de head in plaats van aan het einde van de body. Het bestand wordt vroeg gedownload en draait toch pas na het parsen.
Gebruik absolute URL's voor og:image. Sociale netwerken halen de afbeelding op vanaf hun eigen servers en kunnen een relatief pad niet oplossen.
Veelgestelde vragen
Hoe koppel ik een CSS-bestand aan HTML?
Voeg <link rel="stylesheet" href="styles.css"> toe binnen de head. De href is relatief ten opzichte van het HTML-bestand, dus css/styles.css wijst naar een map css ernaast. Stylesheets in de head blokkeren het renderen even, en dat is de bedoeling: zo voorkomt u een flits van ongestylede content.
Waar hoort de script-tag?
In de head met defer, bijvoorbeeld <script src="app.js" defer></script>. De browser haalt hem op terwijl hij parset en voert hem uit zodra het document geparset is, in volgorde. Scripts met type="module" krijgen automatisch defer. Gebruik async alleen voor onafhankelijke scripts zoals analytics.
Heb ik de X-UA-Compatible-metatag nodig?
Nee. Die had alleen effect op oude versies van Internet Explorer, dat Microsoft niet meer ondersteunt. Huidige boilerplates laten hem weg.
Welke faviconbestanden heb ik echt nodig?
Een favicon.ico in de root van de site voor oude tools en crawlers, een SVG-icoon voor moderne browsers en een apple-touch-icon-PNG van 180 bij 180 pixels voor iOS-beginschermen dekken bijna elk geval. Een web app manifest voegt grotere iconen toe als u installeerbaarheid wilt.
Wat is het verschil tussen defer en async?
Beide downloaden zonder de parser te blokkeren. defer wacht tot het parsen klaar is en houdt scripts in de volgorde van het document. async voert elk script uit zodra het binnen is, in willekeurige volgorde, wat scripts kan breken die van elkaar of van de DOM afhangen.
Wat in de head hoort
De head bevat informatie over de pagina in plaats van content: tekenset, viewport, titel, beschrijving, links naar stylesheets, iconen en tags voor sociale voorbeelden. Niets daarvan wordt in de body van de pagina getoond.
Volgorde doet er een beetje toe. Eerst de charset, dan de viewport, daarna titel en beschrijving. Zet preconnect-hints vóór de stylesheets die ze nodig hebben, zodat de verbinding zo vroeg mogelijk start.
Open Graph en linkvoorbeelden
Als iemand uw URL deelt in een berichtenapp of sociaal netwerk, komt de voorbeeldkaart uit og:title, og:description, og:image en og:url. Zonder die tags gokken platforms, vaak slecht.
Een afbeelding van 1200 bij 630 pixels werkt op de grote netwerken. twitter:card met de waarde summary_large_image vraagt X om de grote versie van de kaart.
De boilerplate, regel voor regel
Een volledige moderne index.html
Alles wat een productiepagina meestal nodig heeft, en niets wat ze niet nodig heeft. De tabel hieronder legt elke regel uit.
Wat elke regel doet
Regel
Wat hij doet
Verplicht?
<!doctype html>
Vertelt de browser standards mode te gebruiken in plaats van quirks mode
Ja
<html lang="en">
Geeft de taal van de pagina op voor hulptechnologie, woordafbreking en vertaling
Ja
<meta charset="utf-8">
Tekencodering zodat accenten, symbolen en emoji goed worden weergegeven
Voorkomt dat telefoons een uitgezoomde desktoppagina tonen
Ja
<title>
Browsertabblad, bladwijzers en meestal de kop in zoekresultaten
Ja
<meta name="description">
Wordt vaak gebruikt als zoeksnippet
Sterk aanbevolen
<link rel="canonical">
De voorkeurs-URL als de pagina via meerdere adressen bereikbaar is
Aanbevolen
<meta name="theme-color">
Kleurt de werkbalk in sommige mobiele browsers
Optioneel
<link rel="icon"> en apple-touch-icon
Tabbladicoon en icoon op het beginscherm
Aanbevolen
og:- en twitter:-metatags
Titel, tekst en afbeelding voor voorbeelden van gedeelde links
Aanbevolen
<link rel="preconnect">
Opent een verbinding met een andere origin voordat die nodig is
Optioneel
<link rel="stylesheet">
Laadt uw CSS
Als u CSS hebt
<script defer>
Laadt JavaScript zonder het parsen te blokkeren en voert het daarna uit
Als u JS hebt
<main>
Markeert de hoofdcontent voor hulptechnologie
Aanbevolen
CSS koppelen aan HTML
Drie manieren om CSS toe te voegen
Een extern bestand is de norm, omdat de browser het over pagina's heen cachet. Een style-blok past bij regels voor één pagina; het style-attribuut past bij losse waarden.
Relatieve paden uitgelegd
De meeste kapotte stylesheets zijn een verkeerd pad. Zoek in het netwerkpaneel van de ontwikkelaarstools naar een 404.
JavaScript correct koppelen
Opties voor het laden van scripts
Markup
Blokkeert parsen?
Draait wanneer
Volgorde behouden?
<script src="a.js">
Ja
Direct wanneer hij bereikt wordt
Ja
<script src="a.js" defer>
Nee
Na het parsen, vóór DOMContentLoaded
Ja
<script src="a.js" async>
Nee (pauzeert even om te draaien)
Zodra hij gedownload is
Nee
<script type="module" src="a.js">
Nee
Zoals defer
Ja
Aanbevolen script-tags
Modules krijgen strict mode, een eigen scope en ondersteuning voor import. Met nomodule kunt u zeer oude browsers een fallback geven als dat nog nodig is.