Razlikovanje linijskih i blok elemenata posebno je važno za vizualno oblikovanje web stranice. Linijski elementi nastavljaju se na prethodne, a blok zauzimaju cijelu širinu roditeljskog elementa.
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
Razlikovanje linijskih i blok elemenata posebno je važno za vizualno oblikovanje web stranice. Linijske elemente web preglednik smješta na prvo slobodno mjesto u roditeljskom elementu (u našem primjeru je to prozor web preglednika). Primjeri HTML linijskih elemenata su: <img>, <a>, <em>, <strong>, <big>, <small>...
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML linijski elementi</title>
</head>
<body>
<h1>HTML <strong>linijski<strong> elementi</h1>
<p>Odlomak teksta u kojem slijedi <em>nakošeni tekst</em>.,
a možemo umetnuti i kemijske spojeve H<sub>2</sub>O ili
matematičke formule x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>Također možemo umetnuti <a href="#">poveznice</a> ili slike</p>
</body>
</html>Možemo uočiti u ovom primjeru kako se unutar blok elemenata <h1> i <p>, nalaze linijski elementi: <strong>, <em>, <sub>, <sup>, <a>.
Vidljivo je također kako linijski elementi ne prekidaju tijek teksta na web stranici, nego se smještaju na prvo mjesto koje im je dostupno.
Blok elementi za razliku od linijskih uvijek počinju u novom retku. Primjer html blok elemenata su: <h1> do <h6>, <p>, <li>, <table>, <tr>, <hr />...
Blok element ne možemo umetnuti unutar linijskog elementa, dok linijski element možemo staviti unutar blok elementa.
Pogledajmo primjer u kojem se koriste blok elementi:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML blok elementi</title>
</head>
<body>
<h1>HTML blok elementi</h1>
<h2>Svi naslovi su blok elementi</h2>
<hr />
<p>Odlomak je kao i sve razine naslova blok element</p>
<br />
<h2>Simbolički i numerički popisi</h2>
<ul>
<li>Prvi redak simboličkog popisa</li>
<li>Drugi redak</li>
<li>Treći redak</li>
</ul>
<ol>
<li>Prvi redak numeričkog popisa</li>
<li>Svaka stavka...</li>
<li>...dolazi u novi redak</li>
</ul>
</body>
</html>
U ovom primjeru vidimo kako svi blok elementi počinju u novom retku i kako zauzimaju cijelu širinu roditeljskog elementa koji je u ovom primjeru cijeli prozor web preglednika.