cloud-hosting-terbaik-indonesia

Tutorial Text HTML Part 1: Perbedaan Block Element dengan Inline Element tag HTML

Posted on

Sebelum membahas tag-tag yang berkaitan dengan text, pada panduan ini saya ingin menjelaskan mengenai 2 jenis tipe unsur atau 2 jenis tipe tag di pada HTML, yakni block element dan inline element serta perbedaan keduanya.

Di pada HTML, seluruh text atau ‘isi’ halaman web mesti berada di pada atau diantara tag pembuka dan penutup HTML. Tag-tag di pada HTML dapat dibagi menjadi 2 bagian, yakni tag berjenis block, dan tag berjenis inline. Di pada panduan text HTML: Perbedaan block element dengan inline element HTML ini kita akan membahas perbedaan keduanya.

Di dasarnya, seluruh tag pada HTML dibedakan menjadi 2 jenis: tag bertipe block element dan tag dengan tipe inline element. Perbedaan keduanya terletak pada cara web browser menampilkan tag ini.


Pengertian Blok Level Element pada Tag HTML

Tag dengan tipe block level element, bertujuan bagi membagi halaman HTML menjadi bagian yang terpisah, atau menjadi ‘blok’. Contoh dari blok unsur ini ialah tag paragraf (<p>), list (<ol> atau <ul>), dan heading (<h1> s/d <h6>). Block element akan ditampilkan terpisah dari seluruh tag sebelum dan sesudahnya.

Web browser secara default akan menampilkan blok level unsur secara terpisah seolah-olah pada sebuah ‘kotak’ dan dimulai di baris baru (tak mengikuti tag sebelumnya). Dan biasanya pun mempunyai jarak spasi dari tag sebelum dan tag sesudahnya.

Berikut ialah contoh tag <p>, <h2>, dan <ol> di pada HTML:

 Dari contoh tersebut terlihat bahwa masing-masing tag akan ditampilkan di baris baru dan berjarak dari tag sebelumnya.


Pengertian Inline Level Element pada Tag HTML

Berbeda dengan block level element, tag dengan tipe inline level unsurt akan ‘menyatu’ dengan tag sebelum dan sesudahnya. Tag ini tak akan memulai blok atau baris baru namun akan tetap berada di pada blok tersebut. Tag inline pun tak akan ditampilkan dengan jarak dari tag sebelum dan sesudahnya. Contoh dari tag inline ini ialah: <em>, <i>,<strong> dan <b>.

Berikut ialah contoh dari halaman HTML kita sebelumnya, namun seluruh tag diganti dengan tag inline seperti <em>, <i>, dan <b>:

 Terlepas dari tampilan text yang diprint tebal atau miring, inline unsur ialah jenis tag yang mengikuti alur dari tag HTML yang terdapat.

Tampilan yang menjadi perbedaan block unsur dengan inline unsur tidaklah mutlak. Dengan menggunakan CSS, kita dapat merubah tampilan block unsurseolah-olah’ menjadi inline unsur dan sebaliknya. Namun karena tujuan HTML bukanlah bagi tampilan, melainkan bagi merancang struktur halaman web, kita sebaiknya tak berfokus di pada tampilan, namun di pada struktur. Bagi menangani tampilan dari web, sebaiknya menggunakan CSS.


Sumber https://www.duniailkom.com/