Elementi di blocco e di linea

Metodi di visualizzazione dei contenuti

creativecode avatar Giulio Tiseo

17 Ott, 2019

~2min.

Essere consapevole della distinzione fra elemento di blocco e di linea ti aiuterà ad avere una maggiore padronanza dei tag, sviluppando la capacità di prevedere i comportamenti in visualizzazione che potrebbero essere, in certi casi, inaspettati.

Contenuti in questo articolo
Requisiti

La distinzione fra elementi di blocco ed elementi di linea è un argomento piuttosto delicato e importante che richiede una buona conoscenza degli strumenti di analisi del codice HTML. A tal proposito, potranno esserti di aiuto articoli come Vedere il codice di un sito webFormattare un testo.

# Elementi di blocco

Partiamo da questa premessa: quando si è alle prese con i linguaggi informatici, esistono tanti modi per ottenere lo stesso risultato.

Ad esempio, riprendiamo il codice che abbiamo scritto nella lezione “Primi passi con il linguaggio HTML“. In particolare, voglio raggiungere lo stesso risultato che ho ottenuto con questo snippet: 

Hello World! <br />
Hello Creative Code

La possibilità di spezzare due righe con un <br  />, ad esempio, possiamo replicarla utilizzando due elementi paragrafo.

A questo punto verifichiamolo provando a scrivere i due saluti sulla stessa linea e inserendoli in due <p> separati:

<p>Hello World!</p> <p>Hello Creative Code</p>
Elemento di Blocco (Paragrafo)
I paragrafi sono elementi di blocco, quindi tendono a disporsi uno sotto l’altro

Come puoi notare, pur avendo scritto i due saluti sulla stessa linea, il browser manda a capo il testo senza ricorrere al tag <br />. Inoltre, se provi ad aggiungere spazi o spostare il paragrafo a capo, la posizione degli elementi nella preview non cambia.

Questo comportamento è dovuto al fatto che il tag <p> è un elemento di blocco, ovvero un tipo di contenuto che andrà ad occupare tutta l’area ad esso adiacente, da sinistra a destra. Puoi verificare il comportamente degli elementi di blocco e di linea attraverso la developer tools, lo strumento che ho introdotto nell’articolo “Vedere il codice di un sito web

Elemento di Blocco
Dall’ispeziona elemento di Chome possiamo osservare come l’elemento di blocco va ad occupare tutto lo spazio da sinistra a destra della finestra.

Ciò vorrà dire che qualsiasi altro tag dichiarato dopo un elemento di blocco, verrà visualizzato nel browser al rigo successivo. Ovviamente questo comportamento potrà essere regolato più avanti attraverso le regole CSS, non temere. 😉

# Elementi di linea

Proviamo ora ad utilizzare il tag <b> per trasformare le parole “Hello” in grassetto.

<p><b>Hello</b> World!</p>
<p><b>Hello</b> Creative Code</p>
Elemento di Linea
Gli elementi di linea tendono a disporsi uno accanto l’altro

Questo è il classico esempio di elemento di linea! Come puoi osservare, il tag <b> non intacca il normale flusso del paragrafo poiché esso è un elemento che va ad allinearsi con il resto del contenuto senza occupare l’intera area.

Sperimenta fra i vari tag che hai visto fino ad ora per capire quali sono gli elementi di blocco e quali sono gli elementi di linea. Capire il comportamento in visualizzazione di ciascun tag ti eviterà grossi perdite di tempo quando tratteremo argomenti più complessi, in particolare quando ti introdurrò gli stili. 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *