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:

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:

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.