Tag utilizzati nella sezione head

Questo articolo spiega i tag utilizzati nella sezione head.

Spiega i tag utilizzati nella sezione head, come <link>, <script>, <style>.

YouTube Video

Tag utilizzati nella sezione head

Tag <title>

1<title>Document Title</title>

• Il tag <title> definisce il titolo del documento. Questo titolo è visualizzato nella scheda del browser ed è utilizzato nei segnalibri e nei risultati di ricerca.

Tag <link>

• Il tag <link> è usato per collegare risorse esterne al documento corrente. È comunemente usato per collegare file CSS esterni ma può essere usato anche per icone e altre risorse esterne.

L'attributo rel del tag <link>

L'attributo rel è usato per specificare la relazione tra la risorsa collegata e il documento corrente nel tag <link>. Ci sono molti tipi di valori per l'attributo rel, ma qui spiegheremo quelli particolarmente importanti e frequentemente usati.

stylesheet

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

• stylesheet è usato per collegare un foglio di stile esterno.

icon

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

• rel="icon" definisce l'icona visualizzata nella scheda del browser o nel segnalibro. Specificando la favicon corretta, si migliora l'identità visiva e il riconoscimento del sito.

preload

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

• preload è usato per caricare risorse in anticipo prima che inizi il rendering della pagina. È particolarmente utile per risorse dove il tempismo è importante, come font o immagini di grandi dimensioni. Questo migliora le prestazioni e migliora l'esperienza utente.

canonical

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

• canonical è usato per informare i motori di ricerca sulla versione canonica di una pagina. Nel caso di contenuti duplicati, indicare l'URL canonico aiuta a consolidare il posizionamento nei motori di ricerca da una prospettiva SEO e assicura che il contenuto sia indicizzato correttamente.

alternate

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

• alternate è utilizzato per indicare pagine di lingue o formati diversi a motori di ricerca e browser. Nei siti multilingue, è possibile specificare l'URL per ogni versione linguistica in combinazione con l'attributo hreflang per fornire agli utenti pagine nella lingua appropriata.

manifest

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

• Il manifest fornisce al browser un file di manifest contenente informazioni di configurazione per una PWA (Progressive Web App). Questo file contiene informazioni come l'icona dell'app, il colore del tema e la modalità di visualizzazione, utili per l'installazione e l'esecuzione della PWA sui dispositivi mobili.

dns-prefetch

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

• Quando si fa riferimento a risorse esterne, eseguire in anticipo la risoluzione DNS del dominio può migliorare la velocità di caricamento della pagina. Questo è particolarmente efficace per pagine con molte risorse esterne o dove è desiderabile un'esperienza utente rapida.

Tag <style>

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

• Il tag <style> è utilizzato per definire fogli di stile interni. Viene utilizzato per applicare stili CSS agli elementi della pagina, permettendo di scrivere CSS senza utilizzare file esterni.

Tag <script>

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

• Il tag <script> è utilizzato per incorporare codice JavaScript in un documento HTML. È inoltre possibile collegare file JavaScript esterni, controllando il comportamento dinamico della pagina. Utilizza l'attributo src per specificare il file dello script.

Gli attributi async e defer

Il tag <script> supporta due attributi, async e defer, che influenzano il momento del caricamento e dell'esecuzione dello script. Normalmente, gli script vengono elaborati in sequenza dal browser, ma l'uso di questi attributi può migliorare le prestazioni e l'esperienza di caricamento della pagina.

L'attributo async

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

• L'utilizzo dell'attributo async permette di caricare lo script in modo asincrono. Il browser carica lo script in parallelo con altre risorse ed esegue lo script immediatamente una volta completato il caricamento.
• async è principalmente adatto per script indipendenti e si utilizza quando lo script non dipende dal caricamento di altri script o del DOM.

L'attributo defer

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

• L'utilizzo dell'attributo defer permette di caricare lo script in modo asincrono ma di eseguirlo dopo che il parsing dell'HTML è stato completato. L'esecuzione dello script non blocca la visualizzazione della pagina, migliorando così l'esperienza utente.
• defer è efficace quando gli script devono essere eseguiti dopo il completo caricamento del DOM. Ad esempio, è adatto quando si desidera che lo script venga eseguito dopo il caricamento completo del layout e degli elementi della pagina.

Politica CORS e l'attributo crossorigin

Quando si caricano script esterni, possono essere imposte restrizioni di sicurezza basate sulla Same-Origin Policy. In tali casi, è possibile utilizzare l'attributo crossorigin per consentire la condivisione delle risorse.

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

L'attributo crossorigin può essere impostato con i seguenti due valori:.

• anonymous: Invia richieste senza includere credenziali.
• use-credentials: Invia richieste includendo credenziali.

Attributo type

Il tag <script> può utilizzare l'attributo type per specificare il tipo di script. Per impostazione predefinita, viene utilizzato JavaScript, ma è anche possibile specificare determinati tipi di script (ad esempio, JavaScript di tipo modulo o linguaggio template).

Moduli JavaScript

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

• Dall'introduzione di ECMAScript 2015 (ES6), sono stati introdotti i moduli JavaScript, che consentono di suddividere il codice in moduli, migliorandone la riusabilità. Specificando type="module", è possibile trattare lo script come un modulo.

• I moduli possono essere suddivisi in altri moduli utilizzando import ed export.

Script non 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>

• Anche script diversi da JavaScript possono essere specificati all'interno del tag <script>. Ad esempio, utilizzare type="application/ld+json" quando si descrivono dati strutturati come JSON-LD. Qui, JSON-LD è un formato che struttura i dati su una pagina web, permettendo ai motori di ricerca e ad altre applicazioni di comprendere i dati in modo più approfondito.

Note sull'utilizzo del tag <script>

• Ordine degli Script: Le librerie da cui dipendono gli script devono essere caricate prima degli script dipendenti. Ad esempio, gli script che utilizzano jQuery devono essere caricati dopo jQuery stesso.
• Ottimizzazione delle Prestazioni: Per non influire sulla velocità di caricamento della pagina, caricare gli script solo quando necessario ed evitare l'esecuzione di script non necessari.
• Misure di Sicurezza: Quando si utilizzano script esterni, assicurarsi che vengano caricati da fonti affidabili per prevenire l'inserimento di script dannosi.

Tag <base>

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

• Il tag <base> imposta l'URL di base per tutti gli URL relativi nel documento. L'URL specificato nell'attributo href diventa la base per i percorsi relativi in link e immagini. Di solito viene utilizzato solo una volta per pagina.

Tag <noscript>

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

• Il tag <noscript> definisce il contenuto che viene visualizzato quando JavaScript è disabilitato nel browser. Viene utilizzato per fornire contenuti alternativi per ambienti in cui JavaScript non è supportato.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video