Tag-urile <div></div> si <span></span> nu au efecte importante daca sunt folosite singure.

- Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center (centru), justify (distanta textului fata de margini egala).

- Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context, putand fi folosit si ca o "classa" cu CSS. Singur nu are nici un efect vizual poropriu si nu foloseste nici un atribut HTML special.

Chiar daca folosite singure, DIV si SPAN nu au nici un efect major, in combinatie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS.

1. Tag-ul DIV

Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece in combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul in care acestea sunt adaugate poate avea propriul fundal (background), lungime, inaltime si margini cu diferite linii.
Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista "<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini diferite.

<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
Nume: <input type="text"></input><br>
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>

- In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:

Alt DIV

Linie 1
Linie 2
Linie 3

Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tag-ului <div> </div> oriunde in pagina, folosind proprietati CSS precum:

position - care poate lua valorile: static, relative, fixed sau absolute (pt. mai multe detalii vezi Pozitionare CSS).
margin - care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si elementele din jurul lui (pt. mai multe detalii vezi Margini si chenare CSS).

Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus, putem afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul:

<div style="position:relative; font-size:21px;">
<div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu - Exemplu</div>
<div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu - Exemplu</div>
<div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu - Exemplu</div>
</div>

In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de pozitionare relativa (pt. a pozitiona toate celelalte elemente pe care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru marimea textului. In interiorul acestui DIV avem alte 3 div-uri, pozitionate absolut si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta div-urile se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left", iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div" va apare in pagina web urmatorul rezultat:

- Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi, pozitionare, margini, borduri, background) pe care le puteti invata la Cursul CSS din acest site.

2. Tag-ul SPAN

Cu tag-ul <span></span> puteti adauga stiluri grafice unei anumite portiuni dintr-un context. Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate printr-un atribut "style" in interiorul etichetei "<span>" (sau in foi de stil).
Pentru a intelege mai bine, iata un exemplu in care se scoate in evidenta anumite cuvinte dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii adaugam proprietatile dorite, ca in exemplul urmator.

Aceasta este o lectie din <span style="background:#88fe88; font-weight:bold;">Cursul HTML</span> de pe Discant.ro.

- Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul continutului.
- Astfel, prin proprietatile adaugate in "style" (background:#88fe88; si font-weight:bold;), in pagina web va fi afisat textul in felul urmator:

Aceasta este o lectie din Cursul HTML de pe Discant.ro.

Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care sunt incadrate in tag-uri "<span></span>".
Iata un exemplu

<html>
<head>
<title>Titlul</title>
<style type="text/css">
    span {
      border:2px solid red;
      padding:1px;
      color:#1111fe;
    }
</style>
</head>
<body>
<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, in span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, in span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>

- Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile "<span></span>" din document si le transmite aceleasi proprietati.
- Acest cod va afisa intr-o pagina web urmatorul rezultat:

Exemplu de text cu eticheta SPAN in interiorul frazei.

Linia 1
Linie 2, in span
Linia 3
Linie 4, in span
Linia 5

3. Diferenta dintre DIV si SPAN

- Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document sub forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii.
Iata un exemplu din care se poate intelege mai bine, atribuim aceeasi proprietate grafica (bordura rosie) unui tag DIV si unui tag SPAN.'

<div style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</div>
<br>
- Acum cu SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</span>

- In pagina web va apare

Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

- Acum cu SPAN:

Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.

- Observati diferenta, modul in care este afisata bordura. Pentru DIV aceasta incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este afisata pe fiecare linie.
- De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din interiorul unei linii.

- Cand aveti mai multe elemente <div></div> si <span></span> in pagina, este indicat folosirea atributului "id" sau "class". Acestora le acordati proprietati CSS o singura data in sectiunea HEAD sau intr-un fisier CSS extern. Este mai eficient decat sa scrieti in fiecare "<div>" si "<span>" cate un atribut "style".
Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS, puteti studia prima lectie de la Cursul CSS, Scriere cod CSS.