HTML elemen Block dan Inline

Pengelompokan elemen HTML

Berdasarkan tampilan (display) tata letaknya, elemen HTML dikelompokkan menjadi 2 level :

1. Level Block : Tampilan tata letak elemen ini memblokade halaman atau memotong melintang. Sehingga elemen ini akan menggeser tata letak elemen lain disebelahnya. Dengan kata lain, elemen level block selalu memenuhi ruang dalam barisannya.
2. Level Inline : Tampilan tata letak elemen ini sesuai ukuran kontennya dan bersebelahan (berjajar) dalam 1 baris dengan elemen lain.

Contoh elemen level BLOCK :

1. paragraph.

Kode elemen paragraf dibawah ini hanya berisi 1 kata "HTML" saja, dan ditambahkan style untuk memberikan warna latar belakang yang tujuannya supaya terlihat tata letak elemen sebagai elemen yang memblokade halaman.

<p>HTML</p>
<style>
p { background: skyblue}
</style>

Paragraf

Bandingkan dengan elemen <b> untuk melihat perbedaan sekaligus memahami alasan elemen tersebut tergolong block atau inline.
Perhatikan kode untuk elemen <b> berikut ini, tidak mengubah apapun kecuali tag elemen <p> menjadi <b>.

<b style='background:skyblue'>HTML</b>
<style>
b { background: skyblue}
</style>

HTML

Disebut elemen inline karena elemen ini masih bisa berdampingan / bersebelahan dengan elemen lain didalam satu baris (line) yang sama. Oleh karena itu disebut inline.

Dartar elemen level BLOCK dalam 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>

Dartar elemen level INLINE dalam HTML

<a><abbr><acronym><b><bdo><big><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><tt><var>