Mengenal Perbedaan Elemen Block dan Inline Dalam HTML - Beberapa hari yang lalu, saya pernah membahas tentang penggunaan tag Div dalam sebuah HTML, dan pada artikel ini saya akan membahas tentang level elemen seperti halnya tag Div, bukan hanya tag Div tapi beberapa unsur elemen seperti Span, Form, Input, dan lain-lain yang merupakan bagian dari komposisi sebuah elemen dan mungkin memiliki fungsi yang sama dalam elemen tersebut. Dan semua komposisi elemen tersebut nantinya akan kita sebut sebagai level elemen yang terbagi dalam Block dan Inline
Penggunaan Block dan Inline dalam HTML hampir sering kita temukan dalam setiap template blog. Dan setiap penggunaan block dan inline dalam HTML tersebut tentu memiliki perbedaan fungsi dan letak dan hal ini juga disesuaikan dengan pengaturan yang diberikan dalam kode CSS dari kedua elemen ini, Block dan Inline. Untuk inilah, sebelumnya saya membahas tentang penggunaan tag div dalam template blog. Silahkan baca artikel tersebut di Penggunaan Tag Div
Lalu, apa saja perbedaan antara Block dan Inline dalam HTML? Inilah hasil pantau saya, jika ada yang salah dari perbedaan ini, mohon koreksinya...
Penggunaan Block dan Inline dalam HTML hampir sering kita temukan dalam setiap template blog. Dan setiap penggunaan block dan inline dalam HTML tersebut tentu memiliki perbedaan fungsi dan letak dan hal ini juga disesuaikan dengan pengaturan yang diberikan dalam kode CSS dari kedua elemen ini, Block dan Inline. Untuk inilah, sebelumnya saya membahas tentang penggunaan tag div dalam template blog. Silahkan baca artikel tersebut di Penggunaan Tag Div
Lalu, apa saja perbedaan antara Block dan Inline dalam HTML? Inilah hasil pantau saya, jika ada yang salah dari perbedaan ini, mohon koreksinya...
- Karakteristik Elemen Blok meliputi:
- Dalam penulisan HTML, selalu dimulai pada baris baru
- Dalam pengaturan CSS untuk tinggi, line-height, margin atas dan margin bawah dapat dimanipulasi atau diatur
sesuai keinginan
Default lebar 100% dari elemen tersebut, bisa ditentukan sesuai dengan yang diinginkan
Contoh Elemen Blok antara lain: <div>, <p>, <h1>, <form>, <ul> dan <li>
Coba perhatikan dari kedua contoh elemen tersebut. Bagaimana cara penulisan yang kita lakukan terhadap div, p dan h1? Meskipun kita menulisnya sejajar maka hasil akhirnya adalah akan membentuk baris baru
Meskipun memiliki karakteristik yang berbeda, namun keduanya masih bisa diubah, yaitu penulisan untuk penulisan elemen Block bisa menjadi elemen Inline dengan cara mengubah status tampilan mereka yaitu dengan cara menggunakandisplay: inline atau display: block
Dengan merubah status elemen tersebut maka karakteristik keduanya bisa diatur sesuai keinginan dan dalam hal ini, perbedaan yang saya tulis diatas sudah tidak ada lagi diantara kedua elemen ini, Block dan Inline
- Karakteristik Elemen Inline meliputi:
- Dalam penulisan HTML, bisa dilakukan pada baris yang sama
- Dalam pengaturan CSS untuk tinggi, line-height, margin atas dan margin bawah tidak dapat diubah
- Default lebar 100% dari elemen tersebut, tidak bisa dimanipulasi
- Contoh Elemen Inline antara lain: <span>, <a>, <label>, <input>, <img>, <strong> dan <em>
Coba perhatikan dari kedua contoh elemen tersebut. Bagaimana cara penulisan yang kita lakukan terhadap div, p dan h1? Meskipun kita menulisnya sejajar maka hasil akhirnya adalah akan membentuk baris baru
Meskipun memiliki karakteristik yang berbeda, namun keduanya masih bisa diubah, yaitu penulisan untuk penulisan elemen Block bisa menjadi elemen Inline dengan cara mengubah status tampilan mereka yaitu dengan cara menggunakandisplay: inline atau display: block
Dengan merubah status elemen tersebut maka karakteristik keduanya bisa diatur sesuai keinginan dan dalam hal ini, perbedaan yang saya tulis diatas sudah tidak ada lagi diantara kedua elemen ini, Block dan Inline
Sumber : www.panduantemplateblog.com
