Kamu sudah kenal dua cara elemen tampil di halaman. Tiap <p> mulai di baris baru, jadi paragraf tersusun ke bawah. <strong> tetap di tengah kalimat, cuma kata yang dibungkusnya jadi tebal. Dua cara tampil ini punya nama:
- Block, kayak
<p>: selalu mulai di baris baru dan memenuhi lebar barisnya, walau isinya pendek. - Inline, kayak
<strong>: tetap di baris teks, dan lebarnya cuma seukuran isinya.
🧪 Tebakan cepat:
<div>itu elemen block. Kalau satu kata di tengah kalimat dibungkus<div>, kalimatnya tetap satu baris atau terpotong? Tebak dulu, jawabannya ada di bagian "Sebaris atau turun ke baris baru".
<span>: pembungkus inline
<span> membungkus sebagian kalimat, misalnya satu kata atau satu harga:
<p>Nasi uduk cuma <span>Rp10.000</span> sepiring.</p>
<p>dan</p>membungkus seluruh kalimat.<span>adalah tag pembuka, tepat sebelum bagian yang mau ditandai.Rp10.000adalah bagian yang ditandai.</span>adalah tag penutup, tepat sesudahnya.
Hasilnya: kalimatnya tampil utuh di satu baris, persis kayak tanpa <span>. Memang begitu, <span> gak mengubah tampilan dan gak punya arti. Tugasnya cuma menandai bagian itu, biar nanti CSS bisa ngasih gaya sendiri ke situ.
<div>: pembungkus block
<div> membungkus satu bagian utuh halaman, misalnya beberapa paragraf yang sekelompok:
<div>
<p>Nasi uduk Rp10.000.</p>
<p>Teh manis Rp4.000.</p>
</div>
<div>membuka kelompoknya,</div>menutupnya.- Dua
<p>di dalamnya ditulis menjorok, biar kelihatan ada di dalam<div>.
Hasilnya: dua paragraf yang tampil kayak biasa. <div>-nya sendiri gak kelihatan, sama kayak <span>. Bedanya cuma satu: <div> itu block, <span> itu inline. Jadi sebagian kalimat dibungkus <span>, satu blok utuh dibungkus <div>.
Sebaris atau turun ke baris baru
Bedanya kelihatan jelas kalau keduanya ditulis berurutan:
<span>Nasi uduk</span>
<span>Teh manis</span>
<div>Kopi</div>
<div>Es jeruk</div>
Hasilnya tiga baris. Nasi uduk dan Teh manis berdua di baris pertama, karena <span> itu inline. Kopi dan Es jeruk masing-masing punya baris sendiri, karena tiap <div> mulai di baris baru.
Jadi jawaban tebakan tadi: kalimatnya terpotong, karena kata yang dibungkus <div> turun ke baris sendiri.
Tag yang sudah kamu kenal, dikelompokkan:
- Block:
<div>,<p>,<h1>sampai<h6>,<ul>,<ol>,<li>,<pre>. - Inline:
<span>,<a>,<strong>,<em>,<b>,<i>,<code>,<kbd>.
Susun <div>, <p>, dan <span>
<div> boleh berisi paragraf, heading, daftar, bahkan <div> lain. <p> cuma boleh berisi teks dan elemen inline kayak <span>. Jadi susunannya kayak kotak dalam kotak: <div> di luar, <p> di tengah, <span> paling dalam:
<div>
<p>Harga hari ini <span>Rp15.000</span>, besok <span>Rp20.000</span>.</p>
</div>
- Tiap harga punya
<span>sendiri. Dua bagian, dua<span>. - Koma dan titik ada di luar
<span>, karena bukan bagian dari harga.
Hasilnya satu kalimat utuh: Harga hari ini Rp15.000, besok Rp20.000. <span> yang kosong, <span></span>, gak membungkus apa-apa, jadi selalu isi teksnya.
⚠️ Jebakan yang sering ketemu
<div>buat menandai satu kata. Kalimatnya terpotong. Pakai<span>.<div>di dalam<p>. Browser menutup paragrafnya sebelum<div>, jadi susunannya berantakan. Taruh<p>di dalam<div>, bukan sebaliknya.- Satu
<span>buat dua bagian. Kalau tiap bagian mau diberi gaya sendiri, tiap bagian butuh<span>sendiri.
💡 Nanti di CSS: display
CSS bisa mengubah cara tampil bawaan ini lewat display. display: block bikin elemen turun ke baris sendiri, display: inline bikin elemen tetap sebaris. display: inline-block juga tetap sebaris, tapi lebar dan tingginya bisa diatur. Kamu bakal ketemu ini lagi waktu belajar CSS.
TL;DR: Block mulai di baris baru dan memenuhi lebar barisnya (<div>, <p>, <h1>). Inline tetap di baris teks (<span>, <a>, <strong>). Bungkus sebagian kalimat dengan <span>, satu blok utuh dengan <div>. Susunannya: <div> berisi <p>, <p> berisi <span>.
