In HTML5 (care este ultima versiune de HTML) elementele sunt impartite in 7 categorii.

Eu as dori sa folosim o clasificare care a fost valabila pana la HTML4, dar pe care o consider mult mai folositoare cand cineva incepe sa invete despre HTML. Am putea vedea toatele elementele HTML impartite in doua categorii:

  • elemente de tip block

    Pe scurt, inseamna ca elementele vor fi pe o singura linie. De fiecare data cand le folosim acestea se intind pe toata lungimea elementului parinte. Cateva elemente de tip block sunt: <p>, toate elementele de la <h1> pana la <h6>, <ul>, <li>.

    De exemplu, am folosit elementul <p> pentru aceste doua paragrafe si vedem ca fiecare este pe linia lui si nu unul in continuarea celuilalt.

  • elemente de tip inline

    Aceste tipuri de elemente vor aparea pe o singura linie si nu vor impinge continutul ce urmeaza dupa ele pe o linie noua.

    De cele mai multe ori, ele apar in interiorul unui element de tip block.

    De exemplu, in interiorul unui <p> cand vrem sa avem un cuvant ingrosat folosim elementul <strong>. El este unul de tip inline pentru ca nu forteaza textul de dupa el pe o linie noua.

    In exemplul urmator, ambele paragrafe vor aparea pe o linie:

    <p>aceste <strong>cuvinte</strong> vor aparea pe o singura linie</p><p>aici vom avea un rand separat</p>

Aceasta este marea diferenta dintre cele 2 tipuri de elemente, si desi suna simplu cauzeaza o groaza de probleme in web design.

Din fericire putem forta un element sa alterneze intre bloc si inline si pentru asta vom folosi CSS.