Blok HTML


Tampilan default elemen atau tag dalam HTML sebenarnya dibagi menjadi dua jenis, yakni elemen dengan jenis inline (inline elemen) dan elemen dengan jenis blok (block element). Blok yang dimaksud di sini merupakan kotak


Elemen Inline HTML


Blok dari elemen jenis inline dimulai dari elemen itu sendiri dengan lebar sesuai dengan lebar kontennya. Elemen dengan jenis inline akan berada satu blok dengan elemen sebelum atau sesudahnya dan tidak membuat sebuah blok atau baris baru. Salah satu tag inline yang sering digunakan adalah <span>

<p style="border: 2px solid orange; padding: 5px;">
   Mawar itu biru. 
   <span style="border: 2px solid orange;"> Violet itu merah.</span> 
   Aku harus ke kamar mandi.
</p>

Mawar itu biru. Violet itu merah. Aku harus ke kamar mandi.


Elemen Block HTML


Sedangkan elemen dengan jenis blok (block) akan memulai bloknya dari baris baru dan lebarnya penuh, artinya akan membentang dari kiri ke kanan sejauh lebar yang tersedia. Salah satu tag block yang sering digunakan adalah <div>.

<div style="border: 2px solid orange; padding: 5px;">Mawar itu biru. 
  <p style="border: 2px solid orange;"> 
      Violet itu merah. 
      Aku harus ke kamar mandi.
  </p>
</div>
Mawar itu biru.

Violet itu merah. Aku harus ke kamar mandi.