Perbedaan Antara Tag DIV dan SPAN

Update terakhir pada

Kita sekarang akan mempelajari perbedaan antara tag DIV dan  tag SPAN dalam HTML, mungkin teman-teman sering menggunakan elemen ini dalam mendesain sebuah website, nah ayo teman-teman mari kita pelajari bersama.

Tag Div (division) biasanya sering kita gunakan ketika kita akan membuat website dengan tujuan untuk membuat suatu seksi atau pengelompokan sebuah file HTML menjadi beberapa bagian, agar mempermudah untuk melakukan manipulasi style dengan CSS.

<div></div>

Biasanya tag div ini diikuti oleh atribut #id sebagai pembeda antara tag div yang satu dengan yang lainnya.

<!DOCTYPE html>
<head>
      <tittle></tittle>
</head>
<body>
<div id="wrapper">
<div id="content">
</div><!--end of content-->
<div id="footer">
</div><!--end of footer-->
</div><!--end of wrapper-->
</body>
</html>

Biasanya tag div ini diikuti oleh atribut #id sebagai pembeda antara tag div yang satu dengan yang lainnya.

Sedangkan untuk tag Span kita lihat teman-teman

<!DOCTYPE html>
<head>
      <tittle></tittle>
</head>
<body>
<div id="wrapper">
<div id="content">
  <span class="red">Tulisan ini warna merah</span>
</div><!--end of content-->
<div id="footer">
</div><!--end of footer-->
</div><!--end of wrapper-->
</body>
</html>

Nah disana bisa kita lihat, yang memdedakan adalah cara penempatannya. Block line tag DIV kelompok tag yang memisahkan dengan tag yang lainnya, sedangkan In-Line tag yg tidak membuat blok baru, artinya dia cukup disisipkan pada konten seperti pada tag SPAN.

Untuk penggunaan tag DIV sendiri biasanya sering digunakan untuk membuat layout, hal ini menggantikan fungsi table yang terlihat kuno dan saat ini mulai tergantikan dengan adanya tag DIV. Menguntungkan karena dalam penggunaannya kode HTML menjadi lebih sedikit dan lebih fleksibel ketika kita akan melakukan manipulasi terhadap layout. Nah untuk lebih jelasnya teman-teman WebHozz bisa lihat tutorialnya.

DEMO

DEMO

Sumber : https://www.webhozz.com/blog/perbedaan-antara-tag-div-dan-span/

webhozz