Elementi di blocco e in linea
Metodi di visualizzazione dei contenuti
23 Dic, 2018
・~2min.
Essere consapevole della distinzione fra elemento di blocco e in 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 in 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 web e Formattare 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 CodeLa 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>
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“
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 in 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>
Questo è il classico esempio di elemento in 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à grosse perdite di tempo quando tratteremo argomenti più complessi, in particolare quando ti introdurrò gli stili.