Articles
Introduksjon til HTML
Tagger brukt i hodet-seksjonen

Tagger brukt i hodet-seksjonen

Denne artikkelen forklarer taggene som brukes i head-seksjonen.

Det forklarer taggene som brukes i hodet-delen, slik som <link>, <script>, <style>.

YouTube Video

Tagger brukt i hodet-seksjonen

<title>-tag 

1<title>Document Title</title>
  • <title>-taggen definerer tittelen på dokumentet. Denne tittelen vises i nettleserens fane og brukes i bokmerker og søkeresultater.

<link>-tag

  • <link>-taggen brukes til å koble eksterne ressurser til det nåværende dokumentet. Den brukes ofte til å koble eksterne CSS-filer, men kan også brukes til ikoner og andre eksterne ressurser.

rel-attributtet i <link>-taggen

rel-attributtet brukes til å angi forholdet mellom ressursen som kobles til og det nåværende dokumentet i <link>-taggen. Det finnes mange typer verdier for rel-attributtet, men her vil vi forklare de spesielt viktige og ofte brukte.

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheet brukes til å koble til et eksternt stilark.

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon" definerer ikonet som vises i nettleserens fane eller bokmerke. Ved å spesifisere riktig favicon forbedres nettstedets merkevarebygging og visuelle gjenkjenning.

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preload brukes til å laste inn ressurser på forhånd før siden begynner å vises. Det er spesielt nyttig for ressurser der timing er viktig, som fonter eller store bilder. Dette forbedrer ytelsen og forbedrer brukeropplevelsen.

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonical brukes til å informere søkemotorer om kanonisk versjon av en side. Ved duplikatinnhold hjelper det å angi den kanoniske URL-en med å konsolidere søkemotorrangering fra et SEO-perspektiv og sikrer at innholdet blir korrekt indeksert.

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternate brukes til å indikere sider av forskjellige språk eller formater til søkemotorer og nettlesere. På flerspråklige nettsteder kan du angi URL-en for hver språkversjon i kombinasjon med hreflang-attributtet for å gi brukerne sider på riktig språk.

manifest 

1<link rel="manifest" href="/manifest.json">
  • manifest gir nettleseren en manifestfil som inneholder konfigurasjonsinformasjon for en PWA (Progressiv Web App). Denne filen inneholder informasjon som appikon, temafarge og visningsmodus, som hjelper til med å installere og kjøre PWA på mobile enheter.

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • Når man refererer til eksterne ressurser, kan forhåndsoppløsning av domenet via DNS forbedre sidens lastetid. Dette er spesielt effektivt for sider med mange eksterne ressurser eller der en rask brukeropplevelse er ønsket.

<style>-tag 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • <style>-taggen brukes til å definere interne stilark. Den brukes til å legge til CSS-stiler på elementer på siden, slik at du kan skrive CSS uten å bruke eksterne filer.

<script>-tag 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • <script>-taggen brukes til å bygge inn JavaScript-kode i et HTML-dokument. Du kan også koble til eksterne JavaScript-filer for å kontrollere sidens dynamiske oppførsel. Bruk src-attributtet for å spesifisere skriptfilen.

async- og defer-attributtene

<script>-taggen støtter to attributter, async og defer, som påvirker tidspunktet for skriptlasting og kjøring. Normalt prosesseres skript sekvensielt av nettleseren, men bruk av disse attributtene kan forbedre sideytelsen og lastingsopplevelsen.

async-attributtet 
1<script src="script.js" async></script>
  • Bruk av async-attributtet lar skriptet lastes asynkront. Nettleseren laster skriptet parallelt med andre ressurser og kjører det umiddelbart når lastingen er fullført.
  • async er hovedsakelig egnet for uavhengige skript og brukes når skriptet ikke er avhengig av andre skripts lasting eller DOM-en.
defer-attributtet 
1<script src="script.js" defer></script>
  • Bruk av defer-attributtet lar skriptet lastes asynkront, men kjøre etter at HTML-parsingen er fullført. Utførelsen av skriptet blokkerer ikke sidevisningen, og forbedrer dermed brukeropplevelsen.
  • defer er effektiv når skript må kjøre etter at DOM-en er fullstendig lastet. For eksempel er det egnet når du vil at skriptet skal kjøre etter at hele layouten og elementene på siden er lastet.

CORS-policy og crossorigin-attributtet

Når eksterne skript lastes, kan sikkerhetsbegrensninger pålegges basert på Same-Origin Policy. I slike tilfeller kan crossorigin-attributtet brukes for å tillate ressursdeling.

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

crossorigin-attributtet kan settes med følgende to verdier:.

  • anonymous: Sender forespørsler uten å inkludere legitimasjon.
  • use-credentials: Sender forespørsler som inkluderer legitimasjon.

type-attributtet

<script>-taggen kan bruke type-attributtet for å spesifisere typen skript. Som standard brukes JavaScript, men du kan også spesifisere visse typer skript (f.eks. modultype JavaScript eller malbasert språk).

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

  • Siden ECMAScript 2015 (ES6) har JavaScript-moduler blitt introdusert, som tillater at kode deles opp i moduler, og som forbedrer gjenbrukbarhet. Ved å spesifisere type="module" kan du behandle skriptet som en modul.

  • Moduler kan deles inn i andre moduler ved hjelp av import og export.

Skript som ikke er JavaScript 
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>
  • Skript som ikke er JavaScript, kan også spesifiseres innenfor <script>-taggen. For eksempel, bruk type="application/ld+json" når du beskriver strukturerte data som JSON-LD. Her er JSON-LD et format som strukturerer data på en nettside, slik at søkemotorer og andre applikasjoner kan forstå dataene dypere.

Notater om bruk av <script>-taggen

  • Rekkefølge på skript: Biblioteker som skript er avhengige av, må lastes inn før de avhengige skriptene. For eksempel, skript som bruker jQuery må lastes inn etter at jQuery er lastet inn.
  • Ytelsesoptimalisering: For å unngå å påvirke innlastingshastigheten til siden, last kun inn skript når det er nødvendig, og unngå å kjøre unødvendige skript.
  • Sikkerhetstiltak: Når du bruker eksterne skript, sørg for at de lastes fra pålitelige kilder for å unngå innlasting av ondsinnede skript.

<base>-tag 

1<base href="https://example.com/">
  • <base>-taggen setter grunn-URL-en for alle relative URL-er i dokumentet. URL-en spesifisert i href-attributtet blir grunnlaget for relative stier i lenker og bilder. Den brukes vanligvis bare én gang per side.

<noscript>-tag 

1<noscript>Your browser does not support JavaScript!</noscript>
  • <noscript>-taggen definerer innhold som vises når JavaScript er deaktivert i nettleseren. Den brukes til å tilby alternativt innhold for miljøer der JavaScript ikke støttes.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

SkjemavalideringKoder relatert til metainformasjon