Perbedaan elemen block dan inline

Ada istilah elemen block dan elemen inline di HTML. Perbedaannya adalah elemen block akan muncul di bawah elemen sebelumnya, sementara elemen inline akan muncul di samping elemen sebelumnya.

Apa itu elemen block?

Elemen block berarti sebuah elemen yang punya lebar 100% dari pembungkusnya. Contoh dari elemen bersifat block adalah tag <p>.

Contoh

<p>Saya paragraf pertama.</p>
<p>Saya paragraf kedua.</p>

Hasilnya:

Saya paragraf pertama.

Saya paragraf kedua.

Tulisan paragraf pertama dan kedua, punya jarak, tidak langsung di sampingnya.

Contoh tag block

Beberapa contoh tag yang bersifat block

p
h1, h2, h3, h4, h5, h6
ol, ul
pre
address
blockquote
dl
div
fieldset
form
hr
noscript
table

Apa itu elemen inline?

Elemen inline berarti sebuah elemen hanya selebar dirinya sendiri. Sehingga elemen berikutnya berada ada di samping elemennya

Contoh

<b>Saya tag bold.</b>
<i>Saya tag italic.</i>

Hasilnya:

Saya tag bold.Saya tag italic.

Tulisan tag satu dan dua berada di baris yang sama. Berbeda dengan elemen `block`.

Contoh tag inline

Beberapa tag yang bersifat inline

b, big, i, small
a, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

Menggunakan div dan span

Kegunaan tag div dan tag span juga terletak pada sifat ini. Di mana div adalah elemen block, sementara span adalah elemen inline.

Jadi, pada saat kamu butuh sebuah baris baru atau melanjutkan baris sebelumnya, tinggal memilih diantara kedua elemen ini.