In una pagina HTML tutti gli elementi sono connotati da tag (letteralmente "etichette"). Si tratta di marcatori che evidenziano non tanto l'aspetto, quanto il senso, il ruolo, o l'organizzazione che vogliamo assegnare ai contenuti. Ad esempio se indichiamo un titolo con <h1> per noi le parole in quel titolo rappresentano il tema principale della pagina, al di là del modo in cui saranno visualizzate.
- Questa visione "semantica" degli elementi è fondamentale, ci aiuta a non perdere di vista il fatto che una pagina deve essere un luogo ordinato di informazioni, soprattutto sul Web. Se pensiamo ad esempio al classico contesto delle ricerche online, risulta naturale comprendere che tanto più una pagina sarà associabile a una keyword o a un tema, tanto più facile sarà trovarla. Per questo sarà importante curare cose come l'organizzazione del testo, la definizione dei titoli, dei link dei grassetti.
- Tuttavia in HTML possiamo anche definire lo scheletro dell'interfaccia utente di una app, e in questo frangente i tag diventano utili come supporto all'organizzazione del layout o alla definizione di aree specifiche per l'esperienza utente.
In tutti e due i casi continuiamo a non parlare di "grafica", ma di struttura.
Come è fatto un tag
Un tag è una keyword del linguaggio racchiusa tra parentesi angolari (<>). Esempi di tag sono <html>, <body> e <h1>, che abbiamo già incontrato nelle lezioni precedenti.
I tag HTML non sono "case sensitive" ciò significa che scrivere <head> o <HEAD> è esattamente la stessa cosa. In ogni caso la consuetudine è quella di scrivere i tag in minuscolo (era una raccomandazione in HTML4 e una richiesta in XHTML).
Elementi contenitori e autonomi, il DOM
Molti elementi in HTML servono per descrivere porzioni di pagina, aree, o contenuti. Ad esempio <body> descrive il contenuto di tutta la pagina, <h1> racchiude un titolo e <p> denota un paragrafo nel testo.
Pertanto un elemento HTML è quasi sempre un contenitore e il suo contenuto è delimitato da:
- tag di apertura (es.
<p>); - tag di chiusura (es.
</p>).
<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 riprendiamo il nostro 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 struttura che emerge è quella di un albero, in cui i rami sono tutti tag contenitori e le estremità sono composte da testi, immagini o altri elementi come le caselle di input. Tutti questi elementi finali non sono contenitori e non necessitano di un tag di chiusura.
html
|
+---head
| |
| +---title
| |
| +---"Ciao Mondo!"
|
+---body
|
+---h1
|
+---"Ciao Mondo!"
|
p
|
+---"Questa è la nostra prima pagina HTML!"
|
imgL'albero che abbiamo tracciato ricorda il modo in cui viene rappresentato il documento nella memoria del browser, ovvero il DOM (Document Object Model), il modello del documento HTML di cui l'elemento <html> è il nodo radice.
Indentare il codice
Spesso per sottolineare l'annidamento di un elemento in un altro si usa "indentare il codice", ovvero discostare il contenuto dall'inizio della riga lasciando spazi (o tab). In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab.
Elementi inline e block, le tipologie di tag per il layout
I tag HTML possono rappresentare oggetti (come ad esempio le immagini) o servire a suddividere la pagina in aree (come i 'div' o le 'section'). Ci sono diverse tipologie di tag e conoscerle diventa determinante per usare il tag giusto al posto giusto e per applicare in seguito le regole CSS.
Le principali tipologie di visualizzazione in cui si dividono gli elementi sono:
| Tipologia | Descrizione |
|---|---|
| Block (elementi blocco) | Elementi che costituiscono un blocco attorno a sé. Non fanno parte di un testo e di conseguenza mandano a capo, come i paragrafi i div o le section. In genere sono elementi contenitore nell'albero che abbiamo tracciato in alto |
| Inline (elementi "in linea") | Elementi che non vanno a capo e possono essere integrati nel testo, come i link, le immagini, oppure gli span. |
| Liste | Liste numerate o non numerate. Sono simili agli elementi blocco con una struttura particolare, ideali per definire elenchi o menu |
Ci sono altre modalità molto interessanti in cui possiamo visualizzare gli elementi grazie alla regola display dei CSS, come la modalità flexbox.
>> Scopri le differenze tra le diverse tipologie di tag nell'HTML.