Tags gebruikt in het kopgedeelte

Dit artikel legt de tags uit die worden gebruikt in het kopgedeelte.

Het legt de tags uit die in het head-gedeelte worden gebruikt, zoals <link>, <script>, <style>.

YouTube Video

Tags gebruikt in het kopgedeelte

<title>-tag

1<title>Document Title</title>

• De <title>-tag definieert de titel van het document. Deze titel wordt weergegeven in de tab van de browser en wordt gebruikt in bladwijzers en zoekresultaten.

<link>-tag

• De <link>-tag wordt gebruikt om externe bronnen aan het huidige document te koppelen. Het wordt meestal gebruikt om externe CSS-bestanden te koppelen, maar het kan ook worden gebruikt voor iconen en andere externe bronnen.

Het rel-attribuut van de <link>-tag

Het rel-attribuut wordt gebruikt om de relatie tussen de gekoppelde bron en het huidige document in de <link>-tag te specificeren. Er zijn veel soorten waarden voor het rel-attribuut, maar hier zullen we de bijzonder belangrijke en vaak gebruikte bespreken.

stylesheet

1<link rel="stylesheet" href="styles.css">

• stylesheet wordt gebruikt om een externe stylesheet te koppelen.

icon

1<link rel="icon" href="favicon.ico" type="image/x-icon">

• rel="icon" definieert het pictogram dat wordt weergegeven in de tab of bladwijzer van de browser. Door de juiste favicon op te geven, worden de branding en visuele herkenning van de site verbeterd.

preload

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• preload wordt gebruikt om bronnen vooraf te laden voordat de paginarendering begint. Het is vooral nuttig voor bronnen waarbij timing belangrijk is, zoals lettertypen of grote afbeeldingen. Dit verbetert de prestaties en verhoogt de gebruikerservaring.

canonical

1<link rel="canonical" href="https://example.com/page.html">

• canonical wordt gebruikt om zoekmachines te informeren over de canonical-versie van een pagina. Bij dubbele inhoud helpt het aangeven van de canonical-URL om de ranking bij zoekmachines te consolideren vanuit een SEO-perspectief en ervoor te zorgen dat inhoud correct wordt geïndexeerd.

alternate

1<link rel="alternate" hreflang="en" href="https://example.com/en/">

• alternate wordt gebruikt om pagina's in andere talen of formaten aan zoekmachines en browsers aan te geven. Op meertalige sites kun je de URL voor elke taalversie specificeren in combinatie met het hreflang-attribuut om gebruikers pagina's in de juiste taal te bieden.

manifest

1<link rel="manifest" href="/manifest.json">

• De manifest biedt de browser een manifestbestand met configuratie-informatie voor een PWA (Progressive Web App). Dit bestand bevat informatie zoals het app-pictogram, de thema-kleur en de weergavemodus, wat helpt bij het installeren en uitvoeren van de PWA op mobiele apparaten.

dns-prefetch

1<link rel="dns-prefetch" href="//example.com">

• Bij het verwijzen naar externe bronnen kan het vooraf uitvoeren van een DNS-resolutie van het domein de laadsnelheid van de pagina verbeteren. Dit is vooral effectief voor pagina's met veel externe bronnen of waar een snelle gebruikerservaring gewenst is.

<style>-tag

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>

• De <style> tag wordt gebruikt om interne stijlblaadjes te definiëren. Het wordt gebruikt om CSS-stijlen toe te passen op elementen op de pagina, zodat je CSS kunt schrijven zonder externe bestanden te gebruiken.

<script>-tag

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>

• De <script> tag wordt gebruikt om JavaScript-code in een HTML-document in te bedden. Je kunt ook externe JavaScript-bestanden koppelen, waarmee je het dynamische gedrag van de pagina beheert. Gebruik het src attribuut om het scriptbestand op te geven.

De async- en defer-attributen

De <script> tag ondersteunt twee attributen, async en defer, die de timing van het laden en uitvoeren van scripts beïnvloeden. Normaal worden scripts in volgorde verwerkt door de browser, maar het gebruik van deze attributen kan de prestaties van de pagina en de laadervaring verbeteren.

Het async-attribuut

1<script src="script.js" async></script>

• Het gebruik van het async attribuut maakt het mogelijk om het script asynchroon te laden. De browser laadt het script parallel met andere bronnen en voert het onmiddellijk uit zodra het laden is voltooid.
• async is voornamelijk geschikt voor onafhankelijke scripts en wordt gebruikt wanneer het script niet afhankelijk is van het laden van andere scripts of de DOM.

Het defer-attribuut

1<script src="script.js" defer></script>

• Het gebruik van het defer attribuut maakt het mogelijk om het script asynchroon te laden, maar het pas uit te voeren nadat de HTML-analyse is voltooid. De uitvoering van het script blokkeert de weergave van de pagina niet, wat de gebruikerservaring verbetert.
• defer is effectief wanneer scripts moeten worden uitgevoerd nadat de DOM volledig is geladen. Bijvoorbeeld, het is geschikt wanneer je wilt dat het script wordt uitgevoerd nadat de gehele lay-out en elementen van de pagina zijn geladen.

CORS-beleid en het crossorigin-attribuut

Bij het laden van externe scripts kunnen beveiligingsbeperkingen worden opgelegd op basis van het Same-Origin Policy. In dergelijke gevallen kan het crossorigin attribuut worden gebruikt om bronnen te delen.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Het crossorigin attribuut kan worden ingesteld met de volgende twee waarden:.

• anoniem: Verzendt verzoeken zonder inloggegevens op te nemen.
• gebruik-referenties: Verzendt verzoeken inclusief inloggegevens.

type-attribuut

De <script>-tag kan het attribuut type gebruiken om het type script op te geven. Standaard wordt JavaScript gebruikt, maar je kunt ook bepaalde soorten scripts opgeven (bijvoorbeeld module-type JavaScript of een sjabloontaal).

JavaScript-modules

1<script type="module" src="module.js"></script>

• Sinds ECMAScript 2015 (ES6) zijn JavaScript-modules geïntroduceerd, waardoor code opgesplitst kan worden in modules en de herbruikbaarheid wordt verbeterd. Door type="module" op te geven, kun je het script behandelen als een module.

• Modules kunnen worden opgesplitst in andere modules met behulp van import en export.

Niet-JavaScript-scripts

1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>

• Scripts anders dan JavaScript kunnen ook worden opgegeven binnen de <script>-tag. Gebruik bijvoorbeeld type="application/ld+json" bij het beschrijven van gestructureerde gegevens zoals JSON-LD. JSON-LD is een formaat dat gegevens op een webpagina structureert, zodat zoekmachines en andere toepassingen de gegevens beter kunnen begrijpen.

Notities over het gebruik van de <script>-tag

• Volgorde van scripts: Bibliotheken waarvan scripts afhankelijk zijn, moeten worden geladen vóór de afhankelijke scripts. Scripts die jQuery gebruiken, moeten bijvoorbeeld worden geladen nadat jQuery zelf is geladen.
• Prestatieoptimalisatie: Laad scripts alleen wanneer nodig en vermijd het uitvoeren van onnodige scripts om de laadsnelheid van de pagina niet te beïnvloeden.
• Beveiligingsmaatregelen: Zorg ervoor dat externe scripts worden geladen van vertrouwde bronnen om insluiting van kwaadaardige scripts te voorkomen.

<base>-tag

1<base href="https://example.com/">

• De <base>-tag stelt de basale URL in voor alle relatieve URL's in het document. De URL die wordt opgegeven in het href-attribuut wordt de basis voor relatieve paden in links en afbeeldingen. Het wordt meestal slechts één keer per pagina gebruikt.

<noscript>-tag

1<noscript>Your browser does not support JavaScript!</noscript>

• De <noscript>-tag definieert inhoud die wordt weergegeven wanneer JavaScript is uitgeschakeld in de browser. Het wordt gebruikt om alternatieve inhoud te bieden voor omgevingen waar JavaScript niet wordt ondersteund.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video