Ogni pagina HTML è composta da numerosi elementi. Ogni elemento viene visualizzato dal browser secondo un determinato comportamento. I due comportamenti principali sono block e inline, che determinano il modo in cui gli elementi vengono disposti all'interno della pagina.
Capire la differenza tra questi due tipi di elementi è fondamentale, perché influenza l'impaginazione della pagina e il modo in cui gli elementi possono essere personalizzati con il CSS.
Gli elementi block occupano, per impostazione predefinita, tutta la larghezza disponibile del loro contenitore. Inoltre, iniziano sempre su una nuova riga, facendo sì che l'elemento successivo venga visualizzato al di sotto.
Questo comportamento rende gli elementi block particolarmente adatti per creare sezioni della pagina, contenitori e blocchi di contenuto ben separati tra loro.
Un esempio molto comune è il tag <p>, utilizzato per creare un paragrafo. Ogni nuovo paragrafo viene visualizzato sotto al precedente perché <p> è un elemento block.
Un altro elemento molto utilizzato è il tag <div>, che permette di creare un contenitore generico. Il tag <div> non ha un significato specifico, ma viene spesso utilizzato per raggruppare altri elementi e organizzarli all'interno della pagina.
Esistono molti altri elementi block, tra cui <h1>, <h2>, <p>, <div>, <ul>, <ol>, <li>, <table>, <form> e molti altri.
Il tag <div> è uno degli elementi più utilizzati nello sviluppo web. Viene impiegato principalmente come contenitore per organizzare il contenuto della pagina.
Da solo non modifica l'aspetto degli elementi che contiene, ma diventa estremamente utile quando viene personalizzato tramite il CSS. Ad esempio, può essere utilizzato per creare colonne, riquadri, menu, intestazioni o qualsiasi altra sezione della pagina.
<div>Ecco un div</div>
<div>Ecco un altro div</div>
Aprendo l'esempio noterai che ogni <div> viene visualizzato su una nuova riga. Questo è proprio il comportamento tipico degli elementi block.
Gli elementi block vengono normalmente utilizzati quando il contenuto deve occupare una propria sezione della pagina. Ad esempio, un titolo, un paragrafo, una tabella o un form vengono quasi sempre inseriti utilizzando elementi block.
Successivamente, quando studierai il CSS, scoprirai che il comportamento predefinito può essere modificato tramite la proprietà display.
Gli elementi inline si comportano in modo diverso dagli elementi block. Non iniziano automaticamente su una nuova riga e vengono visualizzati uno accanto all'altro, finché è presente spazio sufficiente.
Gli elementi inline occupano soltanto lo spazio necessario per visualizzare il proprio contenuto, senza estendersi automaticamente per tutta la larghezza disponibile.
Uno degli elementi inline più utilizzati è il tag <span>, che permette di selezionare una parte di testo per applicare stili o altre modifiche senza interrompere il flusso della frase.
Tra gli elementi inline più comuni troviamo anche <a>, <b>, <strong>, <em>, <img> e, nella maggior parte dei casi, anche <input>.
Il tag <span> è un contenitore inline. Viene utilizzato soprattutto quando si desidera modificare soltanto una parte di un testo senza creare una nuova riga.
Ad esempio, è possibile cambiare il colore di una parola, modificarne la dimensione oppure applicare qualsiasi altra proprietà CSS mantenendo il testo sulla stessa riga.
<p>Un testo nero e <span style="color:yellow">un testo giallo</span> insieme.</p>
Provando l'esempio noterai che il testo continua normalmente sulla stessa riga. Questo succede perché <span> è un elemento inline.
Gli elementi inline sono particolarmente adatti quando si vuole modificare o evidenziare una piccola parte del contenuto, senza creare una nuova sezione della pagina.
Sono quindi molto utilizzati all'interno dei paragrafi, nei collegamenti, nelle parti di testo evidenziate e in generale quando non è necessario andare a capo.
La differenza principale è che gli elementi block iniziano sempre su una nuova riga e occupano tutta la larghezza disponibile, mentre gli elementi inline rimangono sulla stessa riga e occupano soltanto lo spazio necessario al loro contenuto.
Questa distinzione è molto importante nello sviluppo di una pagina web, perché permette di scegliere l'elemento più adatto in base al tipo di contenuto che si vuole creare e alla disposizione che dovrà avere nella pagina.
Nella lezione del corso CSS dedicata puoi vedere come il comportamento di un elemento può essere modificato utilizzando la proprietà display, trasformando, ad esempio, un elemento block in inline o viceversa.