Belajar HTML Part 15 - Elemen Blok dan Inline

Assalamu'alaikum Warahmatullaahi Wabarakatuh.

Pada artikel sebelumnya, kita telah belajar tentang list pada HTML. Kali ini kita akan mempelajari tentang dua jenis elemen dalam HTML.

• Dalam HTML, ada dua jenis elemen. yaitu Elemen Blok dan Elemen Inline.

1. Elemen Blok

Elemen blok selalu berawal dari baris baru dan menghabiskan seluruh lebar yang disediakan. Contoh dari elemen blok adalah :

• <div>
• <h1>-<h6>
• <p>
• <form>

2. Elemen Inline

Elemen Inline tidak secara otomatis membuat baris baru, melainkan melanjutkan baris sebelumnya. Sehingga elemen inline ini hanya membutuhkan lebar seperlunya. Sesuai dengan konten dari elemen tersebut. Contoh elemen inline adalah :

• <span>
• <a>
• <img>

CONTOH PENGGUNAAN

Coba ketik scrypt di bawah :

<div style="background-color:black; color:white; padding:20px;">
 <h2>Ini contoh elemen blok</h2>
 <p>Setiap elemen yang berbeda dimulai dengan baris baru.</p> 
</div> 
<h1>Ini 
 <span style="color:red">contoh elemen inline</span>.
 <i>Elemen inline tidak membuat baris baru untuk masing-masing elemen</i>
 melainkan hanya melanjutkan elemen sebelumnya
</h1>

Kemudian simpan dan jalankan pada browser Anda. Berikut tampilan yang dihasilkan :

Demikian Seri Belajar HTML perbedaan elemen blok dan inline. Semoga artikel ini bisa memberikan manfaat bagi Anda.

Terima kasih,

Wassalamu'alaikum Warahmatullaahi Wabarakaatuh.