I documenti HTML includono una dichiarazione del tipo di documento e l'elemento radice <html>. All'interno dell'elemento <html> si trovano l'intestazione e il corpo del documento.
Sebbene l'intestazione del documento non sia visibile al di fuori del codice, è fondamentale
per il funzionamento di un sito. Contiene tutti i metadati, incluse le informazioni per i motori di ricerca e i risultati dei social media, le icone per la scheda del browser e la scorciatoia della schermata Home mobile, nonché il comportamento e la presentazione dei tuoi contenuti. In questa sezione scoprirai i componenti che, pur non essendo
visibili, sono presenti in quasi tutte le pagine web.
Per creare il sito MachineLearningWorkshop.com (MLW), inizia includendo i componenti che devono 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.
Aggiungere a ogni documento HTML
Esistono diversi elementi essenziali per ogni pagina web. I browser eseguono il rendering dei contenuti se questi elementi non sono presenti, ma devi includerli.
<!DOCTYPE html>
La prima cosa in qualsiasi documento HTML è il preambolo. Per l'HTML, ti serve solo
<!DOCTYPE html>. Questo sembra un elemento HTML, ma in realtà è un nodo speciale
chiamato doctype. Il doctype indica al browser di utilizzare la modalità standard.
Se omesso, i browser utilizzano una modalità di rendering diversa nota come
modalità non standard.
L'inclusione del doctype aiuta a prevenire la modalità non standard.
<html>
L'elemento <html> è l'elemento principale di un documento HTML. È l'elemento principale
di <head> e <body>, che contiene tutto il documento HTML
tranne il doctype. Se omessa, la lingua è implicita, ma devi includerla per dichiarare la lingua del documento.
Lingua contenuti
L'attributo lang
nel tag <html> definisce la lingua
principale del documento. Il valore è un codice lingua ISO seguito da una regione facoltativa.
Ad esempio, il francese in Canada è fr-CA, mentre in Burkina Faso è
fr-BF. Questa dichiarazione aiuta gli screen reader, i motori di ricerca e
i servizi di traduzione a identificare la lingua del documento.
Puoi utilizzare l'attributo lang in altri tag per identificare le eccezioni alla lingua principale del documento. Come nel caso dell'intestazione, l'attributo lang
all'interno del corpo non ha alcun effetto visivo. Aggiunge la semantica, in modo che le tecnologie assistive e i servizi automatizzati possano identificare la lingua di contenuti specifici.
Oltre a impostare la lingua per il documento e le eccezioni a questa 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 gli attributi e i selettori di lingua
[lang|="fr"]
e :lang(fr).
<head>
Tra i tag <html> di apertura e chiusura, troviamo i due elementi secondari:
<head> e <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
Il <head> contiene i metadati di un sito o di un'applicazione, mentre il <body>
contiene i contenuti visibili. Il resto di questa sezione è incentrato sui componenti
nidificati all'interno dell'elemento <head>.
Componenti obbligatori all'interno di <head>
I metadati del documento, inclusi titolo, set di caratteri, impostazioni del viewport, descrizione, URL di base, link ai fogli di stile e icone, si trovano nell'elemento <head>. Anche se potresti non aver bisogno di tutte queste funzionalità, includi sempre
il set di caratteri, il titolo e le impostazioni del viewport.
Codifica dei caratteri
Il primo elemento in <head> deve essere la dichiarazione della codifica dei caratteri charset. Viene prima del titolo per garantire che il browser possa eseguire il rendering
dei caratteri nel 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. Tuttavia, ti consigliamo di utilizzare UTF-8, che consente la codifica da 1 a 4 byte di tutti i caratteri.
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 persino includere emoji nel titolo.
La codifica dei caratteri viene ereditata in tutti gli elementi del documento, inclusi
<style> e <script>. Questa piccola dichiarazione significa che puoi includere emoji nei nomi delle classi e nel selectorAPI. Se utilizzi emoji, assicurati di farlo in modo da migliorare l'usabilità senza compromettere l'accessibilità.
Titolo del documento
Ogni pagina, la home page e tutte le pagine aggiuntive, deve avere un titolo univoco.
I contenuti del titolo del documento, il testo tra i tag <title> di apertura e chiusura, 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 i tag <meta>, nelle schede dei social media.
<title>Machine Learning Workshop</title>
Metadati dell'area visibile
Il meta tag viewport è essenziale per la reattività del sito, in quanto garantisce il corretto rendering dei contenuti indipendentemente dalla larghezza dell'area visibile. Sebbene il tag meta viewport esista dal 2007, è stato documentato in una specifica solo di recente. Controlla le dimensioni e la scala dell'area visibile, impedendo ai contenuti di ridursi per adattarsi agli schermi più piccoli.
<meta name="viewport" content="width=device-width" />
Il codice precedente significa "rendi il sito adattabile, iniziando a impostare la larghezza
dei contenuti in modo che corrisponda alla larghezza dello schermo". Oltre a width, puoi impostare
lo zoom e la scalabilità, ma entrambi sono impostati su valori accessibili per impostazione predefinita. Se vuoi
essere esplicito, includi:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
La finestra è parte del controllo dell'accessibilità di Lighthouse. Il tuo sito verrà approvato se è scalabile e non è impostata una dimensione massima.
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>
Ci sono molti altri fattori che contribuiscono a determinare il <head>. Tutti i metadati, infatti.
La maggior parte degli elementi che troverai in <head> sono trattati in questo modulo, ma ne condivideremo altri nel modulo Metadati.
Hai visto il set di metacaratteri e il titolo del documento, ma ci sono molti
altri metadati al di fuori dei tag <meta> che devono essere inclusi.
CSS
In <head> includi gli stili per il codice HTML. Esiste un
percorso di apprendimento dedicato ai CSS se vuoi saperne di più sugli stili,
ma devi sapere come includerli nei documenti HTML.
Esistono tre modi per includere CSS: <link>, <style> e l'attributo style.
I due modi principali per includere gli stili nel file HTML sono l'inclusione di una risorsa esterna utilizzando un elemento <link> con l'attributo rel impostato su stylesheet oppure l'inclusione di 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 è utile sia per l'esperienza degli sviluppatori sia per le prestazioni del sito: puoi gestire il CSS in un unico punto anziché spargerlo ovunque e i browser possono memorizzare nella cache il file esterno, il che significa che non deve essere scaricato di nuovo a ogni navigazione della pagina.
La sintassi è <link rel="stylesheet" href="styles.css">, dove styles.css è il nome del file e la posizione relativa del foglio di stile. Potresti visualizzare l'attributo
type="text/css", ma non è obbligatorio. L'attributo rel definisce
la relazione, che in questo caso è stylesheet. Se ometti l'attributo rel, l'SSC non verrà collegato.
A breve scoprirai altri valori di rel, ma prima imparerai altri modi per includere CSS.
Se vuoi che gli stili del foglio di stile esterno si trovino all'interno di un livello a cascata, ma
non hai accesso alla modifica del file CSS, devi includere il codice 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 nei
livelli a cascata, le istruzioni @import devono essere le prime istruzioni nel tuo
<style> o nel foglio di stile collegato, al di fuori della dichiarazione del set di caratteri.
Sebbene i livelli a cascata siano ancora piuttosto nuovi e potresti non notare il
@import in un <style>, spesso vedrai le proprietà personalizzate dichiarate in
un blocco di stile head:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Gli stili, aggiunti con <link>, <style> o entrambi, devono essere inseriti nell'intestazione. Sebbene
funzionino se inclusi nel corpo del documento, ti consigliamo di aggiungere gli stili nella
sezione head per motivi di rendimento. Potrebbe sembrare controintuitivo, in quanto potresti pensare
di voler caricare prima i tuoi contenuti. Tuttavia, è meglio che il browser sappia
come eseguire il rendering dei contenuti quando vengono caricati. L'aggiunta degli stili prima impedisce
il ridisegno non necessario che si verifica se un elemento viene stilizzato dopo il primo
rendering.
Esiste un modo per includere stili che non utilizzerai mai nel <head> del tuo
documento: gli stili in linea. Probabilmente non utilizzerai mai gli stili in linea nell'intestazione
perché i fogli di stile degli user agent nascondono l'intestazione per impostazione predefinita. Se invece 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, nascondere tutto il contenuto dell'intestazione e poi rendere visibile un blocco di stile modificabile in linea con un attributo style.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Puoi aggiungere stili in linea all'elemento <style>.
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. Esistono 25 valori disponibili per l'attributo rel
che possono essere utilizzati con <link>, <a> e <area> o <form>, con alcuni che
possono essere utilizzati con tutti. È preferibile includere quelli relativi ai metadati nell'intestazione e quelli relativi al rendimento in <body>.
Ora nell'intestazione includerai altri tre tipi: icon, alternate e canonical. Nel modulo successivo aggiungerai un quarto tipo,
rel="manifest".
Favicon
Utilizza il tag <link> con rel="icon" per identificare la favicon del tuo documento. Un favicon è una piccola icona che viene visualizzata nella scheda del browser, in genere
a sinistra del titolo del documento. Quando le schede si restringono, il titolo potrebbe scomparire,
ma l'icona rimane 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 una posizione diversi per il file:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Il codice precedente indica di "utilizzare mlwicon.png come icona per gli scenari in cui
hanno senso 16 px, 32 px o 48 px". L'attributo dimensioni accetta il valore any
per le icone scalabili o un elenco separato da spazi di valori quadrati widthXheight,
dove i valori di larghezza e altezza sono 16, 32, 48 o superiori in questa sequenza
geometrica, l'unità pixel viene omessa e la 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" />
Esistono 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 diversi sizes per dispositivi diversi.
mask-icon verrà utilizzato solo se l'utente blocca la scheda in Safari desktop: l'icona stessa deve essere un SVG monocromatico e l'attributo color riempie l'icona con il colore necessario.
Anche se puoi utilizzare <link> per definire un'immagine completamente diversa su ogni pagina
o anche a ogni caricamento pagina, non farlo. Per coerenza e una buona esperienza utente, utilizza una
singola immagine. Google utilizza favicon diverse per ciascuna delle sue applicazioni: ad esempio, c'è un'icona per la posta e una per il calendario. ma tutte le
icone di Google utilizzano la stessa combinazione di colori. Grazie all'icona, sai esattamente da dove provengono i contenuti di una scheda aperta.
Versioni alternative del sito
Utilizza il valore alternate dell'attributo rel per identificare le traduzioni
o le rappresentazioni alternative del sito.
Supponiamo di avere versioni del sito tradotte in francese e 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, devi impostare l'attributo hreflang.
Il valore alternativo non serve solo per le traduzioni. Ad esempio, l'attributo type
può definire l'URI alternativo per un feed RSS quando l'attributo type
è impostato su application/rss+xml o application/atom+xml.
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 in modo da assegnare un nome allo stile alternativo.
Canoniche
Se crei diverse traduzioni o versioni di Machine Learning Workshop, i motori di ricerca potrebbero non identificare la fonte autorevole. 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 spesso utilizzato per la pubblicazione incrociata con
pubblicazioni e piattaforme di blogging per attribuire il merito alla fonte originale. Quando un sito
sindaca i contenuti, deve includere il link canonico alla fonte originale.
Script
Il tag <script> include script. Il tipo predefinito è JavaScript. Se
utilizzi un altro linguaggio di scripting, includi l'attributo type con il tipo MIME
o type="module" per un modulo JavaScript.
Vengono analizzati ed eseguiti solo JavaScript e i moduli JavaScript.
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 JavaScript per un sito web funzionale. Questo è un percorso di apprendimento HTML, non JavaScript.
Includerai un piccolo frammento di JavaScript per creare un easter egg in un secondo momento:
<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, devi evitare di fare riferimento a un elemento prima che esista. Poiché
switch non esiste ancora, non includeremo ancora il gestore di eventi.
Quando aggiungeremo l'elemento interruttore della luce, inseriremo <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 fa riferimento a questi elementi, in quanto
non basiamo questo script su un evento DOMContentLoaded.
Inoltre, JavaScript non solo blocca il rendering, ma il browser interrompe il download di tutti gli asset quando vengono scaricati gli script e non riprende il download degli altri asset finché l'esecuzione di JavaScript non è terminata. Per questo motivo, spesso le richieste JavaScript si trovano 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 JavaScript viene eseguito solo dopo che il rendering del documento
è stato completato. Con async, il rendering non viene bloccato durante
il download, ma una volta terminato il download dello script, il rendering
viene messo in pausa durante l'esecuzione di JavaScript.
async. Nota:gli script dei moduli caricati utilizzando <script type="module"> hanno defer abilitato per impostazione predefinita.
Per includere il JavaScript di MLW in un file esterno, puoi scrivere:
<script src="js/switch.js" defer></script>
L'aggiunta dell'attributo defer
rimanda l'esecuzione dello script fino al rendering di tutti gli elementi,
impedendo allo script di compromettere il rendimento. Gli attributi async e defer
sono validi solo per gli script esterni.
Livelli
Esiste un altro elemento che si trova solo in <head>. L'elemento <base> utilizzato di rado consente di impostare un URL e una destinazione del link 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
la posizione in cui devono aprirsi 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 attuali, che
potrebbe essere uguale a self se l'apertura non è un iframe, o _top, che si trova
nella stessa scheda del browser, ma è stato estratto da qualsiasi contesto per occupare l'intera scheda.
La maggior parte degli sviluppatori aggiunge l'attributo target ai pochi link, se presenti, che vuole aprire in una nuova finestra nei link o nel modulo stesso, anziché utilizzare <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Se il nostro sito web si trova all'interno di un iframe su un sito come Yummly,
l'inclusione dell'elemento <base> significa che quando un utente fa clic su un link all'interno
del nostro documento, il link viene caricato al di fuori dell'iframe, occupando l'intera
finestra del browser.
Uno degli svantaggi di questo elemento è che i link di ancoraggio vengono risolti con
<base>. <base> converte efficacemente il link <a href="#ref"> in
<a target="_top" href="https://machinelearningworkshop.com#ref">, attivando
una richiesta HTTP all'URL di base con il frammento allegato.
Altri aspetti da considerare su <base>:
- In un documento può essere presente un solo elemento
<base>. - Deve precedere l'utilizzo di qualsiasi URL relativo, inclusi possibili riferimenti a script o fogli di stile.
Ora il codice ha questo aspetto:
<!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" href="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
Lo script è racchiuso tra parentesi angolari, trattini e un punto esclamativo, che è il modo in cui
si commenta l'HTML. Qualsiasi elemento compreso tra <!-- e --> non è visibile o
analizzato. Puoi inserire commenti HTML in qualsiasi punto della pagina, tranne all'interno di
script o blocchi di stile, dove devi utilizzare commenti JavaScript e CSS.
Hai imparato le basi di ciò che va inserito nel <head>, ma vuoi saperne di più. Nelle sezioni successive, parleremo dei meta tag e di come controllare cosa viene visualizzato quando il tuo sito web viene collegato sui social media.
Mettiti alla prova
Metti alla prova le tue conoscenze sulla struttura dei documenti.
Come viene identificata la lingua del documento?
language al tag HTML.lang al tag HTML.Add the <lang> al <head>.Seleziona gli elementi che possono essere inclusi in <head>.
<p><title><meta>