Video passo dopo passo
Struttura di base di un documento HTML
Come diceva Carl Sagan, «Se vuoi fare una torta di mele da zero, devi prima inventare l’universo», e sì: per capire le unità relative di Elementor, cos’è un elemento padre o il contenitore radice, ecc., prima dobbiamo sapere come si struttura, in modo basilare, una pagina web in linguaggio HTML.
Qui vediamo la struttura minima di un documento HTML (HyperText Markup Language). Il linguaggio HTML è composto da tag delimitati dai segni di minore di < e maggiore di >, ad esempio <html>, salvo eccezioni come il primo tag <!DOCTYPE html> che è assoluto, tutti i tag hanno apertura e chiusura, ad esempio <h1>Intestazione</h1>, la chiusura si distingue perché l’apertura del tag include </ oltre al «minore di»; la barra obliqua, chiamata anche slash /.
- La prima riga dell’esempio è un elemento assoluto (non ha tag di chiusura); è una dichiarazione del tipo di documento (chiamata anche dichiarazione DOCTYPE ) che identifica questo documento come un documento HTML5 e permette ai browser moderni di sapere che devono interpretare il documento così com’è scritto, secondo la specifica HTML5.
- Tutto il documento è contenuto dentro un html. L’html si chiama elemento radice perché contiene tutti gli elementi del documento e non può essere incluso in nessun altro elemento.
- All’interno di html, il documento si divide in un’intestazione (head) e un corpo (body). L’head contiene informazioni descrittive sul documento stesso, come il titolo, i fogli di stile che usa, gli script e altri tipi di informazioni «meta».
- Il body è il corpo della pagina: è l’elemento che contiene tutto ciò che vogliamo far apparire nella finestra del browser.
- Gli elementi meta all’interno del tag head forniscono informazioni sul documento stesso. Un elemento meta può essere usato per fornire ogni tipo di informazione, ma in questo esempio specifica la codifica dei caratteri (la raccolta standardizzata di lettere, numeri e simboli) usata nel documento.
- All’interno dell’head c’è anche il tag title, obbligatorio. Secondo la specifica HTML, ogni documento deve contenere un titolo descrittivo. È questo titolo che viene mostrato nella scheda del browser e che Google mostrerà nei risultati di ricerca come titolo di questa pagina.
- All’interno del blocco body possiamo creare tutte le sezioni che vogliamo: il tag div permette di raggruppare più elementi di blocco (paragrafi, intestazioni, liste, ecc.). Queste sezioni sono contenitori.
- È un’altra sezione uguale alla precedente.
Come puoi vedere nella Figura, tutti questi tag sono una sorta di contenitori: la radice, o principale, è il tag html che contiene tutti gli altri; dentro html abbiamo il body e, a sua volta, dentro il body abbiamo altri div. Quindi possiamo dire che l’elemento radice è html, body è figlio di html e i div sono figli di body.
Unità di misura di Elementor
Quando progetti con Elementor, puoi notare che alcuni elementi hanno opzioni di dimensione, che ti permettono di scegliere PX, EM, REM, %, VW o VH. Ma cosa significano davvero queste unità di misura e quando conviene usarne una piuttosto che un’altra?
Partiamo dalle basi: in CSS puoi specificare dimensioni o lunghezze degli elementi usando diverse unità di misura. Le unità che trovi in alcune opzioni dei widget di Elementor includono PX, EM, REM, %, VW e VH, anche se in CSS ce ne sono molte altre. Non tutti gli elementi di Elementor offriranno tutte queste unità: Elementor mostra solo le opzioni che hanno più senso per l’elemento in questione.
L’aspetto più importante da capire sulle diverse unità è che alcune, come PX, sono unità assolute e altre sono unità relative.
Unità assolute
PX: i pixel (px) sono considerati unità assolute, anche se sono relative al DPI e alla risoluzione del dispositivo di visualizzazione. Ma sul dispositivo stesso l’unità PX è fissa e non cambia in funzione di nessun altro elemento. L’uso dei PX può essere problematico per i siti web responsive, ma è utile per mantenere una dimensione coerente per alcuni elementi. Se hai elementi che non devono ridimensionarsi, allora usare i PX è una buona scelta.
Unità relative
- EM: relativo all’elemento padre
- REM: relativo all’elemento radice (tag HTML e, in mancanza, alla dimensione configurata nel browser)
- %: relativo all’elemento padre
- VW: relativo alla larghezza della viewport
- VH: relativo all’altezza della viewport
A differenza dei PX, le unità relative come %, EM e REM si adattano meglio al design responsive e aiutano anche a rispettare gli standard di accessibilità. Le unità relative scalano meglio su dispositivi diversi perché possono aumentare o diminuire in base alla dimensione di un altro elemento.
Vediamo un esempio semplice: nella maggior parte dei browser, la dimensione predefinita del font è 16px. Le unità relative calcolano la dimensione a partire da questa base. Se cambi quella base impostando una dimensione di base per il tag HTML tramite CSS, quella diventa la base per calcolare le unità relative nel resto della pagina. Allo stesso modo, se un utente modifica la dimensione del font, quella diventa la base per calcolare le unità relative.
Quindi, cosa significano queste unità rispetto al valore predefinito di 16px?
Il numero che specifichi moltiplicherà quel numero per la dimensione predefinita.
1em = 16px (1 * 16)
2em = 32 px (2 * 16)
0.5em = 8px (.5 * 16)
1rem = 16 px
2rem = 32px
0.5rem = 8px
100% = 16 px
200% = 32 px
50% = 8 px
Ok, perfetto, ma cosa succede se l’utente cambia la dimensione predefinita nel browser? Poiché si tratta di unità relative, i valori finali si baseranno sulla nuova dimensione di base. Anche se il valore predefinito del browser è di solito 16px, se l’utente lo cambiasse a 14px, le dimensioni calcolate finirebbero per essere:
1em = 14px (1 * 14)
2em = 28px (2 * 14)
0.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
0.5rem = 7px
100% = 14 px
200% = 28 px
50% = 7px
Questo dà all’utente la libertà di regolare la dimensione predefinita del font del browser, mantenendo però la scala relativa di ogni elemento che hai specificato.
Qual è la differenza tra EM e REM?
Guardando il grafico qui sopra, EM e REM sembrano esattamente uguali. Quindi, in cosa differiscono?
In poche parole, differiscono per via dell’ereditarietà. Come detto, REM si basa sull’elemento radice (HTML) e, se non è impostato, su quello del browser dell’utente, che per impostazione predefinita è 16px. Ogni elemento figlio che usa REM userà la dimensione della radice HTML come punto di calcolo, indipendentemente dal fatto che un elemento padre abbia o meno dimensioni diverse specificate.
EM, invece, si basa sulla dimensione del font dell’elemento padre. Se un elemento padre ha una dimensione diversa da quella dell’elemento radice, il calcolo degli EM si baserà sull’elemento padre e non sull’elemento radice. Questo significa che gli elementi annidati che usano EM per dimensionarsi a volte possono finire con una dimensione che non ti aspettavi. D’altra parte, ti dà un controllo più dettagliato se ti serve per specificare la dimensione di un’area particolare della pagina.
E quindi, che dire di %, VW e VH? Di cosa si tratta?
Mentre PX, EM e REM si usano principalmente per la dimensione del font, %, VW e VH si usano soprattutto per margini, padding, spaziatura e larghezze/altezze.
Per ribadire: VH significa «viewport height» (altezza della viewport), cioè l’altezza dello schermo visibile. 100VH rappresenterebbe il 100% dell’altezza della viewport, ovvero l’altezza completa dello schermo. E, naturalmente, VW significa «viewport width» (larghezza della viewport), cioè la larghezza dello schermo visibile. 100VW rappresenterebbe il 100% della larghezza della viewport, ovvero la larghezza completa dello schermo. % riflette una percentuale della dimensione dell’elemento padre, indipendentemente dalla dimensione della viewport.
Vediamo alcuni esempi di dove Elementor offre opzioni di %, VW e VH.
- Larghezze delle colonne: se modifichi il layout di una colonna in Elementor, noterai che è disponibile solo un’unità di larghezza: %. Le larghezze delle colonne funzionano bene e in modo responsive solo quando si usano percentuali, quindi non viene offerta nessun’altra opzione.
- Margini: i margini di una sezione possono essere specificati in PX o %. In genere è preferibile usare % per garantire che i margini non siano più grandi del contenuto quando si ridimensiona per un dispositivo mobile, per esempio. Usando una percentuale della larghezza del dispositivo, i margini resteranno in relazione alla dimensione del contenuto, cosa quasi sempre preferibile.
- Padding: il padding di una sezione può essere specificato in PX, EM o %. Come per i margini, spesso è preferibile usare EM o % affinché il padding resti relativo man mano che aumenta la dimensione della pagina.
- Dimensione del font: se modifichi la tipografia di un elemento, come un’intestazione, vedrai quattro opzioni: PX, EM, REM e VH.
Ti è mai capitato di creare un’intestazione grande e di ammirare quanto stesse bene su desktop, per poi renderti conto che su mobile era troppo grande?
La chiave per risolvere la cosa in modo elegante è usare EM, REM o VW invece di PX. La scelta dipende dalla tua situazione specifica. Di solito scelgo EM perché voglio che la dimensione sia relativa al padre dell’intestazione. Ma se preferisci che la dimensione sia relativa alla radice (HTML), scegli REM. Oppure puoi impostarla in modo che sia relativa alla larghezza della viewport (VW) se per il tuo caso funziona meglio.
Tieni presente che puoi anche impostare valori PX specifici per dispositivo usando le icone dei dispositivi per definire una dimensione per desktop, tablet e mobile. Ma questo impone comunque limiti alla responsività e all’accessibilità, quindi consideralo se scegli i PX.
Di più su VW e VH
Le unità della viewport rappresentano una percentuale della viewport del browser corrente (dimensione attuale del browser). Anche se sono simili alle unità percentuali, c’è una differenza: le unità della viewport si calcolano come percentuale della dimensione attuale della viewport del browser. Le unità percentuali, invece, si calcolano come percentuale dell’elemento padre, che può essere diversa dalla dimensione della viewport.
Consideriamo un esempio di viewport su schermo mobile di 480px x 800px.
1 VW = 1% della larghezza della viewport (ovvero 4,8 px)
50 VW = 50% della larghezza della viewport (ovvero 240 px)
1 VH = 1% dell’altezza della viewport (ovvero 8px)
50 VH = 50% dell’altezza della viewport (ovvero 400 px)
Se la dimensione della viewport cambia, la dimensione dell’elemento cambia di conseguenza.
Quando dovresti usare un’unità invece di un’altra?
In definitiva, non esiste una risposta perfetta a questa domanda. In generale, spesso è meglio scegliere una delle unità relative invece dei PX, così la tua pagina web ha più possibilità di rendere un design responsive. Tuttavia, scegli PX se devi assicurarti che un elemento non cambi mai dimensione in nessun breakpoint e resti uguale indipendentemente dal fatto che un utente abbia scelto una dimensione predefinita diversa. Le unità PX garantiscono risultati coerenti anche se non è l’ideale.
- EM è relativo alla dimensione del font dell’elemento padre, quindi se vuoi scalare la dimensione dell’elemento in base a quella del suo padre, usa EM.
- REM è relativo alla dimensione del font della radice (HTML) e, se non è impostata, verrà usata quella configurata nel browser; quindi, se vuoi scalare la dimensione dell’elemento in base alla dimensione della radice, indipendentemente dalla dimensione del padre, usa REM. Se hai usato EM e stai riscontrando problemi di dimensioni a causa di molti elementi annidati, REM probabilmente è la scelta migliore.
- VW è utile per creare elementi a larghezza piena (100%) che riempiono tutta la larghezza della viewport. Naturalmente, puoi usare qualsiasi percentuale della larghezza della viewport per raggiungere altri obiettivi, come il 50% per metà larghezza, ecc.
- VH è utile per creare elementi a altezza piena (100%) che riempiono tutta l’altezza della viewport. Naturalmente, puoi usare qualsiasi percentuale dell’altezza della viewport per raggiungere altri obiettivi, come il 50% per metà altezza, ecc.
- % è simile a VW e VH, ma non è una lunghezza relativa alla larghezza o all’altezza della viewport. È invece una percentuale della larghezza o dell’altezza dell’elemento padre. Le unità percentuali sono spesso utili, ad esempio, per impostare la larghezza dei margini.
- Elementor rende facile scegliere l’opzione che si adatta meglio al tuo design. In definitiva, la scelta è tua.