Struttura del documento

I documenti HTML includono una dichiarazione del tipo di documento e l'elemento radice element.<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 tutte le meta informazioni, incluse le informazioni per i risultati dei motori di ricerca e dei social media, le icone per la scheda del browser e la scorciatoia della schermata Home mobile, nonché il comportamento e la presentazione dei contenuti. In questa sezione scoprirai i componenti che, sebbene non 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.

Aggiungere a ogni documento HTML

Esistono diversi elementi essenziali per ogni pagina web. I browser eseguono il rendering dei contenuti anche se questi elementi non sono presenti, ma dovresti includerli.

<!DOCTYPE html>

La prima cosa in qualsiasi documento HTML è il preambolo. Per HTML, tutto ciò di cui hai bisogno è <!DOCTYPE html>. 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 radice di un documento HTML. È il genitore di <head> e <body>, e contiene tutto ciò che è presente nel documento HTML, ad eccezione del doctype. Se omessa, la lingua è implicita, ma dovresti 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 della 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 automatici possano identificare la lingua di contenuti specifici.

Oltre a impostare la lingua del 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 selezionato con gli attributi e i selettori di lingua [lang|="fr"] e :lang(fr).

Tra i tag di apertura e chiusura <html> troviamo i due figli: <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 si concentra sui componenti nidificati all'interno dell'elemento <head>.

Componenti obbligatori all'interno di <head>

I metadati del documento, inclusi il titolo del documento, il set di caratteri, le impostazioni dell'area visibile , la descrizione, l'URL di base, i link ai fogli di stile e le icone, si trovano nell'elemento <head>. Anche se non hai bisogno di tutte queste funzionalità, includi sempre il set di caratteri, il titolo e le impostazioni dell'area visibile.

Codifica dei caratteri

Il primo elemento in <head> deve essere la dichiarazione di 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 locali. Tuttavia, dovresti utilizzare UTF-8, che consente la codifica da uno a quattro byte di tutti i caratteri.

Per impostare la codifica dei caratteri su UTF-8, includi:

<meta charset="utf-8" />

Dichiarando UTF-8 (senza distinzione tra maiuscole e minuscole), puoi persino includere emoji nel titolo.

La codifica dei caratteri viene ereditata in tutto il documento, anche <style> e <script>. Questa piccola dichiarazione ti consente di includere emoji nei nomi delle classi e in selectorAPI. Se utilizzi le 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 di apertura e chiusura <title> vengono visualizzati nella scheda del browser, nell'elenco delle finestre aperte, nella cronologia, nei risultati di ricerca e, se non ridefiniti con <meta> tag, 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 che i contenuti vengano visualizzati correttamente indipendentemente dalla larghezza dell'area visibile. Sebbene il meta tag viewport esista dal 2007, è stato documentato solo di recente in una specifica. Controlla le dimensioni e la scala dell'area visibile, impedendo che i contenuti si riducano per adattarsi agli schermi più piccoli.

<meta name="viewport" content="width=device-width" />

Il codice precedente significa "rendi il sito reattivo, 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 hanno valori predefiniti 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à il controllo se è scalabile e non ha una dimensione massima impostata.

Finora, la struttura del nostro file HTML è la seguente:

<!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 <head>

Ci sono molti altri elementi che fanno parte di <head>. In realtà, tutti i metadati. Sebbene la maggior parte degli elementi che troverai in <head> siano trattati in questo modulo, ne condivideremo altri nel modulo Metadati.

Hai visto il set di caratteri meta e il titolo del documento, ma ci sono molti altri metadati al di fuori dei tag <meta> che dovrebbero essere inclusi.

CSS

Il <head> è il punto in cui includi gli stili per il codice HTML. Se vuoi scoprire di più sugli stili, esiste un percorso di apprendimento dedicato al CSS, ma devi sapere come includerli nei documenti HTML.

Esistono tre modi per includere il codice CSS: <link>, <style> e l'style attributo.

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 o l'inclusione diretta del codice CSS nell'intestazione del documento all'interno dei tag di apertura e chiusura <style>.

Il <link> tag è il metodo preferito per includere i fogli di stile. Il collegamento a uno o pochi fogli di stile esterni è utile sia per l'esperienza degli sviluppatori sia per le prestazioni del sito: puoi gestire il codice CSS in un unico punto anziché distribuirlo 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 vedere l' type="text/css" attributo, ma non è obbligatorio. L'attributo rel definisce la relazione, che in questo caso è stylesheet. Se ometti l'attributo rel, il codice CSS non verrà collegato.

A breve scoprirai alcuni altri valori rel, ma prima imparerai altri modi per includere il codice 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 tag <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 <style> o nel foglio di stile collegato, al di fuori della dichiarazione del set di caratteri.

Sebbene i livelli a cascata siano ancora relativamente nuovi e potresti non vedere i @import in un tag <style> dell'intestazione, spesso vedrai le proprietà personalizzate dichiarate in un blocco di stili dell'intestazione:

<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, dovresti aggiungere gli stili nell'intestazione per motivi di rendimento. Potrebbe sembrare controintuitivo, in quanto potresti pensare di voler caricare prima i contenuti. Tuttavia, è meglio che il browser sappia come eseguire il rendering dei contenuti quando vengono caricati. L'aggiunta degli stili per primi impedisce la ridisegno non necessario che si verifica se uno stile viene applicato a un elemento dopo il primo rendering.

Esiste un modo per includere gli 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. Tuttavia, se vuoi creare un editor CSS senza JavaScript, ad esempio per testare gli elementi personalizzati della pagina, puoi rendere visibile l'intestazione con display: block, quindi nascondere tutto nell'intestazione e poi, con un attributo style in linea, rendere visibile un blocco di stili modificabile.

<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>.

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 alle meta informazioni nell'intestazione e quelli relativi al rendimento in <body>.

Ora includerai altri tre tipi nell'intestazione: 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. Una favicon è una piccola icona che viene visualizzata nella scheda del browser, in genere a sinistra del titolo del documento. Quando le schede si riducono, 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 file e una posizione diversi:

<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 ha senso utilizzare 16 px, 32 px o 48 px". L'attributo sizes accetta il valore any per le icone scalabili o un elenco separato da spazi di valori widthXheight quadrati, dove i valori di larghezza e altezza sono 16, 32, 48 o superiori in quella 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 sizes diverse 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.

Sebbene tu possa 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 ognuna delle sue applicazioni: ad esempio, esiste un'icona per la posta e un'icona per il calendario. Tuttavia, tutte le icone di Google utilizzano la stessa combinazione di colori. Dall'icona puoi capire esattamente quali sono 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 alternate non è 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 rel è alternate stylesheet, definisce un foglio di stile alternativo e l'attributo title deve essere impostato per assegnare un nome a questo 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 l'URL che preferiamo:

<link rel="canonical" href="https://www.machinelearning.com" />

Il link canonico rel="canonical" viene utilizzato più spesso per la pubblicazione incrociata con piattaforme di pubblicazione e blogging per attribuire la fonte originale. Quando un sito distribuisce i contenuti, deve includere il link canonico alla fonte originale.

Script

Il tag <script> include gli 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 i moduli JavaScript e 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.

Più avanti includerai un piccolo frammento di codice JavaScript per creare un Easter egg later on:

<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 dell'interruttore della luce, aggiungeremo <script> nella parte inferiore di <body> anziché in <head>. Perché? Per due motivi. Vogliamo assicurarci che gli elementi esistano prima che venga rilevato lo script che fa riferimento a essi, poiché non basiamo questo script su un evento DOMContentLoaded. Inoltre, principalmente, 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 di 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 è terminato. Con async, il rendering non viene bloccato neanche durante il download, ma una volta terminato il download dello script, il rendering viene messo in pausa durante l'esecuzione di JavaScript.

caricamento quando si utilizzano async e defer.

Per includere il codice JavaScript di MLW in un file esterno, puoi scrivere:

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

L'aggiunta dell'defer attributo posticipa l'esecuzione dello script fino al termine del rendering, impedendo che lo script danneggi 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 di link predefiniti. L'attributo href definisce l'URL di base per tutti i link relativi.

L'attributo target, valido per <base>, nonché per link e moduli, imposta la posizione in cui devono essere aperti questi link. Il valore predefinito _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 estratto da qualsiasi contesto per occupare l'intera scheda.

La maggior parte degli sviluppatori aggiunge l'attributo target ai pochi link, se presenti, che vogliono aprire in una nuova finestra sui link o sul modulo stesso, anziché utilizzare <base>.

<base target="_top" href="https://machinelearningworkshop.com" />

Se il nostro sito web si trovasse nidificato all'interno di un iframe su un sito come Yummly, l'inclusione dell'elemento <base> significherebbe 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>. Il <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.

Ecco alcune altre informazioni su <base>:

  • In un documento può essere presente un solo elemento <base>
  • Deve essere inserito prima dell'utilizzo di qualsiasi URL relativo, inclusi eventuali riferimenti a script o fogli di stile.

Ora il codice ha il seguente 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, ovvero il modo in cui si commenta il codice HTML. Tutto ciò che si trova tra <!-- e --> non è visibile o analizzato. Puoi inserire commenti HTML ovunque nella pagina, ad eccezione degli script o dei blocchi di stili, in cui devi utilizzare i commenti JavaScript e CSS.

Hai trattato le nozioni di base su cosa inserire in <head>, ma vuoi saperne di più. Nelle sezioni successive, impareremo a utilizzare i meta tag e a controllare cosa viene visualizzato quando il tuo sito web è collegato ai social media.

Mettiti alla prova

Metti alla prova le tue conoscenze sulla struttura dei documenti.

Come si identifica la lingua del documento?

Aggiungi l'attributo language al tag HTML.
Riprova.
Aggiungi l'attributo lang al tag HTML.
Esatto.
Add the <lang> elemento a <head>.
Riprova.

Seleziona gli elementi che possono essere inclusi nel <head>.

<p>
Riprova.
<title>
Esatto.
<meta>
Esatto.
Indietro
Panoramica del codice HTML
Avanti
Metadata