HTML il tag div

Imparare l’HTML – il tag “div”

Una pagina web come abbiamo già visto, è strutturata in sezioni, 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, ma prima di dedicarmi a questo argomento, voglio spiegare come iniziare a strutturare e a dare forma alla parte visibile della della pagina html.

Inoltre per lo stile della pagina, farò una guida dedicata al linguaggio CSS, che si occupa di ogni aspetto stilistico del sito e delle pagine web.

Cos’è il tag “div”?

Dopo la creazione dei tag <head> e <body>, dovremo stabilire le diverse sezioni della pagina, ognuno ad uno scopo preciso. Il tag che si occupa di questo è il <div>, che è uno dei più importanti, e bisogna saperlo usare al meglio.

Un “div” è un vero e proprio “contenitore“, dove andranno inseriti tutti i tag precedentemente visti, 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:

struttura div nella pagina
Tutte i contenitori (compreso header e footer) sono div

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.

Gli attributi delle immagini

Leggi anche: I tag HTML da conoscere o il Corso completo di HTML


Articoli Recenti

Condividi ora!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA