. Il browser lo scarica in parallelo al parsing e lo esegue una volta analizzato il documento, in ordine. Gli script type=\"module\" sono differiti automaticamente. Usa async solo per script indipendenti come quelli di analytics."}},{"@type":"Question","name":"Mi serve il meta tag X-UA-Compatible?","acceptedAnswer":{"@type":"Answer","text":"No. Riguardava solo le vecchie versioni di Internet Explorer, che Microsoft non supporta più. I boilerplate attuali lo omettono."}},{"@type":"Question","name":"Di quali file favicon ho davvero bisogno?","acceptedAnswer":{"@type":"Answer","text":"Un favicon.ico nella root del sito per i vecchi strumenti e i crawler, un'icona SVG per i browser moderni e un PNG apple-touch-icon da 180 per 180 pixel per le schermate home di iOS coprono quasi ogni caso. Un web app manifest aggiunge icone più grandi se vuoi che il sito sia installabile."}},{"@type":"Question","name":"Qual è la differenza tra defer e async?","acceptedAnswer":{"@type":"Answer","text":"Entrambi scaricano senza bloccare il parser. defer aspetta che il parsing finisca e mantiene gli script nell'ordine del documento. async esegue ogni script appena arriva, in qualsiasi ordine, il che può rompere script che dipendono l'uno dall'altro o dal DOM."}}]}
Boilerplate HTML: un modello moderno, spiegato riga per riga
Generatore di boilerplate HTML
Boilerplate HTML: template commentato e generatore | We.Inc
Un boilerplate HTML5 moderno spiegato riga per riga, più un generatore per title, description, lingua, Open Graph, favicon, colore del tema e link a CSS o JS. Copia o scarica index.html.
Un boilerplate HTML5 minimo ha bisogno di un doctype, di un elemento html con un attributo lang, di un head con il charset UTF-8, il meta tag viewport, un title e una description, e poi di un body. Collega il CSS con un tag link nell'head e il JavaScript con un tag script con defer. Genera il tuo qui sotto e scarica index.html.
Le righe che servono a ogni pagina
Riga
Perché
<!doctype html>
Attiva la modalità standard
<html lang="en">
Lingua per screen reader e traduzione
<meta charset="utf-8">
Caratteri e simboli corretti
<meta name="viewport" ...>
Scalatura corretta sui telefoni
<title>
Testo della scheda e titolo nei risultati di ricerca
Il generatore scrive un index.html completo e valido a partire da pochi interruttori: titolo e descrizione della pagina, lingua, tag Open Graph per le anteprime dei link, un set di favicon, colore del tema, suggerimenti preconnect e i link al tuo foglio di stile e al tuo script con l'attributo di caricamento che scegli. Ogni riga che può produrre è spiegata nel template commentato più in basso.
Compila titolo, descrizione e lingua, e attiva gli extra che vuoi.
Scegli come si carica lo script: defer, module o async. L'anteprima del file si aggiorna mentre procedi.
Copia il markup o scaricalo come index.html, pronto da aprire in un browser o in un editor.
Leggi la versione commentata qui sotto per capire ogni riga prima di pubblicarla.
Tieni il meta charset entro i primi 1024 byte del file. Metterlo per primo nell'head è il modo più semplice per esserne sicuro.
Scrivi un title e una description unici per ogni pagina. I motori di ricerca spesso li mostrano come titolo e snippet del risultato.
Evita maximum-scale=1 o user-scalable=no nel tag viewport. Bloccare lo zoom penalizza chi ha bisogno di testo più grande.
Carica gli script con defer nell'head invece che alla fine del body. Il file si scarica presto e viene comunque eseguito dopo il parsing.
Usa URL assoluti per og:image. I social network lo recuperano dai propri server e non possono risolvere un percorso relativo.
Domande frequenti
Come collego un file CSS all'HTML?
Aggiungi <link rel="stylesheet" href="styles.css"> dentro l'head. L'href è relativo al file HTML, quindi css/styles.css punta a una cartella css accanto a esso. I fogli di stile nell'head bloccano brevemente il rendering, ed è voluto: evita il lampo di contenuto senza stile.
Dove va il tag script?
Nell'head con defer, per esempio <script src="app.js" defer></script>. Il browser lo scarica in parallelo al parsing e lo esegue una volta analizzato il documento, in ordine. Gli script type="module" sono differiti automaticamente. Usa async solo per script indipendenti come quelli di analytics.
Mi serve il meta tag X-UA-Compatible?
No. Riguardava solo le vecchie versioni di Internet Explorer, che Microsoft non supporta più. I boilerplate attuali lo omettono.
Di quali file favicon ho davvero bisogno?
Un favicon.ico nella root del sito per i vecchi strumenti e i crawler, un'icona SVG per i browser moderni e un PNG apple-touch-icon da 180 per 180 pixel per le schermate home di iOS coprono quasi ogni caso. Un web app manifest aggiunge icone più grandi se vuoi che il sito sia installabile.
Qual è la differenza tra defer e async?
Entrambi scaricano senza bloccare il parser. defer aspetta che il parsing finisca e mantiene gli script nell'ordine del documento. async esegue ogni script appena arriva, in qualsiasi ordine, il che può rompere script che dipendono l'uno dall'altro o dal DOM.
Cosa va nell'head
L'head contiene informazioni sulla pagina invece che contenuti: set di caratteri, viewport, title, description, link ai fogli di stile, icone e tag per le anteprime social. Niente di ciò che contiene viene mostrato nel corpo della pagina.
L'ordine conta un po'. Prima il charset, poi il viewport, poi title e description. Metti i suggerimenti preconnect prima dei fogli di stile che ne hanno bisogno, così la connessione parte il prima possibile.
Open Graph e anteprime dei link
Quando qualcuno condivide il tuo URL in un'app di messaggistica o su un social network, la card di anteprima viene da og:title, og:description, og:image e og:url. Senza questi tag, le piattaforme tirano a indovinare, spesso male.
Un'immagine di 1200 per 630 pixel funziona su tutti i principali social network. twitter:card impostato su summary_large_image chiede a X la versione grande della card.
Il boilerplate, riga per riga
Un index.html moderno e completo
Tutto ciò che di solito serve a una pagina in produzione, niente di superfluo. La tabella qui sotto spiega ogni riga.
Cosa fa ogni riga
Riga
Cosa fa
Obbligatoria?
<!doctype html>
Dice al browser di usare la modalità standard invece della quirks mode
Sì
<html lang="en">
Dichiara la lingua della pagina per tecnologie assistive, sillabazione e traduzione
Sì
<meta charset="utf-8">
Codifica dei caratteri, così accenti, simboli ed emoji si vedono correttamente
Impedisce ai telefoni di mostrare una pagina desktop rimpicciolita
Sì
<title>
Scheda del browser, segnalibri e di solito il titolo nei risultati di ricerca
Sì
<meta name="description">
Spesso usata come snippet nei risultati di ricerca
Fortemente consigliata
<link rel="canonical">
L'URL preferito quando la pagina è raggiungibile da più indirizzi
Consigliata
<meta name="theme-color">
Colora la barra del browser su alcuni browser mobili
Facoltativa
<link rel="icon"> e apple-touch-icon
Icona della scheda e icona della schermata home
Consigliata
Meta tag og: e twitter:
Titolo, testo e immagine per le anteprime dei link condivisi
Consigliata
<link rel="preconnect">
Apre una connessione a un'altra origine prima che serva
Facoltativa
<link rel="stylesheet">
Carica il tuo CSS
Se hai del CSS
<script defer>
Carica il JavaScript senza bloccare il parsing e lo esegue dopo
Se hai del JS
<main>
Segnala il contenuto principale alle tecnologie assistive
Consigliata
Collegare il CSS all'HTML
Tre modi per aggiungere CSS
Un file esterno è la norma perché il browser lo mette in cache tra le pagine. Un blocco style va bene per regole specifiche di una pagina; l'attributo style per valori isolati.
I percorsi relativi spiegati
La maggior parte dei fogli di stile che non funzionano ha un percorso sbagliato. Controlla nel pannello di rete degli strumenti per sviluppatori se c'è un 404.
Collegare correttamente il JavaScript
Opzioni di caricamento degli script
Markup
Blocca il parsing?
Viene eseguito
Ordine mantenuto?
<script src="a.js">
Sì
Subito, appena raggiunto
Sì
<script src="a.js" defer>
No
Dopo il parsing, prima di DOMContentLoaded
Sì
<script src="a.js" async>
No (si ferma brevemente per eseguirlo)
Appena scaricato
No
<script type="module" src="a.js">
No
Come defer
Sì
Tag script consigliati
I moduli hanno lo strict mode, un proprio scope e il supporto a import. nomodule ti permette di servire un'alternativa ai browser molto vecchi, se ti serve ancora.