Halo teman-teman,
Setelah sebelumnya kita bahas tentang list HTML, sekarang kita akan bahas hal yang sering bikin bingung waktu mulai menyusun layout halaman, yaitu perbedaan antara elemen block dan inline.
Ini penting karena jenis elemen ini akan memengaruhi bagaimana konten ditampilkan di halaman web. Yuk, kita bahas satu per satu dengan contoh-contoh nyata supaya kamu bisa langsung membedakannya.
Apa Itu Elemen Block?
Elemen block (blok) adalah elemen yang selalu mulai dari baris baru dan mengambil lebar penuh halaman secara default. Artinya, satu elemen block akan “mendorong” elemen lain ke bawahnya.
Contoh elemen block:
-
<h1>sampai<h6>(heading) -
<p>(paragraf) -
<div>(wadah/blok umum) -
<table>(tabel) -
<form> -
<section>,<article>
Contoh penggunaan:
<h1>Judul Besar</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini paragraf kedua.</p>
Setiap elemen block akan tampil di baris terpisah dan memanjang dari kiri ke kanan.
Apa Itu Elemen Inline?
Sebaliknya, elemen inline tidak memulai baris baru dan hanya mengambil ruang sesuai kebutuhan. Elemen ini berada dalam alur teks yang sama.
Contoh elemen inline:
-
<a>(tautan) -
<span> -
<img>(gambar) -
<strong>,<em> -
<button>
Contoh penggunaan:
<p>Teks ini punya <a href="#">tautan</a> dan <strong>penekanan</strong>.</p>
Semua elemen inline tersebut berada dalam satu baris dan tidak menyebabkan baris baru.
Perbedaan Visual: Block vs Inline
Bayangkan kamu punya kotak besar dan kotak kecil. Elemen block itu seperti kotak besar yang otomatis mengisi satu baris penuh. Sementara elemen inline itu kotak kecil yang bisa berdampingan dalam satu baris.
Contoh nyata:
<h2>Judul (Block)</h2>
<p>Paragraf (Block)</p>
<a href="#">Link (Inline)</a>
<img src="foto.jpg" alt="Gambar" width="100">
Elemen heading dan paragraf akan tampil terpisah di baris berbeda. Sedangkan link dan gambar bisa saling berdampingan dalam satu baris.
Kenapa Ini Penting?
Dengan memahami tipe display ini, kamu bisa menyusun elemen secara lebih rapi dan sesuai kebutuhan desain. Misalnya:
-
Pakai block untuk struktur utama layout (seksi, paragraf, header)
-
Pakai inline untuk konten kecil di dalam paragraf atau teks
Dan kalau kamu ingin mengubah perilaku ini, kamu bisa gunakan CSS seperti:
div {
display: inline;
}
atau
span {
display: block;
}
Tapi sebelum utak-atik CSS, penting banget buat tahu dulu dasar jenis elemen ini.
Kalau kamu masih bingung atau punya contoh yang menarik soal elemen block dan inline, langsung tulis aja di komentar ya. Kita bahas bareng!
Di materi selanjutnya, kita akan belajar tentang class di HTML—cara menandai elemen supaya bisa diberi gaya tertentu dengan CSS. Sampai ketemu di tutorial berikutnya!
Komentar
Posting Komentar