Block dan Inline Elemen pada HTML
Photo by Jackson Sophat on Unsplash
Tag HMTL pada dasarnya, sebelum kita melakukan modifiksi pada CSS memiliki pengaturan secara default (pengaturan bawaan) tergantung dari jenis tag yang kita gunakan. diantaranya ada yang bertipe block dan ada yang bertipe inline. untuk memahami perbedaan dari kedua tipe tersebut, simak penjelasan dibawah ini.
1. Block Element
Block element selalu di mulai dengan baris baru/alinea baru, dan mengambil space melebar secara keseluruhan mengikuti space yang kita berikan pada tag induknya. sehingga, jika kita membuat beberapa elemen yang bertipe ini, elemen akan saling bertumpuk (tidak bersebelahan). ini merupakan karakter dari block elemen.
Contoh dari block element:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <table>
- <tr>
- <p>
- <header>
- <article>
- dll
2. Inline Elemen
Inline Elemen kebalikan dari Block Elemen, elemen ini tidak dimulai dengan baris baru dan hanya mengambil space sesuai dengan isi konten yang kita tulis. contohnya jika kita menulis “nama saya budi”, maka lebar yang diambil oleh elemen ini berkisar selebar 14 huruf tersebut. sehingga, jika kita membuat beberapa elemen dengan tipe inline, maka elemen tersebut akang saling bersebelahan.
“ini contoh penggunaan inline elemen dengan formatting text”
Beberapa contoh Inline Elemen :
- <span>
- <a>
- <img>
- <u>, <i> , <b>, <strong>, <em>
- dll
Berikut penjelasan singkat mengenai kedua blok diatas, mudah-mudahan sedikit banyak memberikan gambaran mengenai Block dan Inline Elemen. Ok, Bagaimana kawan-kawan sudah nambah pemahamannya?
Dulu, waktu saya pertama kali mengetahui hal ini, langsung saya coba untuk melakukan perubahan di property display pada CSS. namun ternyata pilihan untuk display tidak hanya inline dan block saja, melainkan banyak sekali. anda bisa membacanya lebih lengkap disini.
yang akan saya jelaskan disini adalah perbedaan antara inline dan inline-block dan kapan kita menggunakannya. silakan kunjungi artikel ini :