Perbedaan elemen Block dan Inline

Tag pada html mempunyai sifat yang otomatis ikut saat digunakan, salah satunya sifat block dan sifat inline yang berasal dari atribut display. Kali ini kita akan lihat perbedaan apa itu elemen block dan apa itu elemen inline.

Apa itu block dan inline?

Perhatikan tampilan HTML berikut:

Apa itu elemen level block?

• Elemen jenis ini memiliki width (lebar) yang sama dengan ukuran browser
• Block element selalu membuat baris baru
• Contoh block element yaitu tag paragraf dan tag header
• Lihat kembali gambar sebelumnya, background pada header memiliki lebar selebar halaman browser

Lalu apa itu inline element?

• Elemen jenis ini memiliki width (lebar) sebesar konten yang ada
• Sesuai namanya element ini akan tersusun dalam bentuk baris karena tidak otomatis membuat baris baru
• Contoh tag yang termasuk elemen inline adalah tag anchor
• Silahkan lihat kembali gambar sebelumnya, link anchor bertuliskan Home, Product, Contact dan About tersusun menyamping tidak kebawah

Berikut adalah code yang menghasilkan tampilan seperti sebelumnya:

<h2>Perbedaan Block dan Inline</h2>
<h3 style="background-color:darkorange;">Tag Header termasuk elemen block</h3>
<a href="#" style="background-color:tomato;">Home</a>
<a href="#" style="background-color:darkkhaki;">Product</a>
<a href="#" style="background-color:yellowgreen;">Contact Us</a>
<a href="#" style="background-color:turquoise;">About</a>
<p style="background-color:darkgrey;">Tag paragraf juga termasuk elemen block</p>

Tag div

• Tag div tergolong block element
• Tag <div> sering digunakan untuk membentuk divisi
• Atau untuk mengelompokkan tag pada HTML agar lebih terorganisir dan rapih
• <div> biasa digunakan untuk memisahkan layout seperti layout untuk header, layout bagian content, layout untuk bagian sidebar dan layout untuk footer
• Tidak ada perubahan pada halaman HTML kita, karena tag <div> digunakan untuk membantu mengorganisir kode, kecuali anda menambahkan atribut style pada tag <div>

<div id="header">
    <h1>Belajar Dasar Dasar HTML</h1>
    <h2>Perbedaan elemen block dan inline</h2>
</div>

<div id="sidebar">
   <h2>Daftar Artikel</h2>
   <hr>
   <a href="#">Pengenalan HTML</a>
   <a href="#">Elemen HTML</a>
   <a href="#">Atribut pada HTML</a>
</div>

NOTE:

• Pada HTML 5 kita bisa menggunakan tag <header></header> alih alih menggunakan tag <div>
• begitu juga untuk footer sudah ada tag <footer></footer>
• untuk navigasi ada <nav></nav>
• Sidebar bisa menggunakan <aside></aside>
• dengan begitu code dapat terlihat lebih ringkas dan rapih

Tag span

• Tag <span> tergolong dalam inline element
• Tag ini digunakan untuk mengelompokkan tulisan dalam suatu baris
• Contoh kegunaan span, yaitu biasa digunakan untuk menambahkan style ke tulisan tertentu pada suatu paragraf

<p>Laut itu berwarna <span style="color:blue;">Biru</span></p>
<p>Bunga itu berwarna <span style="color: hotpink;">Pink</span></p>

Berikut hasilnya: