Linijski i blok elementi : Inline and block elements

HTML linijski elementi : Inline elements

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" />
  </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> = r<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.

Web dizajn i blok elementi

HTML blok elementi : Blok elements

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" />
  </head>
  <body>
    <h1>HTML blok elementi</h1>
    <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.