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.