Di postingan sebelumnya kita sudah bahas cara membuat form di HTML. Selanjutnya, kita akan bahas perbedaan span dan div di HTML. Berikut pembahasan AneIqbal selengkapnya dimulai dari apa itu tag span dan div.
Pengertian tag <span> dan <div>
Setiap tag HTML punya tujuan/makna tertentu yang menunjukkan itu bagian konten apa. Misalnya, tag <p> bagian konten paragraf, tag <ol> bagian konten list/daftar, tag <table> bagian konten tabel, dan lain sebagainya.
Tag <div> dan <span> tidak punya tujuan/makna seperti tag lainnya. Padahal, tag inilah yang paling sering digunakan dalam mendesain halaman web.
Kok bisa?
Karena tag <div> dan <span> ini nggak punya makna tersendiri, kedua tag ini fleksibel digunakan. Artinya, kita bisa mengatur dan memasang makna (style CSS) sesuai yang kita mau dengan tag ini.
Jadi, tag <div> dan <span> adalah tag yang tidak punya makna dan style bawaan (tidak punya efek tampilan apa-apa).
Contohnya seperti ini:
<!DOCTPYE html>
<html>
<head>
<title>Tag div dan tag span</title>
</head>
<body>
<div>Ini adalah kalimat yang ditulis di dalam tag div</div>
<span> Sedangkan ini adalah kalimat yang ditulis di dalam tag span</span>
</body>
</html>
Akan menghasilkan:
Hasilnya sama dan biasa saja. Karena kedua tag tersebut, tag <div> dan <span>, tidak memiliki efek tampilan apa-apa.
Untuk membedakan tiap-tiap tag <div> dan <span>, keduanya diberi atribut id. Id inilah yang akan menjadi selector CSS yang bisa dibedakan stylenya.
Contoh yang paling umum adalah untuk pemisahan bagian-bagian web. Ada bagian kepala, bagian konten, bagian sidebar bagian footer, dan bagian lainnya.
<!DOCTPYE html>
<html>
<head>
<title>Penggunaan tag div</title>
</head>
<body>
<div id="header">
<h3>Ini adalah bagian header</h3>
</div>
<div id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact us</a>
</div>
<div id="konten">
<p>Ini adalah bagian konten..</p>
</div>
<div id="sidebar">
<ul>
<li>Ke halaman 1</li>
<li>Ke halaman 2</li>
<li>Ke halaman 3</li>
</ul>
</div>
<div id="footer">
<p>Ini adalah bagian footer</p>
</div>
</body>
</html>
Dulu, bagian-bagian web di desain pakai tabel. Kebayang deh ribetnya kaya apa. Nah kalo sekarang ini, web modern menerapkan div id untuk membuat bagian/struktur web, seperti kode di atas.
Di HTML5 malah lebih canggih lagi. Tiap bagian-bagian web sudah punya tag masing-masing, seperti bagian kepala tagnya <header>, bagian bawah/kaki tagnya <footer>, dan masih banyak lagi.
HTML5 juga akan kita bahas di postingan-postingan selanjutnya, tunggu ya. Oke, back to topik. Lalu, dimana perbedaannya?
Perbedaan tag <div> dan <span>
Perbedaan antara tag <div> dan <span> adalah pada jenis tagnya. Tag <div> merupakan jenis tag block-line sedangkan tag <span> adalah jenis tag in-line.
Apa itu block-line dan in-line? Keduanya adalah jenis tag. Jadi tag HTML punya 2 jenis; block-line dan in-line.
Block-line
Block-line Adalah tag yang akan membuat baris baru dari suatu elemen HTML. Jadi, tag ini akan memakan area sampai ujung layar browser dan secara otomatis akan berpindah baris baru.
Tag yang termasuk dalam block-line, seperti tag <h1> sampai <h6>, tag <div>, tag <p>, dan tag <table>. Supaya lebih ngena lagi, kita praktikkan saja.
<!DOCTPYE html>
<html>
<head>
<title>Tag div dan tag span</title>
</head>
<body>
<div>Ini kalimat pertama</div>
<div>Ini kalimat kedua</div>
</body>
</html>
Seperti ini jadinya:
Tag <div> akan mem-block 1 area sampai ujung layar browser dan secara otomatis berpindah baris. Sedangkan in-line.
In-line
Adalah tag yang tidak membuat baris baru dari suatu elemen HTML. Jadi, tag ini tidak memakan area sampai ujung layar browser, hanya seluas kontennya saja, dan juga tidak akan berpindah baris baru.
Tag yang termasuk dalam in-line, seperti tag <em>, tag <i>, tag <strong>, tag <b>, dan tag <span>.
Coba kita praktikkan dengan kode di atas dengan mengganti tag <div> dengan tag <span>.
<!DOCTPYE html>
<html>
<head>
<title>Tag div dan tag span</title>
</head>
<body>
<span>Ini kalimat pertama</span>
<span>Ini kalimat kedua</span>
</body>
</html>
Jadinya seperti ini:
Terlihat kan perbedaannya?
Maka dari itu, tag <div> cocok digunakan untuk membuat bagian-bagian web dan tag <span> cocok digunakan untuk memberi style ke kata yang ada di tengah kalimat.
Selesai sudah pembahasan kita kali ini tentang perbedaan span dan div. Semoga panduan di atas bisa membantu Anda dan terima kasih sudah membaca sampai akhir.
Next, kita akan bahas pengertian meta tag HTML.
