Conoscere e utilizzare un div in Html parte 1

Immaginati una pagina web divisa in tre parti principali: l’intestazione, il piè di pagina e, in mezzo, il corpo principale. Ma quando guardi qualsiasi pagina web, puoi anche notare che il corpo è composto da diverse sezioni. Probabilmente c’è una sezione per prodotti e servizi, testimonianze, informazioni di contatto e tanto altro. Ognuna di queste sezioni probabilmente ha un aspetto leggermente diverso come i colori e i caratteri, ma anche lo sfondo e i media, in ogni caso è composto da righe e colonne. 

Questa differenziazione nello stile è possibile grazie all’elemento di suddivisione del contenuto in HTML meglio conosciuto come “div”, questo elemento può dividere la tua pagina web in sezioni in modo da poterle differenziare con proprietà CSS uniche. Conosciamo meglio quindi questo elemento e vediamo un po’ come utilizzarlo.

Che cos è il tag <div> in HTML?

E’ un contenitore generico, come un blocco che contiene altri elementi.

Innanzitutto, un div è detto “generico” perché non fa riferimento minimamente al contenuto interno. Altri elementi come <nav>, <header>, <footer> e <form> descrivono chiaramente il contenuto insito e sono noti come elementi HTML semantici. In secondo luogo, un div è un contenitore a livello di blocco. Per capire cosa significa, confrontiamo un div con un elemento span, che è un contenitore inline.

Esistono diverse differenze tra un contenitore a livello di blocco e un contenitore inline. Ad esempio, un div inizia sempre su una propria riga, mentre uno span rimane in linea. Un div occupa anche l’intera larghezza della pagina e uno span no. Ciò significa che se hai più div di seguito, appariranno impilati uno sopra l’altro sul front-end. L’ultima grande differenza è che puoi definire l’altezza e la larghezza di un div, ma non puoi per un intervallo.