Elemente HTML Bloc și Inline
Fiecare element HTML are o valoare implicită de afișare (display), în funcție de tipul elementului. Cele mai comune două valori de afișare sunt block și inline.
Elemente de Tip Bloc
Un element de tip bloc începe întotdeauna pe o linie nouă, iar browserul adaugă puțin spațiu (o margine) înainte și după el. De asemenea, ocupă toată lățimea disponibilă, întinzându-se cât mai mult la stânga și la dreapta posibil. Două elemente bloc comune sunt <p> (un paragraf) și <div> (o secțiune).
Elementele de tip bloc includ: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> și <video>.
Exemplu
Un paragraf și un div, ambele de tip bloc.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemente Bloc</title>
</head>
<body>
<p>Salut Lume</p>
<div>Salut Lume</div>
</body>
</html>
Elemente Inline
Un element inline nu începe pe o linie nouă și ocupă doar atâta lățime cât are nevoie. Unul comun este <span>.
Elementele inline includ: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> și <var>.
Notă: Un element inline nu poate conține un element de tip bloc.
Exemplu
Un span, care este un element inline.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Inline</title>
</head>
<body>
<span>Salut Lume</span>
</body>
</html>
Elementul <div>
Elementul <div> este adesea folosit ca un container pentru alte elemente. Nu are atribute obligatorii, dar style, class și id sunt comune. Cu CSS, poate stiliza blocuri întregi de conținut.
Exemplu
Un container <div> stilizat.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Stilizat</title>
</head>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>Londra</h2>
<p>Londra este capitala Angliei. Este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.</p>
</div>
</body>
</html>
Elementul <span>
Elementul <span> este un container inline folosit pentru a marca o parte dintr-un text sau document. Nu are atribute obligatorii, dar style, class și id sunt comune. Cu CSS, poate stiliza părți din text.
Exemplu
<span> folosit pentru a colora cuvinte dintr-o propoziție.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Stilizat</title>
</head>
<body>
<p>Mama mea are ochii <span style="color:blue;font-weight:bold;">albaștri</span>, iar tatăl meu are ochii <span style="color:darkolivegreen;font-weight:bold;">verde închis</span>.</p>
</body>
</html>
Rezumatul Capitolului
Pe scurt: un element de tip bloc începe pe o linie nouă și ocupă toată lățimea, în timp ce un element inline nu începe pe o linie nouă și ocupă doar atâta lățime cât are nevoie. Elementul <div> este de tip bloc și adesea folosit ca un container, iar elementul <span> este un container inline pentru a marca o parte dintr-un text.