Paragrafe HTML
Elementul <p> definește un paragraf, care este de obicei un bloc de text. Un paragraf începe întotdeauna pe o linie nouă, iar browserele adaugă puțin spațiu (o margine) înainte și după el.
Exemplu
Două paragrafe.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Două Paragrafe</title>
</head>
<body>
<p>Acesta este un paragraf.</p>
<p>Acesta este un alt paragraf.</p>
</body>
</html>
Afișarea HTML
Nu poți fi sigur exact cum va arăta HTML-ul. Dimensiuni diferite de ecran și ferestre redimensionate dau rezultate diferite. De asemenea, nu poți schimba afișarea adăugând spații suplimentare sau linii suplimentare în codul tău; browserul elimină orice spații și linii suplimentare atunci când afișează pagina.
Exemplu
Spațiile și întreruperile de linie suplimentare din sursă sunt comprimate de browser.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Afișare Spații</title>
</head>
<body>
<p>
Acest paragraf
conține multe linii
în codul sursă,
dar browserul
le ignoră.
</p>
<p>
Acest paragraf
conține multe spații
în codul sursă,
dar browserul
le ignoră.
</p>
</body>
</html>
Linii Orizontale HTML
Tag-ul <hr> definește o întrerupere tematică în pagină, de obicei afișată ca o linie orizontală. Este folosit pentru a separa conținutul sau pentru a marca o schimbare. <hr> este un tag gol, fără tag de închidere.
Exemplu
Linii orizontale care separă secțiuni de conținut.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linie Orizontală</title>
</head>
<body>
<h1>Acesta este titlul 1</h1>
<p>Acesta este un text.</p>
<hr>
<h2>Acesta este titlul 2</h2>
<p>Acesta este un alt text.</p>
<hr>
</body>
</html>
Întreruperi de Linie HTML
Elementul <br> creează o întrerupere de linie. Folosește-l atunci când vrei o linie nouă fără a începe un paragraf nou. <br> este un tag gol, fără tag de închidere.
Exemplu
Un paragraf cu întreruperi de linie create de <br>.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Întreruperi de Linie</title>
</head>
<body>
<p>Acesta este<br>un paragraf<br>cu întreruperi de linie.</p>
</body>
</html>
Problema Poeziei
Textul care depinde de întreruperi de linie și spațiere, precum o poezie, nu-și păstrează forma într-un paragraf normal. Browserul îl comprimă pe o singură linie.
Exemplu
O poezie într-un paragraf, afișată toată pe o singură linie.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Problema Poeziei</title>
</head>
<body>
<p>
Bonnie a mea zace peste ocean.
Bonnie a mea zace peste mare.
Bonnie a mea zace peste ocean.
Oh, adu-mi înapoi Bonnie a mea.
</p>
</body>
</html>
Soluția - Elementul HTML <pre>
Elementul <pre> definește text preformatat. Textul din interior se afișează cu un font de lățime fixă (de obicei Courier) și își păstrează atât spațiile, cât și întreruperile de linie, astfel încât o poezie se afișează corect.
Exemplu
Poezia în interiorul unui element <pre>, păstrându-și întreruperile de linie.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poezie Pre</title>
</head>
<body>
<pre>
Bonnie a mea zace peste ocean.
Bonnie a mea zace peste mare.
Bonnie a mea zace peste
ocean.
Oh, adu-mi înapoi Bonnie a mea.
</pre>
</body>
</html>