Seperti yang kita ketahui, hampir setiap element di HTML memiliki fungsi masing masing. seperti element dengan tag
<a> untuk membuat link (penghubung), <img> menampilkan gamabar, <i> mencetak huruf miring (italic) dan lain-lain.
Element html dengan tag <div> dan <span> adalah element html yang tidak memeiliki
makna secara dafault (bawaan). namaun meskipun kedua elemement ini (div danspan) tidak memeiliki makna dalam penggunaannya, kedua element ini
akan sering kita gunakan utamanya dalam pembuatan layout web.
Element dengan tag div sering kali di gunakan untuk membuat pondasi atau
tata letak sebuah struktur web modern. misalnya untuk container atau box yang menampung berbagai macam element lainnya.
Perbedaan element div dan span di HTML
Secara garis besar, element di html di bagi menjadi dua bagian menurut sistem kerjanya yakni
element Blok-line/Blog-style dan In-line/in-line style.
Element Blok-line di HTML
Element jenis ini adalah element yang memisahkan diri dari element dengan cara menempatkan diri di garis baru atau enter. element div termasuk dalam ketegori ini.
Element In-line di HTML
Element jenis ini adalah element yang tidak memisahkan diri dari element lainnya ketika di terapkan. element jenis ini akan selalau mengikuti line (garis) secara horizontal dan tidak tersususn seperti blok. element Span masuk dalam kategori ini.
Fungsi element div dan span di HTML
seperti yang sudah di katakan sebeleumnya, element div dan span biasanya digunakan untuk pembuatan container atau struktur web. dan sering juga di gunakan untuk menampung berbagai macam element lain agar element-element dapat terstruktur dengan baik saat di baca dan di tampilkan oleh web browser. element ini adalah element yang paling mudah di atau dengan CSS.
contoh penggunaan element div dan span di html.
Contoh penggunaan Element dengan tag <div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
text-align:center;
width:100%;
}
#container {
background:cyan;
}
#header {
background:red;
color:white;
}
#content {
background:white;
border:1px solid black;
}
#footer {
background:black;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Belajar Elemet div</h1>
</div>
<div id="content">
<p>helloo.... my name is Zen..!</p>
</div>
<div id="footer">
<p>about</p>
</div>
</div>
</body>
</html>
Preview
Belajar Elemet div
helloo.... my name is Zen..!
Div sangat cocok di gunakan untuk mengatur tata letak element-element lainnya agar tertata rapi saat di tampilkan di webrowser
Contoh penggunaan Element dengan tag <Span>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
background:gray;
}
#container {
width:100%;
}
.merah {
color:white;
background:red;
}
.putih {
color:red;
background:white;
}
</style>
</head>
<body>
<div id="container">
<span class="merah">merah</span>
<span class="putih">putih</span>
</div>
</body>
</html>
Preview
Element span sangat cocok di gunakan untuk memberi style kepada teks seperti warna teks, background teks dan lain-lain.