Articles
Introduktion til HTML
Tags brugt i hovedsektionen

Tags brugt i hovedsektionen

Denne artikel forklarer de tags, der bruges i -sektionen.

Den forklarer de tags, der bruges i hovedsektionen, såsom <link>, <script>, <style>.

YouTube Video

Tags brugt i hovedsektionen

<title> tag 

1<title>Document Title</title>
  • <title>-tagget definerer dokumentets titel. Denne titel vises i browserens fane og bruges i bogmærker og søgeresultater.

<link> tag

  • <link>-tagget bruges til at forbinde eksterne ressourcer til det aktuelle dokument. Det bruges almindeligvis til at forbinde eksterne CSS-filer, men kan også bruges til ikoner og andre eksterne ressourcer.

Attributten rel i <link>-tagget

rel-attributten bruges til at specificere forholdet mellem den ressource, der linkes til, og det aktuelle dokument i <link>-tagget. Der findes mange typer værdier for rel-attributten, men her vil vi forklare de særligt vigtige og ofte anvendte værdier.

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheet bruges til at forbinde et eksternt stylesheet.

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon" definerer det ikon, der vises i browserens fane eller bogmærke. Ved at specificere det korrekte favicon forbedres sidens branding og visuelle genkendelse.

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preload bruges til at indlæse ressourcer på forhånd, før siden begynder at blive gengivet. Det er især nyttigt for ressourcer, hvor timing er vigtig, såsom skrifttyper eller store billeder. Dette forbedrer præstationen og forbedrer brugeroplevelsen.

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonical bruges til at informere søgemaskiner om den kanoniske version af en side. I tilfælde af duplikeret indhold hjælper angivelse af den kanoniske URL med at konsolidere søgemaskinens rangering fra en SEO-synsvinkel og sikrer, at indholdet er korrekt indekseret.

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternate bruges til at angive sider på forskellige sprog eller formater til søgemaskiner og browsere. På flersprogede sider kan du angive URL'en for hver sprogversion i kombination med hreflang-attributten for at give brugerne sider på det relevante sprog.

manifest 

1<link rel="manifest" href="/manifest.json">
  • manifest leverer en manifestfil til browseren med konfigurationsoplysninger for en PWA (Progressiv Web App). Denne fil indeholder information som app-ikon, tema-farve og visningstilstand, som hjælper med at installere og køre PWAen på mobile enheder.

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • Når der henvises til eksterne ressourcer, kan en forudgående DNS-opløsning af domænet forbedre indlæsningshastigheden for siden. Dette er især effektivt for sider med mange eksterne ressourcer eller hvor en hurtig brugeroplevelse ønskes.

<style> tag 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • <style>-tagget bruges til at definere interne typografiske ark. Det bruges til at anvende CSS-stilarter på elementer på siden, hvilket giver mulighed for at skrive CSS uden eksterne filer.

<script> tag 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • <script>-tagget bruges til at indlejre JavaScript-kode i et HTML-dokument. Du kan også linke eksterne JavaScript-filer, der styrer sidens dynamiske adfærd. Brug src-attributten til at angive scriptfilen.

Attributterne async og defer

<script>-tagget understøtter to attributter, async og defer, som påvirker tidspunktet for scriptindlæsning og udførelse. Normalt behandles scripts sekventielt af browseren, men brug af disse attributter kan forbedre sidens ydeevne og indlæsningserfaring.

Attributten async 
1<script src="script.js" async></script>
  • Brug af async-attributten gør det muligt at indlæse scriptet asynkront. Browseren indlæser scriptet parallelt med andre ressourcer og udfører det straks, når indlæsningen er afsluttet.
  • async er hovedsageligt egnet til uafhængige scripts og bruges, når scriptet ikke er afhængigt af indlæsningen af andre scripts eller DOM'en.
Attributten defer 
1<script src="script.js" defer></script>
  • Brug af defer-attributten gør det muligt at indlæse scriptet asynkront, men udføre det efter, at HTML-parsningen er fuldført. Udførelsen af scriptet blokerer ikke sidevisningen, og forbedrer dermed brugeroplevelsen.
  • defer er effektiv, når scripts skal udføres, efter at DOM'en er fuldt indlæst. For eksempel er det velegnet, når du ønsker, at scriptet skal køre, efter hele sidens layout og elementer er indlæst.

CORS-politik og attributten crossorigin

Ved indlæsning af eksterne scripts kan sikkerhedsrestriktioner pålægges baseret på Same-Origin Policy. I sådanne tilfælde kan crossorigin-attributten bruges til at tillade ressourcedeling.

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

crossorigin-attributten kan indstilles med følgende to værdier:.

  • anonymous: Sender forespørgsler uden at inkludere legitimationsoplysninger.
  • use-credentials: Sender forespørgsler inklusive legitimationsoplysninger.

Attributten type

<script>-tagget kan bruge type-attributten til at specificere script-typen. Som standard bruges JavaScript, men du kan også specificere bestemte typer scripts (f.eks. modultype JavaScript eller skabelonsprog).

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

  • Siden ECMAScript 2015 (ES6) er JavaScript-moduler blevet introduceret, hvilket gør det muligt at opdele kode i moduler og forbedre genbrugeligheden. Ved at specificere type="module" kan du behandle scriptet som et modul.

  • Moduler kan opdeles i andre moduler ved hjælp af import og export.

Ikke-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>
  • Andre scripts end JavaScript kan også specificeres inden for <script>-tagget. For eksempel kan du bruge type="application/ld+json", når du beskriver strukturerede data som JSON-LD. Her er JSON-LD et format, der strukturerer data på en webside, så søgemaskiner og andre applikationer kan forstå dataene mere detaljeret.

Bemærkninger om brug af <script>-tagget

  • Rækkefølge af scripts: Biblioteker, som scripts afhænger af, skal indlæses før de afhængige scripts. For eksempel skal scripts, der bruger jQuery, indlæses efter selve jQuery.
  • Ydelsesoptimering: For at undgå at påvirke sides belastningshastighed skal du kun indlæse scripts, når det er nødvendigt, og undgå at køre unødvendige scripts.
  • Sikkerhedsforanstaltninger: Når du bruger eksterne scripts, skal du sørge for, at de indlæses fra betroede kilder for at forhindre indlejring af skadelige scripts.

<base>-tag 

1<base href="https://example.com/">
  • <base>-tagget angiver basen for alle relative URL'er i dokumentet. URL'en, der er angivet i href-attributten, bliver basen for relative stier i links og billeder. Det bruges normalt kun én gang pr. side.

<noscript>-tag 

1<noscript>Your browser does not support JavaScript!</noscript>
  • <noscript>-tagget definerer indhold, der vises, når JavaScript er deaktiveret i browseren. Det bruges til at give alternativt indhold til miljøer, hvor JavaScript ikke understøttes.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

FormularvalideringTags relateret til metaoplysninger