Blok dan Inline HTML
Jika Anda sudah sering membuat halaman HTML, Anda mungkin sering menemukan ada tag atau elemen HTML yang ditampilkan sebaris (inline) dan ada juga yang ditampilkan di baris baru (block).
Mengapa hal itu bisa terjadi?
Alasannya karena setiap elemen HTML memiliki nilai default untuk properti CSS display.
Meskipun kita tidak menetapkan properti dan nilai atribut display secara eksplisit, ini akan ditambahkan secara otomatis oleh browser, tergantung pada jenis elemennya.
Ada dua nilai display yang diterapkan ke setiap elemen HTML, yaitu block dan inline.
Apa itu block dan inline? Elemen atau tag apa saja yang ditetapkan sebagai elemen blok atau inline?
Mari kita pelajari satu per satu.
Elemen Blok
Elemen blok adalah elemen HTML yang selalu ditampilkan di baris baru, memiliki lebar penuh (membentang dari kiri ke kanan), serta memiliki margin atas dan bawah.
Tag <p> dan <div> adalah dua contoh elemen level blok. Mari kita buktikan.
Buat dua buah elemen paragraf beri latar belakang agar batas antar paragraf bisa kita lihat dengan jelas.
<p style="background-color: bisque">Saya sedang belajar HTML.</p>
<p style="background-color: bisque">Saya sedang belajar HTML.</p>
Hasil:
Berikut daftar elemen blok HTML:
| Elemen Blok HTML |
|---|
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video> |
Elemen Inline
Elemen sebaris (inline) adalah elemen HTML yang ditampilkan sebaris (tidak dimulai pada baris baru), elemen sebaris hanya memiliki lebar sesuai dengan isi kontennya.
<span> dan <a> adalah dua contoh elemen inline. Mari kita buktikan.
Buat dua elemen <span> dan beri warna agar kita bisa melihat batas antar elemen.
<span style="background-color: bisque">Saya sedang belajar HTML.</span>
<span style="background-color: bisque">Saya sedang belajar HTML.</span>
Hasil:
Berikut daftar elemen inline HTML:
| Elemen Inline HTML |
|---|
<a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <var> |
Perbedaan Elemen Blok dan Inline
Ada beberapa perbedaan utama antara elemen level blok dan inline:
Model Konten
Elemen level blok dapat berisi elemen level blok atau inline.
Misalnya, kita dapat menulis tag <p> di dalam <div> (elemen blok di dalam elemen blok), atau tag <strong> di dalam <p> (elemen inline di dalam elemen blok):
<div>
<p>Ini adalah <strong>paragraf</strong>.</p>
</div>
Elemen inline tidak boleh berisi elemen blok, jika itu dilakukan halaman HTML kita memang masih berjalan normal, tapi jika dicek menggunakan validator HTML ini tidak valid.
Misalnya, jangan menulis elemen <p> (blok) di dalam elemen <strong> (inline) seperti berikut:
<strong>
<p>Ini adalah contoh BURUK.</p>
</strong>
Tampilan Default
Secara default, elemen level blok selalu ditampilkan pada baris baru, sedangkan elemen inline ditampilkan dimana saja dalam sebaris.
Selain itu, lebar elemen blok akan memiliki lebar penuh, sedangkan inline lebarnya sesuai dengan isi konten.
Mari kita bandingkan.
<!-- blok -->
<p style="background-color: bisque">Saya sedang belajar HTML.</p>
<p style="background-color: bisque">Saya sedang belajar HTML.</p>
<!-- inline -->
<span style="background-color: bisque">Saya sedang belajar HTML.</span>
<span style="background-color: bisque">Saya sedang belajar HTML.</span>
Hasil:
