Setiap elemen HTML memiliki mode tampilan (display) bawaannya masing-masing, yang umumnya antara dua nilai, yaitu block dan inline.

Block

Elemen dengan mode display block akan tampil dengan ukuran width penuh, mengisi ruang kiri dan kanan semaksimal mungkin. Contohnya adalah elemen <h1>-<h6>. Ketika kita menuliskan elemen ini di dalam satu baris pun, browser akan menampilkan elemen ini di masing-masing baris.

<h1>Halo Coders</h1> <h2>Apa kabar?</h2>

Elemen <h1> dan <h2> pada kode di atas akan tetap ditampilkan di baris tersendiri.

Halo Coders

APA KABAR?

Beberapa contoh elemen lain yang mode displaynya block diantaranya adalah <p>, <form>, <div>, <pre> dan lain-lain.

Inline

Tidak seperti block, elemen dengan mode display inline akan ditampilkan dalam satu baris sesuai ukuran widthnya. Mode inline tidak akan menghabiskan ruang ke kiri dan kanan. Contoh elemen dengan mode inlineadalah elemen-elemen formatting seperti <strong> dan <em>.

Ini contoh teks berisi elemen <strong>inline</strong>. Elemen inline akan sesuai ukuran <em>width</em> aslinya.

Teks pada contoh kode di atas akan tampil dalam satu baris, termasuk elemen-elemen di dalamnya.

Ini contoh teks berisi elemen inline. Elemen inline akan sesuai ukuran width aslinya.

Beberapa contoh elemen lain yang juga memiliki mode display inline diantaranya adalah <a>, <span>, <img> dan lain-lain.

PRAKTEK

Pada editor terdapat teks yang disisipi gambar. Jalankan kode dan lihat hasilnya. Mengapa teks dan gambar tampil seperti itu?
Elemen <img> bermode display inline, sehingga secara default dia akan ditampilkan di baris yang sama.
Nampaknya konten HTML ditampilkan kurang rapi. Dapatkah Kamu membuatnya lebih rapi, dalam hal ini membuat gambar ditampilkan di baris yang berbeda dengan baris teks?
Ada banyak opsi solusi. Solusi paling mudah adalah dengan menambahkan elemen <br> sebelum dan sesudah elemen gambar. Cara lain yang juga lebih mudah adalah dengan menyimpan teks di dalam tag <p>. Tag <p> bermode display block, sehingga teks akan ditampilkan dalam satu baris penuh dan elemen gambar akan otomatis ada di baris selanjutnya.

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

Ini gambar kucing

bukan anjing.

</body>

</html>

Hasilnya: