Element Levels

Kalian ingat kan ya ketika kita sebelumnya kita membuat paragraf tanpa menggunakan tag <p>. Walaupun kodenya kita tulis di baris baru seperti ini:

Ini paragraf pertama di websiteku.
Dan ini paragraf kedua di websiteku.

Teksnya akan tampil dalam satu baris yang sama.
Dan setelah kita berikan tag <p> di setiap paragraf seperti ini:

<p>Ini paragraf pertama di websiteku.</p>
<p>Dan ini paragraf kedua di websiteku.</p>

Kedua paragraf ini akan berada di baris yang berbeda.

Nah itu terjadi karena <p> merupakan block level element. Jadi setiap elemen yang menggunakan <p> akan berada di baris baru.

Lalu apa saja level elemen di HTML?

Block-Level Elements

Block-level itu elemen HTML yang otomatis mulai di baris baru dan lebarnya mengikuti lebar wadahnya. Jadi walaupun isinya cuma satu kata, dia tetap mengisi satu baris penuh dan elemen lain akan turun ke baris berikutnya. Contoh block-level itu seperti <div>, <p>, <h1> sampai <h6>, <section>, <article>, dan <ul>.

Untuk contoh block-level elements mirip seperti di atas dengan paragraf.

Akan ku tulis lagi..

Let's say kita mau nulis text or paragraf seperti ini, niat kita ya di baris baru.

Ini paragraf pertama di websiteku.
Dan ini paragraf kedua di websiteku.

Eh ternyata... teksnya akan tampil dalam satu baris yang sama.
Dan setelah kita berikan tag <p> di setiap paragraf seperti ini:

<p>Ini paragraf pertama di websiteku.</p>
<p>Dan ini paragraf kedua di websiteku.</p>

Inline Elments

Inline element adalah elemen HTML yang tidak memulai baris baru. Mereka hanya selebar kontennya dan tetap berada di satu baris bersama teks atau elemen lain selama masih muat. Kalau barisnya kepanjangan, baru turun ke baris berikutnya seperti teks biasa.

Contoh inline element adalah <span>, <a>, <strong>, <em>, <img>, dan <label>. Inline element biasanya dipakai untuk memberi gaya atau fungsi pada potongan kecil teks atau elemen tanpa merusak alur paragraf.

Oh span? kita akan bahas di bagian berikutnya.

Kita akan berikan contoh link yang ditulis tanpa newline apapun.

<a href="#another-section">Click here</a>
<a href="#another-another-section">Also click here</a>

Kita lihat di browser bahwa Click here dan Also click here berada dalam satu baris.

Ya... inilah kenapa <a> termasuk ke dalam inline elements.