Articles
Introduktion till HTML
Taggar som används i huvudsektionen

Taggar som används i huvudsektionen

Den här artikeln förklarar taggarna som används i huvudsektionen.

Den förklarar taggarna som används i huvudsektionen, såsom <link>, <script>, <style>.

YouTube Video

Taggar som används i huvudsektionen

<title>-tag 

1<title>Document Title</title>
  • <title>-taggen definierar dokumentets titel. Denna titel visas i webbläsarens flik och används i bokmärken och sökresultat.

<link>-tag

  • <link>-taggen används för att länka externa resurser till det aktuella dokumentet. Den används ofta för att länka externa CSS-filer men kan också användas för ikoner och andra externa resurser.

Attributet rel i <link>-taggen

rel-attributet används för att specificera förhållandet mellan den resurs som länkas och det aktuella dokumentet i <link>-taggen. Det finns många typer av värden för rel-attributet, men här kommer vi att förklara de särskilt viktiga och ofta använda.

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheet används för att länka ett externt stilark.

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon" definierar ikonen som visas i webbläsarens flik eller bokmärke. Genom att specificera rätt favicon förbättras webbplatsens varumärke och visuella igenkänning.

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preload används för att ladda resurser i förväg innan sidrenderingen börjar. Det är särskilt användbart för resurser där timing är viktig, såsom typsnitt eller stora bilder. Detta förbättrar prestanda och förstärker användarupplevelsen.

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonical används för att informera sökmotorer om den kanoniska versionen av en sida. Vid duplicerat innehåll hjälper det att ange den kanoniska URL:en till att konsolidera sökmotorsrankningen ur ett SEO-perspektiv och säkerställer att innehållet indexeras korrekt.

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternate används för att indikera sidor i olika språk eller format till sökmotorer och webbläsare. På flerspråkiga webbplatser kan du specificera URL:en för varje språkversion i kombination med hreflang-attributet för att tillhandahålla användarna sidor på rätt språk.

manifest 

1<link rel="manifest" href="/manifest.json">
  • manifest tillhandahåller webbläsaren en manifestfil med konfigurationsinformation för en PWA (Progressiv webbapplikation). Den här filen innehåller information såsom appens ikon, temafärg och visningsläge, vilket hjälper till att installera och köra PWA på mobila enheter.

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • När du hänvisar till externa resurser kan du förbättra sidladdningshastigheten genom att utföra DNS-upplösning av domänen i förväg. Detta är särskilt effektivt för sidor med många externa resurser eller där en snabb användarupplevelse önskas.

<style>-tag 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • <style>-taggen används för att definiera interna stilmallar. Den används för att applicera CSS-stilar på element på sidan, vilket gör det möjligt att skriva CSS utan att använda externa filer.

<script>-tag 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • <script>-taggen används för att bädda in JavaScript-kod i ett HTML-dokument. Du kan också länka externa JavaScript-filer, vilket styr sidans dynamiska beteende. Använd src-attributet för att specificera skriptfilen.

async och defer Attribut

Taggen <script> stöder två attribut, async och defer, som påverkar tidpunkten för skriptladdning och exekvering. Normalt bearbetas skript sekventiellt av webbläsaren, men användningen av dessa attribut kan förbättra sidans prestanda och laddningsupplevelse.

Attributet async 
1<script src="script.js" async></script>
  • Användning av async-attributet gör att skriptet kan laddas asynkront. Webbläsaren laddar skriptet parallellt med andra resurser och kör det omedelbart när laddningen är klar.
  • async är främst lämpligt för oberoende skript och används när skriptet inte är beroende av andra skript eller DOM-laddning.
Attributet defer 
1<script src="script.js" defer></script>
  • Genom att använda defer-attributet kan skriptet laddas asynkront men köras efter att HTML-analysen är klar. Körningen av skriptet blockerar inte sidans visning, vilket förbättrar användarupplevelsen.
  • defer är effektivt när skript behöver köras efter att DOM:en är fullständigt laddad. Till exempel är det lämpligt när du vill att skriptet ska köras efter att sidans layout och element har laddats helt.

CORS-policy och attributet crossorigin

Vid laddning av externa skript kan säkerhetsbegränsningar införas baserat på Same-Origin Policy. I sådana fall kan crossorigin-attributet användas för att tillåta resursdelning.

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

crossorigin-attributet kan ställas in med följande två värden:.

  • anonymous: Skickar förfrågningar utan att inkludera autentiseringsuppgifter.
  • use-credentials: Skickar förfrågningar inklusive autentiseringsuppgifter.

Attributet type

Taggen <script> kan använda type-attributet för att specificera typen av skript. Som standard används JavaScript, men du kan också specificera vissa typer av skript (t.ex. modultyp-JavaScript eller mallformat).

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

  • Sedan ECMAScript 2015 (ES6) har JavaScript-moduler introducerats, vilket möjliggör att koden delas upp i moduler och förbättrar återanvändbarheten. Genom att ange type="module" kan du behandla skriptet som en modul.

  • Moduler kan delas upp i andra moduler med hjälp av import och export.

Icke-JavaScript-skript 
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 inte är JavaScript kan också anges inom <script>-taggen. Till exempel, använd type="application/ld+json" när du beskriver strukturerad data såsom JSON-LD. Här är JSON-LD ett format som organiserar data på en webbsida, vilket gör det möjligt för sökmotorer och andra applikationer att förstå informationen djupare.

Anteckningar om att använda <script>-taggen

  • Ordningen för skript: Bibliotek som skript är beroende av måste laddas innan de beroende skripten. Till exempel måste skript som använder jQuery laddas efter att jQuery själv har laddats.
  • Prestandaoptimering: För att undvika att påverka sidans laddningstid, ladda skript bara när det är nödvändigt och undvik att köra onödiga skript.
  • Säkerhetsåtgärder: När du använder externa skript, se till att de laddas från betrodda källor för att förhindra insättning av skadliga skript.

<base>-tagg 

1<base href="https://example.com/">
  • <base>-taggen anger bas-URL:en för alla relativa URL:er i dokumentet. URL:en som anges i href-attributet blir basen för relativa sökvägar i länkar och bilder. Den används vanligtvis endast en gång per sida.

<noscript>-tagg 

1<noscript>Your browser does not support JavaScript!</noscript>
  • <noscript>-taggen definierar innehåll som visas när JavaScript är inaktiverat i webbläsaren. Den används för att tillhandahålla alternativt innehåll för miljöer där JavaScript inte stöds.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

FormulärvalideringTaggar relaterade till metainformation