div, span si etichete CSS

Elementele <div> și <span> sunt „containere” fără niciun înțeles propriu: nu spun browserului că avem un titlu, un paragraf sau o listă, ci doar grupează conținut ca să-i poți aplica stiluri CSS. Diferența dintre ele ține de felul în care se așază în pagină: div este un element bloc, iar span un element în linie.

Elemente bloc și elemente în linie

Fiecare element HTML are un mod implicit de afișare:

• Elementele bloc (div, p, h1…h6, ul, section etc.) încep pe un rând nou și ocupă, implicit, toată lățimea disponibilă. Le poți da lățime, înălțime și margini pe toate laturile.
• Elementele în linie (span, a, strong, em, code etc.) stau în interiorul textului, pe același rând cu el, și ocupă doar cât le trebuie. Proprietățile width și height nu au efect asupra lor, iar marginile de sus și de jos nu împing rândurile.

<style>
  div  { background: #dde6f5; border: 1px solid #7a9cd6; margin: 4px 0; }
  span { background: #fff0b3; border: 1px solid #d9b800; }
</style>
<div>Un div ocupă tot rândul.</div>
<div>Al doilea div începe pe rând nou.</div>
<p>Un <span>span</span> stă în text, iar <span>al doilea span</span> continuă pe același rând.</p>

Așadar div se folosește pentru a grupa blocuri de conținut (mai multe paragrafe, o imagine cu legenda ei, o casetă), iar span pentru o porțiune de text dintr-un paragraf. Un element bloc nu se pune în interiorul unuia în linie: <span><div>…</div></span> este cod HTML invalid. La fel, un div nu poate sta în interiorul unui p.

În tutorialele vechi, span era prezentat ca înlocuitor al etichetei <font>. Eticheta <font> este de mult învechită și eliminată din HTML5; culoarea, fontul și dimensiunea textului se stabilesc numai cu CSS.

<p>Prețul este <span style="color: crimson; font-weight: bold;">49 lei</span> până duminică.</p>

Proprietatea display

Modul de afișare nu este fixat de etichetă: îl poți schimba cu proprietatea display. Valorile cele mai folosite:

• block – elementul se comportă ca un bloc;
• inline – elementul se comportă ca text;
• inline-block – stă pe rând cu textul, dar acceptă lățime, înălțime și margini, ca un bloc (util pentru butoane, etichete);
• none – elementul nu este afișat deloc și nu ocupă loc;
• flex și grid – transformă elementul într-un container care își așază copiii pe rânduri sau coloane (vezi Poziționare).

<style>
  .bloc   { display: block; background: #dde6f5; }
  .buton  { display: inline-block; width: 90px; padding: 6px; text-align: center;
            background: #1a5fb4; color: white; border-radius: 6px; }
  .ascuns { display: none; }
</style>
<p>Acest <span class="bloc">span afișat ca bloc</span> rupe rândul.</p>
<p>Două <span class="buton">Da</span> <span class="buton">Nu</span> butoane cu lățime fixă.</p>
<p>Textul de aici <span class="ascuns">nu se vede</span> continuă normal.</p>

Schimbarea lui display modifică doar aspectul, nu și regulile HTML: un span cu display: block tot nu are voie să conțină un div.

Selectorii de etichetă

Pe lângă atributul style, CSS poate stiliza toate elementele de același fel printr-o singură regulă, folosind ca selector chiar numele etichetei. Comparația dintre o etichetă HTML cu atribut și o regulă CSS:

<eticheta atribut="valoare">     ← HTML

eticheta { proprietate: valoare; }  ← CSS

Selectorul poate fi numele unei etichete (p, h2, div), o clasă sau un id (vezi Elementele id și class). Proprietățile CSS nu sunt aceleași cu atributele HTML: au nume și valori proprii, de exemplu color, background-color, font-size.

Același text verde, scris o dată cu cod HTML învechit și o dată corect:

<!-- HTML 4, învechit: nu-l folosi -->
<font color="#00FF00"><p>Text verde</p></font>

<!-- HTML5 + CSS -->
<p style="color: green;">Text verde</p>

Regulile scrise în <style> sau într-un fișier extern se aplică tuturor elementelor alese de selector, deci nu mai trebuie repetate la fiecare paragraf. Aici, toate paragrafele devin verzi, iar textul care nu este într-un p rămâne negru:

<style>
  p { color: green; }
</style>
<p>Text verde</p>
<div>Text negru (într-un div, nu într-un p)</div>
<p>Text verde</p>

Deschide exemplul într-o pagină separată (regula CSS în <head>, aplicată tuturor paragrafelor).

Elemente semantice în loc de div-uri

Înainte de HTML5, o pagină era construită aproape numai din div-uri cu nume sugestive: <div id="header">, <div id="menu">, <div id="footer">. HTML5 are elemente semantice pentru aceste zone. Se comportă tot ca blocuri, dar spun și ce rol are conținutul, lucru folosit de cititoarele de ecran, de motoarele de căutare și de modul de citire al browserelor:

• <header> – antetul paginii sau al unei secțiuni (logo, titlu);
• <nav> – meniul principal de navigare;
• <main> – conținutul principal, o singură dată pe pagină;
• <article> – un conținut de sine stătător (un articol, o știre, un comentariu);
• <section> – o secțiune tematică, de regulă cu propriul titlu;
• <aside> – conținut secundar (bară laterală, notă);
• <footer> – subsolul paginii sau al unei secțiuni;
• <figure> și <figcaption> – o imagine, un tabel sau un fragment de cod împreună cu legenda lui.

<body>
  <header>
    <h1>Numele site-ului</h1>
    <nav>
      <a href="/">Acasă</a>
      <a href="/tutoriale/">Tutoriale</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>Titlul articolului</h2>
      <p>Conținut…</p>
    </article>
    <aside>Articole asemănătoare</aside>
  </main>
  <footer>© 2026 Numele site-ului</footer>
</body>

Elementele semantice se stilizează exact ca un div, prin numele etichetei:

<style>
  header, footer { background: #263b5e; color: white; padding: 8px 12px; }
  nav a { color: #ffd866; margin-right: 12px; }
  article { padding: 8px 12px; border-left: 4px solid #1a5fb4; margin: 8px 0; }
  article h2 { margin: 0 0 4px; font-size: 1.1rem; }
</style>
<header><strong>Site-ul meu</strong> <nav><a href="#">Acasă</a><a href="#">Contact</a></nav></header>
<article><h2>Titlul articolului</h2><p>Textul articolului.</p></article>
<footer>Subsolul paginii</footer>

Folosește div și span doar atunci când nu există un element cu înțeles potrivit și ai nevoie de un container numai pentru stil sau așezare (de exemplu un rând de carduri sau o coloană). Lista completă a etichetelor este în referința HTML.