Pengertian Block dan Inline Elemen pada HTML

Ilmuit.id – pada saat belajar HTML anda pasti bertanya – tanya, kenapa saat membuat paragraf, heading, list, dll. Selalu membuat baris baru, dan tidak sejajar dengan tag sebelumnya. Tapi pada saat anda membuat dua buah tag <a> untuk membuat sebuah link, teks dari link tersebut akan sejajar ke samping.

Hal ini terjadi karena setiap elemen pada HTML memiliki tampilan default, yang mana ada dua nilai untuk tampilan elemen pada HTML yaitu Block dan Inline. Untuk itu, kali ini kita akan membahas tentang elemen Block dan elemen Inline pada HTML.

Elemen Block pada HTML

Elemen block merupakan elemen yang akan selalu berusaha untuk menempati lebar penuh yang tersedia, dan elemen block akan selalu membuat baris baru ketika di buat. Berikut ini beberapa elemen HTML yang termasuk kedalam elemen Block.

Pada daftar di atas terdapat tag <h1> sampai dengan <h6> dan tag <p>, yang mana merupakan daftar dari elemen Block pada HTML, ini-lah kenapa tag tersebut selalu membuat baris baru ketika pertama kali di buat, karena tag tersebut termasuk kedalam jenis elemen block.

Untuk melihat sejauh mana elemen block menempati setiap baris, anda dapat menggunakan css. Perhatikan contoh berikut untuk melihat-nya.

Pada kode di atas saya menggunakan internal css (cara menulis css dengan menggunakan tag <style> pada HTML). Pada kode css sendiri saya menggunakan property border yang berfungsi untuk memberi garis pada sekeliling isi dari sebuah elemen HTML. 

Pada kode css anda dapat melihat saya menulis h1 dan p, pada css ini disebut sebagai selector, dan didalam kurung kurawal merupakan tempat kita menuliskan style apa yang ingin kita berikan pada selector (h1 dan p).

Pada kode HTML, saya membuat dua buah elemen yaitu tag <h1> dan tag <p>. seperti yang anda lihat pada hasilnya di browser, tag <h1> dan tag <p> menempati satu baris penuh lebar layar browser.

Elemen block memiliki sifat lain yaitu kita dapat mengatur ukuran-nya (panjang dan lebar). Perhatikan contoh berikut.

Saya menggunakan kode yang sama seperti sebelumnya, saya hanya menambahkan 2 baris perintah pada kode css yaitu width: 500px dan height: 100px. Anda dapat melihat hasilnya pada browser, garis merah yang saya berikan sebelumnya membesar sesuai dengan ukuran yang saya berikan pada kode css.

Elemen Inline pada HTML

Elemen inline pada HTML tidak membuat baris baru ketika di buat, dan juga elemen inline hanya membutuhkan lebar yang diperlukan saja. Berikut beberapa daftar dari tag HTML yang merupakan elemen inline.

Sumber : w3school.com

Dari kode di atas, ada beberapa tag yang telah kita pelajari yaitu tag <a> dan tag <img>. Untuk itu kita akan melihat, seberapa besar daerah yang ditempati dari elemen inline, perhatikan contoh berikut ini.

Sama seperti sebelumnya, saya menggunakan property border pada kode css untuk melihat daerah yang ditempati oleh elemen inline. Pada kode HTML saya membuat dua buah tag yaitu tag <a> dan tag <img>.

Kemudian pada kode css saya men-selector tag <a> dan tag <img> pada HTML, kemudian saya menulis perintah border dengan ketentuan tebal 1px jenis border solid dengan warna merah.

Seperti yang anda lihat hasilnya pada browser, elemen inline hanya menempati ukuran dari isi elemen-nya. Contoh pada tag <a> link, hanya menempati area teks-nya saja. Dan untuk tag <img> hanya menempati ukuran dari gambar kita (pada contoh di atas, ukuran gambarnya 200px 150px).

Hal yang membuat elemen inline berbeda dari elemen block adalah kita tidak dapat merubah ukuran dari elemen inline. Sebenanya ada cara supaya kita dapat merubah ukuran elemen HTML yang memiliki jenis elemen inline, akan tetapi kita tidak membahasnya pada kesempatan kali ini, karena kita membutuhkan css untuk melakukan-nya.

Elemen <div> pada HTML

Tag <div> akan sering anda jumpai pada beberapa kode HTML, karena dengan menggunakan tag <div> anda dapat mengelompokan beberapa tag HTML. Tag <div> tidak memiliki atribut khusus, tetapi sering membutuhkan style, kelas, dan id.

Dengan mengelompokan tag HTML, akan memudahkan dalam memberikan style pada elemen HTML. Perhatikan contoh berikut ini.

Pada kode di atas, saya membuat sebuah tag <div> dengan kelas kelompok1 (class=”kelompok1”). Kemudian di dalam tag <div> tersebut saya membuat dua buah tag HTML yaitu tag <h1> dan tag <p>.

Kemudian pada kode css, saya men-selector kelompok1 (untuk men-selector kelas HTML, membutuhkan sebuah tititk ”.” sebelum nama kelas tersebut). Kemudian di dalam kurung kurawal, saya memberi perintah “color: salmon” artinya berikan warna salmon pada HTML yang memiliki kelas kelompok1.

Seperti yang anda lihat pada hasilnya di browser, isi dari tag <h1> dan tag <p> memiliki warna salmon. Ini-lah fungsi dari tag <div>, kita dapat memberi style pada banyak elemen HTML hanya dengan beberapa kode.

Jika anda tidak mengelompokan elemen HTML, anda akan menulis kode css yang sama berulang kali, yang tentu saja akan menyita banyak waktu.

Tag <div> sendiri merupakan elemen block, jadi jangan heran jika tag <div> akan membuat baris baru ketika di buat. Dan juga jangan lupa untuk memberikan kelas atau id pada tag <div> yang anda buat.

Jika div merupakan elemen block, HTML juga membuat sebuah wadah untuk elemen inline, yang tidak kalah berguna seperti div, berikut penjelasan nya.

Elemen <span> pada HTML

Elemen span merupakan sebuah wadah inline yang berfungsi untuk menandai sebagian dari sebuah teks, atau bagian dari sebuah dokumen.

Sama hal-nya seperti div, span tidak memiliki atribut khusus, tetapi sering membutuhkan style, kelas, dan id. Perhatikan contoh berikut bagaimana cara untuk menggunakan span.

Pada contoh di atas, saya tidak menggunakan internal css tetapi kali ini saya menggunakan inline css (menulis css didalam tag HTML).

Pada kode HTML saya membuat dua buah tag yaitu tag <h1> dan tag <p>. di dalam tag <p> saya menuliskan beberpa kata, kemudian menandai kata emas dan kata biru laut.

Untuk menandai-nya, saya menggunakan span dan kemudian membuat sebuah inline css dengan dua perintah. Perintah untuk kata emas yaitu : color: gold; font-weight: bold;. Arti dari perintah ini adalah berikan warna emas dan berikan bold (membuat teks tebal) pada kata emas.

Kemudian pada kata biru laut, sama persis seperti pada kata emas, yang berbeda hanya nilai dari perintah-nya saja yaitu : color: aquamarine; font-weight: bold;. Artinya adalah berikan warna aquamarine dan bold pada kata biru laut.

Sekian pembahasan kita mengenai elemen block dan elemen inline pada HTML, mohon maaf apalabila ada kesalahan pengertian dan kesalahan penulisan, semoga artikel ini bermanfaat untuk anda dan dapat membantu proses belajar anda, sampai jumpa pada pembahasan selanjutnya.- ilmuit.id

Reference: www.w3school.com

Writer: Rahmat Riski H