Apa itu Tag Div dan Span ?
Apa sih tag Div itu ? Apa itu tag Span ? Apa fungsinya dalam HTML ? OKe,<div> adalah kependekan dari divisi, kalian pasti pernah atau bahkan sering menjumpai tag ini dalam sebuah website, ya tag <div> dan <span> adalah dua tag yang sering sekali dipakai developer Front-end untuk membuat sebuah tampilan dalam websitenya. Pasti tag-tag dalam HTML memiliki makna masing-masing, jadi, apa makna dari kedua tag ini ? Sebenarnya tag <div> dan tag <span> adalah tag yang tidak memiliki makna apa-apa. Loh ?, terus kenapa tag ini sering dimasukkan dalam struktur website ? Ya, jawabanya karena kedua tag ini tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), sehingga dapat diubah dengan CSS sesuai keinginan penggunanya. Kedua tag ini sering dipakai developer Front-end sebagai wadah untuk menampung tag lain, tag div juga sering dipakai dalam membuat layout website, padahal dalam HTML 5 ada tag yang khusus mengatasi layouting. Baca juga : Tag Baru pada HTML 5
Apa Bedanya Tag Div dan Span ?
Pada dasarnya perbedaan utamanya ada pada perilaku default mereka. Secara default, tag<div> adalah elemen blok-line dan tag <span> adalah elemen inline. Dengan kata lain, jika kalian ingin menyesuaikan sebagian kecil teks dan tidak untuk pindah dari baris saat ini, kalian bisa menggunakan tag <span>, ini dikarenakan elemen inline tidak menyebabkan transisi ke baris baru, tetapi akan ditampilkan secara horizontal. Sedangkan, elemen block-line tidak akan ditampilkan bersebelahan, jadi, tag <div> akan ditampilkan bertumpuk secara vertical, kecuali kalian menggunakan CSS untuk merubah sifat dari tag <div>. Kalian bisa menggunakan tag ini jika kalian perlu memodifikasi pembagian besar, tinggi, memindahkan elemen, atau menampung elemen lain. Untuk penggunaanya, tag <div> lebih sering digunakan daripada tag <span>.untuk lebih jelasnya kalian bisa melihat perbedaanya di contoh source code berikut :
CSS
*{
padding: .5em;
}
div{
background: #4286f4;
border-radius: .2em;
}
span{
background: #f7dd4a;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>ini adalah tag div pertama yang menampung <span>dua tag </span> <span>span</span> di dalamnya</div>
<div>ini adalah tag div kedua yang tidak menampung tag apapun</div>
</body>
</html>
Maka yang ditampilkan di browser, seperti di bawah ini :
Bisa dilihat gambar di atas kita memiliki dua tag
<div> dan dua tag <span>, karena tag <div> memiliki sifat block-line, maka tag <div> nomor dua dipindah ke baris berikutnya. Sedangkan pada tag <span>, dia tidak dipindahkan ke baris baru melainkan di sampingnya ini dikarenakan tag <span> memiliki sifat inline. contoh lainnya :
CSS
*{
color: #fff;
}
div, span{
text-align: center;
}
div{
background: salmon;
}
span{
background: blueviolet;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
Hasil kode di atas :
Kesimpulannya tag ini sangat banyak funsinya kalian bisa menggunakannya untuk membuat sebuah tampilan website yang menarik. Akan tetapi usahakan pengunaanya seminimal mungkin, contoh, ketika kalian hanya ingin mengubah suatu kata menjadi italic kalian tak perlu menggunakan tag
<span>, kalian bisa menggunakan tag seprti <em>. Oke, sekian pembahasan tentang perbedaan tag <div> dan <span> semoga bermanfaat.
0 komentar:
Posting Komentar