Tutorial HTML/CSS 22 : Cara Menggunakan Elemen Inline pada HTML (Div dan Span)

Last Updated on August 11, 2021 by

Anda mungkin pernah mendengar istilah inline style HTML ketika bekerja dengan HTML. Setiap elemen HTML memiliki sebuah display value, berdasarkan jenis dari elemen tersebut. Ada dua jenis display value yaitu block dan inline.

Pada seri tutorial HTML/CSS kali ini kita akan membahas tentang display value yang ada di HTML yaitu block dan inline. Kami juga akan menjelaskan kepada Anda cara menggunakan elemen inline pada HTML seperti div dan span serta contoh penggunaannya. Jika Anda tertarik, simak terus artikel ini sampai akhir.

Perbedaan Block dan Inline Style HTML

Berdasarkan bagaimana cara mereka menampilkan dengan browser secara default, elemen HTML dibedakan menjadi 2 kelompok yaitu, inline style HTML dan elemen block-level. Ketika elemen block dipindahkan ke sebuah baris yang baru atau “new line” dan mengambil lebarnya secara keseluruhan, elemen inline akan tetap berada pada garis di mana mereka dimasukkan dan Anda tidak perlu mengambil lebih banyak ruang daripada yang dibutuhkan untuk kontennya.

Contoh elemen inline yang baik adalah elemen pemformatan teks, seperti <em> atau <strong>. Elemen-elemen tersebut hanya perlu mempengaruhi tampilan teks. Sementara itu, judul dan paragraf HTML adalah elemen blok, karena membantu membuat struktur halaman.

Elemen Block dan Contohnya

Elemen blok adalah elemen yang selalu dimulai dengan baris baru, mengambil semua lebar situs web yang tersedia dan ditampilkan dalam kolom. Elemen ini adalah nilai default untuk sekelompok elemen yang akan kita tinjau di bagian ini.

<div> digunakan untuk menentukan area untuk elemen lain di situs web. Itu tidak memerlukan atribut apa pun, tetapi sering kali menyertakan id, kelas, atau style:

<div style="background-color: lightblue;">
  Selamat Belajar HTML/CSS
</div>
<div style="background-color: black;">
  Codekey
</div>

Judul HTML adalah elemen blok yang didefinisikan oleh tag <h1>–<h6>:

<h1>JUDUL</h1>
<h2>Sub Judul</h2>

Meskipun mungkin terlihat seperti elemen sebaris HTML saat pendek, paragraf juga merupakan elemen blok dalam HTML. Mereka didefinisikan oleh tag <p>:

<p>Kalimat 1</p>
<p>Kalimat 2</p>

Elemen blok lainnya adalah formulir HTML untuk input pengguna, yang didefinisikan dalam tag <form>:

form>
  <input type="text" />
  <input type="submit" value="Submit" />
</form>
<form>
  <input type="text" />
  Form ini berada di bawah dari form pertama
  <input type="submit" value="Submit" />
</form>

Mendefinisikan Elemen Inline Style HTML

Elemen inline HTML tidak dimulai dengan baris baru. Mereka juga hanya mengambil ruang sebanyak konten mereka. Beberapa dari mereka akan ditampilkan berdampingan di halaman.

Para pemula dalam bahasa pemrograman sering bingung tentang <span> vs. <div>. Sebenarnya, <span> setara dengan elemen <div>, tetapi pada level inline akan dibuat seperti ini:

<p><span style="background-color: lightblue;">Selamat Belajar</span>HTML/CSS</p>

Tautan HTML juga merupakan elemen inline. Tautan atau link ini ditambahkan menggunakan sepasang tag <a> (atau anchor):

<p>Belajar bersama <a href="https://www.codekey.id">Codekey</a></p>

Gambar HTML tetap sejalan juga. Untuk menambahkannya, gunakan satu tag <img> (Anda tidak perlu menutupnya karena ini adalah elemen kosong):

<img src="cat.png" alt="Cute Cat" width="250" height="250">

Demikianlah penjelasan tentang HTML Block dan Inline. Peluang untuk menata elemen inline HTML dengan CSS agak terbatas. Namun, Anda dapat mengatur tinggi, lebar, margin, padding, dan lainnya untuk elemen blok.

Elemen HTML juga hanya datang sebagai elemen blok atau inline secara default. Namun, di CSS, properti tampilan juga menerima nilai block inline. Elemen tersebut tetap berada di baris yang dimasukkan, tetapi dapat ditata seperti elemen blok.

Jika Anda tertarik untuk belajar tentang HTML/CSS lebih banyak lagi, pastikan Anda menyimak materi-materi dari Codekey. Situs https://codekey.id/ adalah situs untuk belajar berbagai bahasa pemrograman, tidak hanya terbatas pada HTML dan CSS aja.

Kami memberikan pembahasan, tutorial, tips, dan trik yang dapat membantu developer dan programmer, khususnya yang masih pemula untuk belajar bahasa pemrograman.