Tutorial HTML: Inline Dan Block Element

Ketika pengembangan website, utamanya ketika mulai koding untuk HTML kita akan menemui dua kategori saat kode HTML ditampilkan, yaitu secara inline dan secara block.

Dan di tutorial ini saya tidak akan memberikan hasil dari kode, agar menumbuhkan inisiatif untuk mencari hasil sendiri.

Inline Element

Elemen-elemen yang masuk dalam kategori ini merupakan elemen-elemen yang tidak mempunyai baris khusus untuknya. Artinya, ketika elemen ini dieksekusi browser, elemen tidak akan dimulai dengan baris baru tapi tetap pada baris dimana ia didefenisikan. Jadi, lebar halaman yang diambil hanya sebatas lebar elemennya.
Beberapa elemen yang ada pada kategori ini seperti <span>, <b>, <i>, <a> dan sebagainya.

Hari ini saya belajar <b>inline</b> element.

Block Element

Sebagia kontra dari inline, block elemen merupakan elemen yang akan selalu dimulai dengan baris baru. Dengan kata lain, elemen ini akan memakan setidaknya satu baris untuknya sendiri. Serta mempunyai lebar persis seluruh lebar halaman.
Beberapa elemen yang ada pada kategori ini seperti <div>, <h1> – <h6>, <p> dan sebagainya.

Dan bagian ini adalah bagian <p>Block</p> Element.

Lebih jauh lagi !

Perbedaan kedua hal diatas sebaiknya anda lebih pahami, baik secara pengertian maupun jenis tag yang dipakai. Pemakaian kedua elemen ini juga bisa dipakai secara nested alias elemen didalam elemen.
Secara umum, block elemen utamanya <div> elemen dipegunakan sebagai container untuk elemem anaknya. Untuk lebih memperjelasnya silahkan perhatikan contoh berikut.

<!DOCTYPE html>
<html>
<head>
 <title>Inline dan Block Element</title>
</head>
<body>
 <div>
  <h1>Mari mempelajari HTML</h1>
  <p>Terdapat dua kategori elemen, yaitu <b>block</b> dan <span style="color:blue">inline</span> element</p>
 </div>
</body>
</html>

Kita perhatikan kode diatas, pertama ada bagian <div> yang merupakan container atau pelingkup utama untuk bagian-bagian didalamnya, seperti <h1> dan <p> yang merupakan kategori block. Di elemen <p> didalamnya juga ada elemen <b> dan elemen <span>, dimana kita tau merupakan inline elemen. Sudah menemukan perbedaannya ?

Kesimpulan

Hasil dari kode HTML akan mempunyai display atau tampilan masing-masing di browser, tampilan ini yaitu Inline dan Block. Inline mempunyai lebar sesuai lebar dari elemen yang dibentuk, sedangkan block akan memakan setidaknya seluruh lebar layar.

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com