In HTML distinguiamo due tipi fondamentali di elementi, quelli “blocco” e gli “inline”.

Vediamo un esempio pratico nel seguente codice:

<!DOCTYPE html>
<html>
 
<head>
<title>Titolo del documento</title>
</head>
 
<body>

<div>
Lorem ipsum dolor sit amet, 

<span>
consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</span> Aenean massa. 

<p>
Cum sociis natoque penatibus
</p> 
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 
</div>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 
</div>

</body>
 
</html>

L’effetto finale qui sotto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Cum sociis natoque penatibus

et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Analizzando la sintassi possiamo distinguere:
– Elementi blocco: sono quelli che generano un box, un blocco che racchiude svariati elementi. Lo possiamo visivamente notare dal fatto che si formerà un’area rettangolare separata dalle altre.
Gli elementi di blocco qui presenti sono:
div
p
– Elementi inline: sono quelli che racchiudono degli elementi senza separarli dagli altri all’interno di un box a parte. Visivamente non ci accorgeremo della presenza degli elementi inline perchè restano allineati con il resto degli elementi.
Gli elementi inline qui presenti sono:
span

Il mio sito ufficiale>