2.10
Qual è la natura degli elementi e delle etichette in HTML, l'organizzazione strutturale, la formattazione, le diverse categorie di elementi e la gerarchia del Document Object Model (DOM)?
In una pagina HTML, tutti gli elementi sono identificati mediante etichette, note come “tag”. Questi tag non si concentrano principalmente sull’aspetto visivo, ma piuttosto sulla semantica, sulla funzione, e sull’organizzazione attribuita ai contenuti. Ad esempio, utilizzando <h1> per indicare un titolo, intendiamo che le parole in quel titolo rappresentino il tema principale della pagina, indipendentemente da come saranno visualizzate.
Questa prospettiva “semantica” degli elementi è di fondamentale importanza poiché ci aiuta a mantenere la consapevolezza che una pagina web deve essere un ambiente organizzato di informazioni, specialmente su Internet. Considerando, ad esempio, il contesto delle ricerche online, è evidente che una pagina sarà più facilmente rintracciabile quanto più sarà correlata a parole chiave o temi specifici. Pertanto, diventa cruciale curare aspetti come la struttura del testo, la scelta dei titoli e l’uso di formattazioni evidenziate.
Tuttavia, nell’ambito di HTML, è possibile anche definire la struttura dell’interfaccia utente di un’applicazione, in cui i tag diventano strumenti preziosi per organizzare il layout o per delineare aree specifiche destinate all’esperienza dell’utente. In entrambi i casi, l’attenzione è rivolta alla struttura e alla semantica piuttosto che agli aspetti grafici.
Come è strutturato un TAG
La struttura di un tag Un tag è una parola chiave del linguaggio racchiusa tra parentesi angolari (<>). Esempi di tag includono <html>, <body> e <h1>, che abbiamo già esaminato nelle lezioni precedenti.
È importante notare che i tag HTML non sono “case sensitive”, il che significa che scrivere <head> o <HEAD> è completamente equivalente. Tuttavia, la pratica comune è quella di scrivere i tag in minuscolo (questa era una raccomandazione in HTML4 e un requisito in XHTML).
Elementi come contenitori e autonomi nel DOM Molti elementi in HTML sono utilizzati per descrivere parti di una pagina, regioni o contenuti specifici. Per esempio, <body> definisce l’intero contenuto di una pagina, <h1> contiene un titolo e <p> rappresenta un paragrafo nel testo.
Di conseguenza, un elemento HTML agisce quasi sempre come un contenitore, con il suo contenuto delimitato da due parti:
- Il tag di apertura (esempio: <p>).
- Il tag di chiusura (esempio: </p>).
ESEMPIO
<p>Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt, ut labore et dolore
magnam aliquam quaerat voluptatem.</p>
Le pagine HTML sono quindi formate per composizione di contenitori (annidati) l’uno dentro l’altro. Per capire meglio facciamo un semplice esempio:
<!doctype html>
<html lang=”it”>
<head>
<title>Ciao Mondo!</title>
</head>
<body>
<h1>Ciao Mondo!</h1>
<p>Questa è la nostra prima pagina HTML!</p>
<img src=”immagine.jpg”>
</body>
</html>
La configurazione risultante assume la forma di un albero, in cui i rami consistono interamente di tag contengono, e le estremità sono costituite da testi, immagini, o altri componenti, come le caselle di input. Tutti questi elementi finali non agiscono da contenitori e quindi non richiedono un tag di chiusura.
Ad esempio, considerando l’elemento “html,” questo serve da radice dell’albero e non richiede un tag di chiusura in quanto rappresenta l’inizio del documento HTML.
ESEMPIO
html
|
+—head
| |
| +—title
| |
| +—“Ciao Mondo!”
|
+—body
|
+—h1
|
+—“Ciao Mondo!”
|
p
|
+—“Questa è la nostra prima pagina HTML!”
|
img
Formattazione del Codice
La struttura delineata richiama la rappresentazione del documento nella memoria del browser, nota come DOM (Document Object Model), il modello del documento HTML in cui l’elemento <html> funge da nodo radice.
Formattazione del codice Spesso, per evidenziare la gerarchia di un elemento all’interno di un altro, si ricorre alla “formattazione del codice”, cioè si sposta il contenuto a destra rispetto all’inizio della riga utilizzando spazi o tabulazioni. Di fatto, l’apertura e la chiusura del tag sono allineate allo stesso livello, mentre il contenuto è rientrato verso destra di uno spazio tabulato.
Elementi inline e di blocco, le diverse categorie di tag per la struttura I tag HTML possono rappresentare oggetti, come le immagini, o essere impiegati per suddividere la pagina in aree, ad esempio con ‘div’ o ‘section’. Esistono varie categorie di tag, e comprenderle diventa essenziale per selezionare il tag appropriato al contesto e per applicare successivamente le regole di CSS.
Le categorie principali di visualizzazione in cui gli elementi si suddividono sono le seguenti:
Elementi di tipo “Block” (blocco): Questi elementi formano una sorta di blocco autonomo. Essi non sono parte del flusso di testo e quindi causano un’interruzione, ad esempio i paragrafi, i div o le sezioni. In genere, sono elementi contenitore nell’albero di cui abbiamo parlato in precedenza.
Elementi di tipo “Inline” (in linea): Questi elementi non causano un’interruzione nel flusso di testo e possono essere integrati direttamente nel testo, come i link, le immagini o gli span.
Liste: Queste possono essere numerate o non numerate e sono simili agli elementi di tipo “Block,” ma con una struttura particolare. Sono ideali per definire elenchi o menu.
Oltre a queste categorie di visualizzazione, esistono altre modalità interessanti per gestire la presentazione degli elementi, grazie alla regola “display” dei CSS, come ad esempio la modalità “flexbox.”