Belajar Koding html Bagian 13: Block & Inline

Elemen block adalah elemen yang secara otomatis menempati seluruh lebar halaman web, meskipun kontennya tidak penuh. Ini membuat setiap elemen block dimulai dari baris baru di bawah elemen sebelumnya. Jadi, kalau kamu menggunakan elemen block seperti <div>, <h1> atau <p>, mereka akan selalu tampil dari baris baru. Kamu akan sering menggunakan elemen block untuk membuat bagian utama layout seperti header, footer, dan paragraf.

Berbeda dari elemen block, elemen inline hanya menempati lebar yang dibutuhkan oleh kontennya. Elemen ini tidak memulai baris baru seperti elemen block, melainkan tampil bersebelahan dengan elemen lain dalam satu baris. Contoh umum elemen inline adalah tag <span>, <a>, dan <img>.

Perbedaan Utama antara Elemen Block dan Inline

Sekarang setelah kamu memahami pengertian elemen block dan inline, mari kita rangkum beberapa perbedaan utama antara keduanya:

• Elemen block menempati seluruh lebar halaman, sementara elemen inline hanya menempati lebar kontennya.
• Elemen block memulai baris baru, sedangkan elemen inline tidak.
• Elemen block sering digunakan untuk membangun layout halaman, sedangkan elemen inline digunakan untuk elemen kecil dalam teks.

Dalam HTML, elemen dibagi menjadi dua kategori utama berdasarkan perilaku tampilannya: elemen blok (block-level elements) dan elemen sebaris (inline elements).

Elemen Blok (Block-level Elements):

• Karakteristik:
• Selalu dimulai pada baris baru.
• Mengambil lebar penuh dari elemen induknya, sehingga tidak ada elemen lain yang dapat berada di sampingnya pada baris yang sama.
• Dapat berisi elemen blok lain atau elemen sebaris.

 

• Contoh Elemen Blok:
• <div>: Digunakan untuk membagi atau mengelompokkan konten.
• <p>: Mewakili paragraf teks.
• <h1> hingga <h6>: Mewakili judul dengan tingkat kepentingan yang berbeda.
• <ul> dan <ol>: Mewakili daftar tidak berurutan dan berurutan.

Contoh:

<div>

  <h1>Judul Utama</h1>

  <p>Ini adalah paragraf pertama.</p>

  <p>Ini adalah paragraf kedua.</p>

</div>

Tampilan Hasil (Output) Block-level Elements

Elemen Sebaris (Inline Elements):

• Karakteristik:
• Tidak memulai baris baru; mereka berada dalam baris yang sama dengan konten sekitarnya.
• Hanya mengambil lebar yang diperlukan oleh kontennya.
• Biasanya digunakan untuk membungkus bagian kecil dari konten, seperti kata atau frasa, untuk tujuan styling atau interaksi.

 

• Contoh Elemen Sebaris:
• <span>: Digunakan untuk membungkus teks atau elemen lain untuk tujuan styling.
• <a>: Mewakili hyperlink.
• <strong> dan <em>: Digunakan untuk menekankan teks dengan penekanan kuat atau miring.
• <img>: Menyisipkan gambar ke dalam teks.

Contoh:

<p>Ini adalah sebuah paragraf dengan <a href="#">tautan</a> dan <strong>teks tebal</strong>.</p>

Tampilan Hasil (Output) Inline Elements

Perbedaan Utama antara Elemen Blok dan Sebaris:

• Tampilan: Elemen blok dimulai pada baris baru dan mengambil lebar penuh, sedangkan elemen sebaris tetap dalam baris yang sama dan hanya mengambil lebar sesuai kebutuhan kontennya.
• Konten yang Dapat Dimasukkan: Elemen blok dapat berisi elemen blok lain dan elemen sebaris, sementara elemen sebaris biasanya hanya berisi elemen sebaris lain atau teks.

Memahami perbedaan antara elemen blok dan sebaris penting untuk mengatur struktur dan tata letak halaman web Anda dengan benar. Dengan menggunakan elemen-elemen ini sesuai fungsinya, Anda dapat memastikan konten ditampilkan dengan cara yang diinginkan dan meningkatkan keterbacaan serta aksesibilitas situs web Anda.

REFERENSI

• W3Schools
• GeeksforGeeks

 

Share this post