Penggunaan Tag div dan Tag span
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah blok atau inline.
Block-level Elements
Elemen tingkat blok selalu dimulai pada baris baru dan menghabiskan lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Elemen <div> adalah elemen tingkat blok.
<div>Hello</div>
<div>World</div>
Elemen inline
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.
<span>Hello</span>
<span>World</span>
Elemen <div>
Elemen <div> sering digunakan sebagai wadah untuk elemen HTML lainnya.
Elemen <div> tampa atribut yang dibutuhkan tidak memiliki makna, namun style dan kelasnya biasa dimasukan.
Bila digunakan bersamaan dengan CSS, elemen <div> dapat digunakan untuk membuat blok konten yang berstyle:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
Elemen <span>
Elemen <span> sering digunakan sebagai wadah untuk beberapa teks.
Elemen <span> tampa atribut yang dibutuhkan tidak memiliki makna, namun style dan kelasnya biasa dimasukan.
Bila digunakan bersamaan dengan CSS, elemen <span> dapat digunakan untuk menyesuaikan bagian teks:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>
HTML Grouping Tags
| Tag | Description |
|---|---|
| <div> | Mendefinisikan sebuah bagian dalam sebuah dokumen (block-level) |
| <span> | Mendefinisikan sebuah bagian dalam sebuah dokumen (inline) |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2