Belajar Elemen Block dan Inline di HTML

Dalam HTML, elemen-elemen dibagi menjadi dua kategori utama, yaitu elemen block dan inline. Perbedaan keduanya terletak pada cara mereka ditampilkan dan menempati ruang di dalam halaman web.

ELEMEN BLOCK

Elemen block adalah elemen HTML yang selalu dimulai pada baris baru dan menempati seluruh lebar container induknya. 

Karakteristik Elemen Block

  • Setiap elemen block akan memulai baris baru saat ditampilkan di halaman.
  • Elemen block akan mengambil penuh container induk, kecuali jika diberi gaya CSS yang berbeda.
  • Membuat jarak antar elemen dimana secara default, browser akan menambahkan jarak (margin) di atas dan di bawah elemen block.

Contoh Elemen Block

  • <div> : Elemen yang paling umun dan digunakan sebagai pembungkus konten dan mengatur tata letak
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Digunakan untuk judul atau heading pada halaman.
  • <p> : Digunakan untuk membuat paragraf teks.
  • <ol>, <ul> :  Digunakan untuk membuat daftar yang bernomor / orderedlist (ol), atau daftar yang tidak bernomor / unorderedlist (ul).
  • <form> : Digunakan untuk membuat formulir.
  • <table> : Digunakan untuk membuat tabel.
  • Dan masih banyak lagi...

Contoh Penggunaan

Hasilnya

Dari contoh diatas bisa dilihat jika elemen <div> merupakan elemen pembungkus elemen-elemen di dalamnya (h1, p, ul). Dan elemen-elemen tersebut secara otomatis memulai baris baru dan memenuhi semua container induk. Dan secara default, browser akan memberikan jarak (margin) di atas dan di bawah elemen block.

ELEMEN INLINE

Elemen Inline adalah elemen HTML yang tidak memulai baris baru dan hanya menempati ruang yang dibutuhkan oleh kontennya. Berbeda dengan elemen block yang selalu dimulai pada baris baru dan mengambil lebar penuh container induknya, elemen inline lebih fleksibel dan sering digunakan untuk menambahkan detail atau gaya pada teks.

Karakteristik Elemen Inline

  • Elemen Inline tidak memulai baris baru dan akan ditempatkan di samping elemen lainnya dalam satu baris.
  • Elemen Inline hanya mengambil lebar yang diperlukan sesuai konten untuk menamilkan kontennya.
  • Elemen Inline sering digunakan untuk membuat gaya teks. Seperti membuat teks menjadi tebal, miring, atau menambahkan tautan

Contoh Elemen Inline

  • <span> : Elemen generik untuk membungkus teks dan menerapkan gaya.
  • <a> : Elemen untuk membuat tautan (hyperlink).
  • <b> :  Elemen untuk membuat teks menjadi tebal.
  • <i> :  Elemen untuk membuat teks menjadi miring.
  • <u> : Elemen untuk membuat teks bergaris bawah.
  • <img> :  Elemen untuk menyisipkan gambar.
  • <input> :  Elemen untuk membuat input formulir (teks, tombol, checkbox, dll).
  • <button> :  Elemen untuk membuat tombol.

Contoh Penggunaan

Hasilnya

Dari contoh di atas kita bisa melihat jika Elemen Inline sangat berbeda dengan elemen block. Elemen Inline tidak memulai baris baru dan hanya menempati ruang kosong yang dibutuhkan oleh kontennya.

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar CSS Dasar

Gambar
APA ITU CSS? Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari sebuah halaman web. Jika kita membandingkan pembuatan sebuah website dengan membangun rumah, maka HTML adalah kerangka dan struktur dasar rumah tersebut. Sedangkan CSS adalah cat, perabotan, dan dekorasi yang membuat rumah tersebut menjadi lebih tertata rapih dan indah. Fungsi CSS Berikut beberapa fungsi CSS: CSS memungkinkan kita untuk memisahkan konten (HTML) dari tampilan (CSS). Hal ini dapat membuat kode lebih teroganisir, mudah dipelihara, dan dapat digunakan kembali. CSS dapat membuat tampilan lebih konsisten dengan menerapkan gaya yang sama ke seluruh elemen pada halaman web. CSS dapat membuat halaman website lebih responsiif dimana dapat menyesuaikan tampilannya secara otomatis berdasarkan ukuran layar perangkat. CSS yang ditulis dengan baik dan benar dapat meningkatkan kecepatan dalam loading halaman website. Struktur CSS  Selektor: Menentukan elemen HTML mana yang ...
Baca selengkapnya

Konfigurasi 3 MikroTik di Virtual Box

Gambar
Konfigurasi 3 MikroTik di Virtual Box Berikut contoh langkah sederhana membuat konfigurasi 3 MikroTik di Virtual Box: 1. Buat 3 MikroTik di Virtual Box 2. Pilih MIKROTIK_R1 lalu setting Adapter 1 menjadi Bridged Adapter 3. Setting Adapter 2 di MIKROTIK_R1 menjadi Internal Network  dan beri nama Lan1 4. Setting Adapter 3 di MIKROTIK_R1 menjadi Internal Network dan beri nama Lan2 5. Pilih MIKROTIK_R2 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan1 6. Pilih MIKROTIK_R3 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan2 7. Jalankan  MIKROTIK_R1  kemudian masuk ke system identity dan setting nama menjadi router_1 8. Masuk ke interface lalu setting ether1 menjadi eth1_ISP 9. Setting ether2 menjadi eth2_R2 10. Setting ether3  menjadi eth3_R3 11. Masuk ke ip address dan tambahkan ip address ke eth1_ISP 12. Ping gateway 13. Masuk ke ip route lalu tambahkan dst-address 14. Ping 8.8.8.8 15. Ping detik.com      Belum tersa...
Baca selengkapnya

Belajar Link, Relative dan Absolute URL, Bookmark di HTML

Gambar
Pernakah anda memperhatikan bagaimana ketika anda mengklik sebuah kata atau gambar, anda langsung berpindah ke halaman lain? Di balik itu semua, ada yang namanya link. Artikel ini akan membahas tentang apa itu link dan juga jenis-jenis link dalam HTML; Relative URL, Absolute URL, dan Bookmark. APA ITU LINK DALAM HTML? Link atau hyperlink adalah elemen dasar dalam HTML yang berfungsi untuk menghubungkan satu halaman web ke halaman web yang lain, gambar, dokumen, atau bahkan ke bagian tertentu halaman yang sama. Ketika pengguna mengklik sebuah link, browser akan secara otomatis mengarahkan pengguna ke halaman tujuan yang telah di tentukan. ELEMEN LINK DALAM HTML Elemen link dalam HTML didefinisikan menggunakan tag <a> . Atribut utama dalam tag <a>  adalah: href : Menentukan alamat URL (Uniform Resource Locator) dari halaman tujuan. target : Menentukan dimana halaman tujuan akan dibuka (di tab baru atau frame). RELATIVE DAN ABSOLUTE URL DALAM HTML URL (Uniform Resource Loc...
Baca selengkapnya