I documenti HTML includono una dichiarazione del tipo di documento e l'elemento principale <html>. Nell'elemento <html> sono nidificati l'intestazione e il corpo del documento. Sebbene l'intestazione del documento non sia visibile al visitatore vedente, è fondamentale far funzionare il sito. Contiene tutte le meta-informazioni, comprese informazioni per motori di ricerca e risultati di social media, icone per la scheda del browser e la scorciatoia nella schermata Home del dispositivo mobile, nonché il comportamento e la presentazione dei contenuti. In questa sezione scoprirai i componenti che, sebbene non siano visibili, sono presenti in quasi tutte le pagine web.
Per creare il sito MachineLearningWorkshop.com (MLW), inizia includendo i componenti che dovrebbero essere considerati essenziali per ogni pagina web: il tipo di documento, la lingua umana dei contenuti, il set di caratteri e, naturalmente, il titolo o il nome del sito o dell'applicazione.
Aggiungi a tutti i documenti HTML
Esistono diverse funzionalità che dovrebbero essere considerate essenziali per ogni singola pagina web. I browser continueranno a visualizzare i contenuti se questi elementi non sono presenti, ma li includono. Sempre.
<!DOCTYPE html>
La prima cosa in ogni documento HTML è il preambolo. Per l'HTML, hai bisogno solamente di <!DOCTYPE html>. Potrebbe sembrare un elemento HTML, ma non lo è. Si tratta di un tipo speciale di nodo chiamato "doctype". doctype indica al browser di utilizzare la modalità standard. Se omesso, i browser utilizzeranno una modalità di rendering diversa, nota come modalità non standard. L'inclusione di doctype contribuisce a evitare la modalità non standard.
<html>
L'elemento <html> è l'elemento principale di un documento HTML. È l'elemento padre di <head> e <body> e contiene tutto il contenuto del documento HTML diverso da doctype. Se omesso sarà implicito, ma è importante includerlo, poiché questo è l'elemento in cui è dichiarata la lingua dei contenuti del documento.
Lingua dei contenuti
L'attributo della lingua lang aggiunto al tag <html> definisce la lingua principale del documento. Il valore dell'attributo lang è un codice lingua ISO di due o tre lettere seguito dalla regione. La regione è facoltativa, ma consigliata, poiché la lingua può variare notevolmente tra le regioni. Ad esempio, il francese è molto diverso in Canada (fr-CA) rispetto al Burkina Faso (fr-BF). Questa dichiarazione linguistica consente agli screen reader, ai motori di ricerca e ai servizi di traduzione di conoscere la lingua del documento.
L'attributo lang non è limitato al tag <html>. Se all'interno della pagina è presente del testo in una lingua diversa da quella del documento principale, è necessario utilizzare l'attributo lang per identificare eccezioni alla lingua principale all'interno del documento. Proprio come quando è incluso nell'orecchio, l'attributo lang nel corpo non ha alcun effetto visivo. Aggiunge solo la semantica, consentendo alle tecnologie per la disabilità e ai servizi automatizzati di conoscere la lingua dei contenuti interessati.
Oltre a impostare la lingua per il documento e le eccezioni a quella lingua di base, l'attributo può essere utilizzato nei selettori CSS. <span lang="fr-fr">Ceci n'est pas une pipe.</span> può essere scelto come target con l'attributo e i selettori della lingua [lang|="fr"] e :lang(fr).
<head>
Nidificati tra i tag <html> di apertura e chiusura, troviamo i due tag secondari: <head> e <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
L'intestazione <head>, o intestazione dei metadati del documento, contiene tutti i metadati di un sito o di un'applicazione. Il corpo contiene i contenuti visibili. Il resto di questa sezione è incentrato sui componenti che si trovano all'interno dell'elemento <head></head> di apertura e chiusura.
Componenti obbligatori all'interno di <head>
I metadati del documento, inclusi titolo, set di caratteri, impostazioni dell'area visibile, descrizione, URL di base, link del foglio di stile e icone, si trovano nell'elemento <head>. Sebbene potresti non aver bisogno di tutte queste funzionalità, includi sempre le impostazioni relative a set di caratteri, titolo e area visibile.
Codifica dei caratteri
Il primo elemento in <head> deve essere la dichiarazione della codifica dei caratteri charset. Si trova prima del titolo per garantire che il browser possa visualizzare i caratteri del titolo e di tutti i caratteri nel resto del documento.
La codifica predefinita nella maggior parte dei browser è windows-1252, a seconda delle impostazioni internazionali. Dovresti però usare UTF-8, perché consente la codifica da uno a quattro byte di tutti i caratteri, anche quelli di cui non sapevi dell'esistenza. Inoltre, è il tipo di codifica richiesto da HTML5.
Per impostare la codifica dei caratteri su UTF-8, includi:
<meta charset="utf-8" />
Se dichiari UTF-8 (senza distinzione tra maiuscole e minuscole), puoi anche includere emoji nel titolo (ma non farlo).
La codifica dei caratteri viene ereditata in tutti i contenuti del documento, compresi i caratteri <style> e <script>. Questa piccola dichiarazione significa che puoi includere emoji nei nomi delle classi e nell'API di selezione (anche in questo caso, non farlo). Se utilizzi emoji, assicurati di usarle in modo da migliorare l'usabilità senza compromettere l'accessibilità.
Titolo del documento
La home page e tutte le pagine aggiuntive devono avere ciascuna un titolo univoco. I contenuti del titolo del documento, il testo tra i tag di apertura e chiusura <title>, vengono visualizzati nella scheda del browser, nell'elenco delle finestre aperte, nella cronologia, nei risultati di ricerca e, a meno che non vengano ridefiniti con <meta> tag, nelle schede dei social media.
<title>Machine Learning Workshop</title>
Metadati dell'area visibile
L'altro meta tag che deve essere considerato essenziale è il meta tag viewport, che consente la reattività del sito consentendo una corretta visualizzazione dei contenuti per impostazione predefinita, indipendentemente dalla larghezza dell'area visibile. Mentre il meta tag dell'area visibile è in circolazione da giugno 2007, quando è uscito il primo iPhone, solo di recente è stato documentato in una specifica. Poiché consente di controllare le dimensioni e la scala di un'area visibile ed evita che i contenuti del sito vengano ridimensionati per adattarsi a un sito da 960 px su uno schermo da 320 px, è senz'altro consigliato.
<meta name="viewport" content="width=device-width" />
Il codice precedente significa "rendi il sito reattivo, iniziando con la larghezza dei contenuti alla larghezza dello schermo". Oltre a width, puoi impostare zoom e scalabilità, ma entrambi per impostazione predefinita sono su valori accessibili. Se vuoi essere esplicito, includi:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
L'area visibile fa parte del controllo dell'accessibilità di Lighthouse; il tuo sito supererà l'idoneità se è scalabile e non prevede dimensioni massime impostate.
Finora, la struttura del nostro file HTML è:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Altri contenuti di <head>
C'è molto altro in <head>. Tutti i metadati, in effetti. La maggior parte degli elementi che troverai in <head> è stata trattata qui, mentre salvi un gran numero di opzioni di <meta> per il prossimo capitolo.
Hai visto il set di metacaratteri e il titolo del documento, ma sono presenti molti più metadati al di fuori dei tag <meta> che dovrebbero essere inclusi.
CSS
Il campo <head> consente di includere gli stili per il codice HTML. Se vuoi saperne di più sugli stili, ma devi sapere come includerli nei tuoi documenti HTML, è disponibile un percorso di apprendimento dedicato ai CSS.
Esistono tre modi per includere CSS: <link>, <style> e l'attributo style.
I due modi principali per includere stili nel file HTML sono includere una risorsa esterna utilizzando un elemento <link> con l'attributo rel impostato su stylesheet o includere CSS direttamente nell'intestazione del documento, all'interno dei tag <style> di apertura e chiusura.
Il tag <link> è il metodo preferito per includere i fogli di stile. Il collegamento di uno o pochi fogli di stile esterni è vantaggioso sia per l'esperienza degli sviluppatori che per le prestazioni del sito: puoi mantenere il CSS in un unico posto anziché essere distribuito ovunque e i browser possono memorizzare nella cache il file esterno, il che significa che non deve essere scaricato di nuovo a ogni navigazione nelle pagine.
La sintassi è <link rel="stylesheet" href="styles.css">, dove stili.css è l'URL del foglio di stile. Spesso vedrai type="text/css". Non necessario. Se includi stili scritti in qualcosa di diverso da CSS, è necessario type, ma poiché non esiste nessun altro tipo, questo attributo non è necessario. L'attributo rel definisce la relazione: in questo caso stylesheet. Se ometti questa condizione, il tuo CSS non verrà collegato.
A breve scoprirai altri valori di rel, ma parliamo prima di altri modi per includere CSS.
Se vuoi che gli stili dei fogli di stile esterni si trovino in un livello Cascade, ma non disponi dell'accesso per modificare il file CSS e inserire al suo interno le informazioni del livello, ti consigliamo di includere il CSS con @import all'interno di un <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Quando utilizzi @import per importare fogli di stile nel documento, facoltativamente in livelli a cascata, le istruzioni @import devono essere le prime istruzioni nel foglio di stile <style> o collegato, al di fuori della dichiarazione del set di caratteri.
Anche se i livelli Cascad sono ancora abbastanza nuovi e potresti non trovare il @import in un head <style>, spesso vedrai proprietà personalizzate dichiarate in un blocco di stile head:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Gli stili, tramite <link> o <style>, o entrambi, devono essere inseriti nell'intestazione. Funzionano se sono inclusi nel corpo del documento, ma vuoi che gli stili siano visibili nell'intestazione per motivi di prestazioni. Può sembrare controintuitivo, poiché potresti pensare di voler caricare prima i tuoi contenuti, ma in realtà vuoi che il browser sappia come eseguire il rendering dei contenuti quando vengono caricati. L'aggiunta di stili evita che si verifichi di nuovo se a un elemento viene assegnato uno stile dopo la prima visualizzazione.
Poi c'è l'unico modo per includere gli stili che non utilizzerai mai nella <head> del documento: gli stili incorporati. Probabilmente non utilizzerai mai gli stili incorporati nell'intestazione perché i fogli di stile degli user agent nascondono l'intestazione per impostazione predefinita. Tuttavia, se vuoi creare un editor CSS senza JavaScript, ad esempio per testare gli elementi personalizzati della tua pagina, puoi rendere visibile l'intestazione con display: block, poi nascondere tutto nell'intestazione e, infine, rendere visibile un blocco di stile modificabile dai contenuti con un attributo style incorporato.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Anche se puoi aggiungere stili incorporati su <style>, è molto più divertente personalizzare uno stile di <style> nel tuo style. Vado in pensione.
Altri utilizzi dell'elemento <link>
L'elemento link viene utilizzato per creare relazioni tra il documento HTML e le risorse esterne. Alcune di queste risorse possono essere scaricate, altre sono informative. Il tipo di relazione è definito dal valore dell'attributo rel. Attualmente sono disponibili 25 valori per l'attributo rel che possono essere utilizzati con <link>, <a> e <area> oppure <form>, ma alcuni possono essere utilizzati con tutti. È preferibile includere quelle relative alle meta informazioni nell'intestazione e quelle relative al rendimento in <body>.
Ora includerai nell'intestazione altri tre tipi: icon, alternate e canonical. (Nel prossimo modulo ne includerai un quarto tipo, rel="manifest").
Favicon
Utilizza il tag <link>, con la coppia attributo/valore rel="icon", per identificare la favicon da utilizzare per il documento. Una favicon è un'icona molto piccola visualizzata nella scheda del browser, in genere a sinistra del titolo del documento. Quando hai un numero difficile di schede aperte, le schede si riducono e il titolo potrebbe scomparire del tutto, ma l'icona rimane sempre visibile. La maggior parte delle favicon sono loghi di aziende o applicazioni.
Se non dichiari una favicon, il browser cercherà un file denominato favicon.ico nella directory di primo livello (la cartella principale del sito web). Con <link>, puoi utilizzare un nome e un percorso di file diversi:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Il codice precedente dice "Utilizza mlwicon.png come icona per gli scenari in cui è ragionevole una dimensione di 16 px, 32 px o 48 px". L'attributo delle dimensioni accetta il valore any per le icone scalabili o un elenco separato da spazi di valori widthXheight quadrati; se i valori di larghezza e altezza sono pari o superiori a 16, 32, 48 o superiori in questa sequenza geometrica, l'unità di pixel viene omessa e la lettera X non fa distinzione tra maiuscole e minuscole.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Sono disponibili due tipi speciali di icone non standard per il browser Safari: apple-touch-icon per i dispositivi iOS e mask-icon per le schede bloccate su macOS. apple-touch-icon viene applicato solo quando l'utente aggiunge un sito alla schermata Home: puoi specificare più icone con sizes diverse per i vari dispositivi. L'icona mask-icon viene utilizzata soltanto se l'utente blocca la scheda in Safari per computer: l'icona stessa deve essere un file SVG monocromatico e l'attributo color riempie l'icona con il colore necessario.
Sebbene tu possa utilizzare <link> per definire un'immagine completamente diversa in ogni pagina o persino a ogni caricamento pagina, non farlo. Per coerenza e un'esperienza utente ottimale, utilizza un'unica immagine. Twitter utilizza l'icona dell'uccello blu: quando vedi l'uccello blu nella scheda del browser, saprai che la scheda è aperta a una pagina di Twitter senza fare clic sulla scheda. Google utilizza favicon diverse per ogni applicazione: ad esempio, un'icona di posta o un'icona di calendario. Tuttavia, tutte le icone Google utilizzano la stessa combinazione di colori. Anche in questo caso, sai esattamente quali sono i contenuti di una scheda aperta semplicemente dall'icona.
Versioni alternative del sito
Utilizziamo il valore alternate dell'attributo rel per identificare le traduzioni o rappresentazioni alternative del sito.
Supponiamo di avere versioni del sito tradotte in francese e in portoghese brasiliano:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Quando utilizzi alternate per una traduzione, è necessario impostare l'attributo hreflang.
Il valore alternativo riguarda molto più che le traduzioni. Ad esempio, l'attributo type può definire l'URI alternativo di un feed RSS quando l'attributo type è impostato su application/rss+xml o application/atom+xml. Aggiungiamo un link a una versione PDF fittizia del sito.
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Se il valore di rel è alternate stylesheet, definisce un foglio di stile alternativo e l'attributo title deve essere impostato assegnando un nome allo stile alternativo.
Canonico
Se crei più traduzioni o versioni di Machine Learning Workshop, i motori di ricerca potrebbero non sapere quale versione sia la fonte ufficiale. Per farlo, utilizza rel="canonical" per identificare l'URL preferito per il sito o l'applicazione.
Includi l'URL canonico in tutte le pagine tradotte e nella home page, indicando il nostro URL preferito:
<link rel="canonical" href="https://www.machinelearning.com" />
Il link canonico rel="canonical" viene utilizzato più spesso per la pubblicazione incrociata con pubblicazioni e piattaforme di blog al fine di citare la fonte originale. Se un sito distribuisce contenuti in syndication, deve includere il link canonico alla fonte originale.
Script
Il tag <script> viene utilizzato per includere gli script. Il tipo predefinito è JavaScript. Se includi qualsiasi altro linguaggio di scripting, includi l'attributo type con il tipo MIME oppure type="module" se si tratta di un modulo JavaScript. Solo i moduli JavaScript e JavaScript vengono analizzati ed eseguiti.
I tag <script> possono essere utilizzati per incapsulare il codice o per scaricare un file esterno. In MLW non esiste un file di script esterno perché, contrariamente a quanto si crede, non è necessario avere JavaScript per un sito web funzionante e si tratta di un percorso di apprendimento HTML, non JavaScript.
In seguito includerai una piccola porzione di codice JavaScript per creare un easter egg:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Questo snippet crea un gestore di eventi per un elemento con l'ID switch. Con JavaScript, non vuoi fare riferimento a un elemento prima che esista. Non esiste ancora, quindi non lo includeremo ancora. Quando aggiungeremo l'elemento interruttore della luce, aggiungeremo <script> in fondo a <body> anziché in <head>. Perché? Per due motivi. Vogliamo assicurarci che gli elementi esistano prima che venga rilevato lo script che li fa riferimento, dato che non stiamo basando questo script su un evento DOMContentLoaded. Principalmente, JavaScript non solo blocca la visualizzazione, ma il browser interrompe il download di tutti gli asset quando vengono scaricati gli script e non riprende il download di altri asset finché l'esecuzione di JavaScript non è terminata. Per questo motivo, spesso troverai richieste JavaScript alla fine del documento anziché nell'intestazione.
Esistono due attributi che possono ridurre la natura di blocco del download e dell'esecuzione di JavaScript: defer e async. Con defer, il rendering HTML non viene bloccato durante il download e il codice JavaScript viene eseguito solo al termine del rendering del documento. Con async, il rendering non viene bloccato nemmeno durante il download, ma al termine del download dello script, il rendering viene messo in pausa durante l'esecuzione di JavaScript.
Per includere il codice JavaScript di MLW in un file esterno, puoi scrivere:
<script src="js/switch.js" defer></script>
L'aggiunta dell'attributo defer rinvia l'esecuzione dello script fino al termine del rendering, impedendo allo script di compromettere le prestazioni. Gli attributi async e defer sono validi solo per gli script esterni.
Livelli
C'è un altro elemento che si trova solo nella sezione <head>. Non utilizzato molto spesso, l'elemento <base> consente di impostare un URL del link e un target predefiniti. L'attributo href definisce l'URL di base per tutti i link relativi.
L'attributo target, valido su <base>, nonché su link e moduli, imposta il punto di apertura di questi link. L'impostazione predefinita _self apre i file collegati nello stesso contesto del documento corrente. Altre opzioni includono _blank, che apre ogni link in una nuova finestra, _parent dei contenuti correnti, che potrebbe essere uguale a se l'utente di apertura non è un iframe, oppure _top, che si trova nella stessa scheda del browser, ma è uscito da qualsiasi contesto per occupare l'intera scheda.
Anziché utilizzare <base>, la maggior parte degli sviluppatori aggiunge l'attributo target ai pochi link, se presenti, che vuole aprire in una nuova finestra nei link o da soli.
<base target="_top" href="https://machinelearningworkshop.com" />
Se il nostro sito web si trovasse nidificato in un iframe su un sito come Yummly, includendo l'elemento <base> significherebbe che quando un utente fa clic su un link all'interno del nostro documento, il link verrà caricato fuori dall'iframe, occupando l'intera finestra del browser.
Uno degli svantaggi di questo elemento è che i link di ancoraggio vengono risolti con <base>. <base> converte in modo efficace il link <a href="#ref"> in <a target="_top" href="https://machinelearningworkshop.com#ref">, attivando una richiesta HTTP nell'URL di base con il frammento allegato.
Qualche altro aspetto da considerare in merito a <base>: può esserci un solo elemento <base> in un documento, che deve precedere l'utilizzo di qualsiasi URL relativo, inclusi eventuali riferimenti a script o fogli di stile.
Il codice ora è simile al seguente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Commenti HTML
Tieni presente che lo script viene inserito tra alcune parentesi angolari, trattini e un botto. In questo modo puoi commentare il codice HTML. Lasciamo lo script commentato fino a quando non saranno presenti i contenuti effettivi nella pagina. Tutti i contenuti tra <!-- e --> non saranno visibili o analizzati. I commenti HTML possono essere inseriti in qualsiasi punto della pagina, inclusi l'intestazione o il corpo, ad eccezione degli script o dei blocchi di stile, dove dovresti utilizzare rispettivamente i commenti JavaScript e CSS.
Hai appreso le nozioni di base relative a <head>, ma vorresti approfondire l'argomento. Nelle sezioni successive parleremo dei meta tag e di come controllare ciò che viene visualizzato quando il tuo sito web è collegato ai social media.
Verifica le tue conoscenze
Verifica la tua conoscenza della struttura dei documenti.
Come fai a identificare la lingua del documento?
language al tag HTML.lang al tag HTML.Add the <lang> in <head>.Seleziona gli elementi che possono essere inclusi in <head>.
<p><title><meta>