In questo articolo, della serie Imparare l’HTML, imparerai il tag div e scoprire a cosa serve e come viene utilizzato all’interno di una pagina web in HTML e CSS.
Il tag div
Una pagina web come abbiamo già visto in precedenza, è strutturata in sezioni differenti ed ognuna con uno scopo ben preciso. Semplificando potremmo dire che una pagina in HTML è suddivisa tra cui zone visibili e zone non visibili, ed ogni zona è dichiarata da appositi tag html.
Nella parte non visibile (head) vengono inseriti script, codici e richiami a risorse esterne (che vedremo in modo più dettagliato in un articolo dedicato a tutti questi argomenti), in tag div invece è pensato per essere inserito nel body (parte visibile) di una pagina web, in modo specifico è pensato per definire l’intero layout in cui andranno inseriti tutti gli altri oggetti (immagini, testo e paragrafi, link ecc.. ecc..) come un vero e proprio contenitore.
Il tag “div” oltre a servire da contenitore, serve anche per definire la forma generale e lo stile della pagina. Questo grazie all’accoppiata HTML/CSS. Leggi di più nella guida dedicata al linguaggio CSS, che si occupa di ogni aspetto stilistico del sito e delle pagine web che lo compongono.
Cos’è il tag “div”?
Dopo la creazione dei tag <head> e <body> dovremo stabilire le diverse sezioni della pagina, ognuna ad uno scopo preciso. Il tag che si occupa di questo è il div, probabilmente uno dei più importanti dell’intero linguaggio HTML, fondamentale da imparare per riuscire ad impostarlo ed usarlo al meglio.
Come già detto, un “div” è un vero e proprio “contenitore” dove andranno inseriti tutti i tag visti nei precedenti articoli, come i paragrafi, titoli ed immagini, possono essere multipli e vanno inseriti tutti nel body.
Un esempio:
<body>
<div>
<H1> Titolo sezione </H1>
<p> paragrafo di testo, descrizione </p>
</div>
</body>Inserito un div, avremo dichiarato una sezione indipendente, con un suo contenuto, un suo stile e dimensioni, ed aiuterà i bot dei motori di ricerca ad elaborare e studiare meglio la struttura della pagina html.
Inoltre potremo creare uno stile unico per ogni div presente, che interesserà esclusivamente in contenuto racchiuso al suo interno, evitando di dover mettere mano sullo stile di ogni singolo tag.
Ad esempio, se volessi creare due div nella stessa pagina, uno con il testo di colore verde, ed un altro di colore blu, il codice sarebbe questo:
<body>
<div style="color:green;">
<H1> Verde </H1>
<p> questo è un testo di colore verde </p>
</div>
<div style="color:blue;">
<H1> Blu </H1>
<p> questo è un testo di colore blu </p>
</div>
</body>Tutto quello che è visibile in qualsiasi pagina html, è contenuto nei div, ed ognuno di essi ha la sua posizione, una dimensione ed un’identità stabilita al suo interno:
Possiamo quindi stabilire le dimensioni di ogni singolo div e il suo posizionamento all’interno della pagina attraverso l’attributo style, tutte queste proprietà le abbiamo elencate in un articolo dedicato agli stili CSS.
Continua con: Gli attributi delle immagini
Leggi anche: I tag HTML da conoscere o il Corso completo di HTML
Articoli Recenti:
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
- Come Risolvere i Problemi di Connessione Bluetooth al PC
- Guida alla Cybersecurity: Come proteggerti da minacce informatiche
- Come Aggiungere un Dizionario su App Kindle
