Dichiarazione del tipo documento
La dichiarazione <!DOCTYPE html> è un’istruzione che appare all’inizio di un documento HTML e serve a indicare al browser quale versione di HTML deve essere utilizzata per interpretare la pagina correttamente.
<!DOCTYPE html>Attributo globale “lang”
Sull’importanza dell’utilizzo dell’attributo lang all’interno dell’elemento HTML <html> vedi l’articolo HTML: l’attributo globale lang.
<html lang="it-IT">Meta charset=”utf-8″
UTF-8 è lo standard di codifica più utilizzato sul web e supporta praticamente tutte le lingue e i simboli del mondo. È compatibile con ASCII, il che significa che i caratteri standard (A-Z, 0-9, punteggiatura) vengono interpretati correttamente senza conversione.
Molti database (come MySQL e PostgreSQL) e API moderne usano UTF-8 per garantire la corretta gestione dei dati testuali, evitando errori di codifica.
HTML e XML usano UTF-8 come codifica predefinita, rendendolo essenziale per la corretta interpretazione delle pagine web e dei documenti.
<meta charset="utf-8">Meta name=”viewport”
L’elemento HTML <meta name="viewport"....> è fondamentale per garantire che le pagine web siano visualizzate correttamente su dispositivi mobili e desktop.
Se una pagina HTML non contiene questo tag, i browser mobili cercheranno di ridimensionare la pagina, in modo da visualizzarla per intero sullo schermo del device. Definendo il viewport, ci si assicura che il layout si adatti correttamente alla larghezza dello schermo. Lavorando in sinergia con i CSS media queries, permette di creare layout flessibili che si adattano alle risoluzioni dei diversi device.
La forma più comune è la seguente:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width: Imposta la larghezza del viewport uguale a quella del dispositivo.initial-scale=1: Mantiene il livello di zoom iniziale.
Esiste una seconda forma, che limita l’operatività dell’utente, aggiungendo maximum-scale=1.0 e user-scalable=0:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />maximum-scale=1.0: Impedisce agli utenti di ingrandire la pagina oltre il livello di zoom iniziale.user-scalable=0: Disabilita completamente la possibilità di zoom manuale.
Se vuoi garantire accessibilità e usabilità, va usata la prima forma. La seconda va utilizzata se si hanno esigenze specifiche (ad esempio, un’app web con layout fisso), può essere utile, ma va usata con cautela.
favicon
Il termine favicon è la contrazione di favorite icon. E’ l’immagine (generalmente il logo dell’azienda) che viene visualizzata sulle schede del browser, a sinistra del nome della pagina. Viene anche visualizzata nella barra dei preferiti del browser, sempre a sinistra del nome pagina.
Nell’articolo Definire una favicon da mostrare nei risultati di ricerca, Google suggerisce questo codice:
<link rel="shortcut icon" href="/path/to/favicon.ico">Se la favicon viene inserita nella root del sito, verrà acquisita automaticamente, senza necessità di specificare la sua posizione nella pagina HTML.
apple-touch-icon
Vedere anche le istruzioni di Apple sulla touch icon.
<link rel="apple-touch-icon" href="https://serviziweb.padova.it/wp-content/uploads/logo/logo.png" />IONOS mette a disposizione un Favicon generator gratuito.
0 commenti