Tutorial HTML Lanjutan: Perbedaan tag Span dan tag Div
Halo kawan-kawan,
Pada kesempatan kali ini kita akan belajar lebih dalam tentang tag Span dan tag Div. Berbeda dengan hampir semua tag dalam HTML yang memiliki tujuan masing-masing, misalnya tag <p> untuk paragraf, tag h1 untuk heading (judul), dan lain-lain, tag Span dan tag Div tidak memiliki ‘tujuan’ apa-apa, namun malah menjadi salah satu tag yang paling sering digunakan untuk membuat struktur web, terutama tag <div>.
Fungsi tag Span dan tag Div
Tag <span> dan tag <div> adalah tag yang tidak memiliki makna apa-apa. Selain kedua tag ini, tag-tag lain di dalam HTML memiliki makna masing-masing. Jadi, apa fungsi dari kedua tag ini?
Tag <span> dan tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS untuk membuat struktur web. Biasanya tag-tag ini menggunakan atribut id dan atribut class sebagai pembeda antara tag yang satu dengan yang lainnya.
Contoh paling umum untuk penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan struktur lainnya. Berikut adalah contoh struktur HTML menggunakan tag <div>:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Div</title>
</head>
<body>
<div id="header">
<h1>Judul Website</h1>
<img src="logo_website.jpg" />
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="article_1">
<p>......Isi dari artikel.....</p>
</div>
</div>
<div id="sidebar">
<h1>Artikel Terbaru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="footer">
<p>Footer - Copyright Nusantara Coding</p>
</div>
</body>
</html>
Stuktur web diatas umum ditemukan pada web modern yang menggunakan CSS untuk men-style halaman tersebut. Perhatikan bahwa masing-masing tag <div> memiliki atribut id yang membedakannya dengan tag <div> lainnya.
Perbedaan Antara tag Span dan tag Div
Secara garis besar, tag-tag di dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line.
Untuk perbedaan Block-line dan In-line, kawan-kawan dapat melihat kembali artikel sebelumnya tentang “Tutorial Text HTML Part 2: Perbedaan Block Element dan Inline Element tag HTML”.
Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag.
Contoh perbedaan kedua tag ini dapat dilihat dalam kode HTML berikut, savelah sebagai spandiv.html
Contoh penggunaan tag div dan span:
<!DOCTYPE html>
<html>
<style type="text/css">
#kalimat{
font-weight: bold;
}
.miring{
font-style: italic;
}
</style>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<p>
<strong>Ini adalah <em>Sebuah</em> paragraf </strong>
</p>
<div id="kalimat">
Ini juga <span class="miring">Sebuah</span> paragraf
</div>
</body>
</html>
Hasil Code:
Kedua paragraf akan memiliki efek yang sama. Namun pada paragraf kedua kita hanya menggunakan tag div dan span. Efek penebalan dan garis miring dari tulisan kita ubah melalui CSS.
Jika anda belum mempelajari CSS, tidak perlu khawatir, namun dapat diingat bahwa tag span dan tag div merupakan tag ‘tanpa makna’ yang bisa dimaknai.