Spear — Learn to Code

Block vs Inline Elements

Setiap elemen HTML memiliki display value default: block atau inline.

Block Elements

Selalu mulai di baris baru
Mengambil lebar penuh yang tersedia
Contoh: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>

Inline Elements

Tidak mulai di baris baru
Hanya mengambil lebar sesuai konten
Contoh: <span>, <a>, <strong>, <em>, <img>, <input>, <code>, <br>

Aturan Penting

Block bisa berisi block dan inline
Inline tidak boleh berisi block (kecuali <a> di HTML5)

<h3>Block Elements</h3> <div>Div 1 (block - full width)</div> <div>Div 2 (block - new line)</div> <p>Paragraph (block element)</p> <h3>Inline Elements</h3> <p> <span>Span 1</span> <span>Span 2</span> <a href="#">Link</a> <strong>Bold</strong> — semua inline, satu baris! </p> <h3>Block di dalam Block (OK)</h3> <div> <p>Paragraf di dalam div — valid!</p> </div>