Elemente de grupare în HTML5
Anumite elemente sunt destinate pentru gruparea conținutului pe o pagină web.
Elementul div
Elementul div servește pentru structurarea conținutului pe o pagină web, pentru a împacheta conținutul în blocuri separate. Div creează un bloc care, implicit, se extinde pe toată lățimea browserului, iar elementul următor după div este mutat pe o nouă linie. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document HTML5</title>
</head>
<body>
<div>Titlul documentului HTML5</div>
<div>Textul documentului HTML5</div>
</body>
</html>Obținem:
Paragrafe
Paragrafele sunt create cu ajutorul tagurilor <p> și </p>, care încapsulează anumit conținut. Fiecare paragraf nou este plasat pe o nouă linie. Să utilizăm paragrafe:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document HTML5</title>
</head>
<body>
<div>Titlul documentului HTML5</div>
<div>
<p>Primul paragraf</p>
<p>Al doilea paragraf</p>
</div>
</body>
</html>Obținem:
Dacă, în cadrul unui singur paragraf, dorim să mutăm textul pe o altă linie, putem utiliza elementul <br>:
<p>Prima linie.<br/>A doua linie.</p>Elementul pre
Elementul pre afișează textul pre-formatat exact așa cum este definit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document HTML5</title>
</head>
<body>
<pre>
Prima linie
A doua linie
A treia linie
</pre>
</body>
</html>Obținem:
Elementul span
Elementul span învelește anumit text pe toată lungimea sa și servește în principal pentru stilizarea conținutului text inclus. Spre deosebire de blocurile div sau paragrafe, span nu mută conținutul pe o nouă linie:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document HTML5</title>
</head>
<body>
<div>Titlul documentului HTML5</div>
<div>
<p><span style="color:red;">Primul</span> paragraf</p>
<p><span>Al doilea</span> paragraf</p>
</div>
</body>
</html>Obținem:
Trebuie de menționat că, de la sine, span nu face nimic. Astfel, în al doilea paragraf, span nu a avut niciun efect asupra conținutului text interior. În primul paragraf, elementul span conține un atribut de stil: style="color:red;", care setează culoarea textului inclus în roșu.
De asemenea, merită menționat că elementele div și p sunt blocuri, elementul div poate conține orice alte elemente, iar elementul p - doar elemente inline. Spre deosebire de acestea, elementul span este inline, adică își integrează conținutul într-un container extern - același div sau paragraf. Totuși, nu ar trebui să plasăm elemente de bloc într-un element inline span.