Tutorial HTML Lanjutan: Perbedaan tag Span dan tag Div

HTML digunakan untuk membuat ‘tujuan’ dari konten. Hampir semua tag memiliki keperluan masing-masing. Misalnya tag <p> untuk paragraf, tag h1 untuk heading (judul), dan lain-lain. Namun ada 2 buah tag khusus, yaitu span dan div yang memang tidak memiliki ‘tujuan’ apa-apa. Pada Tutorial Belajar HTML: Perbedaan tag span dan div ini kita akan membahasnya lebih dalam.


Pengertian 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 bermakna ini malah menjadi salah satu tag yang paling sering digunakan untuk membuat struktur web, terutama tag <div>. Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS. Biasanya tag <div> menggunakan atribut id sebagai pembeda antara tag <div> 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 Duniailkom 2014</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.

Jenis tag Block-line atau Block-style adalah kelompok tag yang ‘ingin’ berdiri sendiri, dan memisahkan diri dari tag disekitarnya.Block Style tag umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi (enter) di akhir tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>). Tag Block-line akan membuat sebuah ‘blok’ dalam struktur HTML. Di dalam tag ini bisa terdapat tag block lain, maupun tag In-line.

Jenis tag In-line atau Inline style adalah tag yang tidak membuat blok baru di dalam struktur HTML. Tag jenis ini tidak menambahkan spasi di akhir tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam baris yang sama. Contoh tag inline adalah tag garis miring (<em> atau <i>), tag penebalan (<strong> atau <b>) dan tag link (<a>).

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>

Pengertian tag span dan div

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.


Tutorial Terkait:

65 Comments

  1. ss1d
    30 Jul 13
    • Chidori
      07 Aug 13
    • Andre
      03 Oct 13
  2. hasmal
    30 Aug 13
    • Andre
      03 Oct 13
  3. pakdheihsan
    01 Sep 13
    • Andre
      03 Oct 13
  4. mady
    11 Jan 14
    • Andre
      14 Jan 14
  5. Anonymous
    15 Jan 14
    • Andre
      27 May 14
  6. vanya
    26 May 14
    • Andre
      27 May 14
  7. ajeh
    12 Jul 14
  8. reghar
    24 Dec 14
  9. Alvin
    05 Jun 15
    • Andre
      05 Jun 15
  10. riska
    18 Sep 15
    • riska
      18 Sep 15
    • Andre
      18 Sep 15
  11. Denz
    26 Sep 15
    • Andre
      28 Sep 15
  12. afief
    22 Nov 15
  13. nisnoni
    25 Dec 15
    • Andre
      26 Dec 15
  14. sahwan
    03 May 16
    • Andre
      03 May 16
  15. Aam
    22 May 16
  16. ikhsan
    07 Jun 16
    • Andre
      08 Jun 16
  17. Indra
    18 Jul 16
    • Andre
      18 Jul 16
  18. nuthfatin
    24 Aug 16
    • Andre
      24 Aug 16
  19. nuthfatin
    24 Aug 16
  20. Tebak Sendiri
    23 Sep 16
    • Andre
      24 Sep 16
  21. Muji
    28 Sep 16
    • Andre
      28 Sep 16
  22. Syahda Romansyah
    08 Oct 16
    • Andre
      09 Oct 16
  23. Jack
    22 Oct 16
    • Andre
      23 Oct 16
  24. Anton giatmaka
    17 Nov 16
    • Andre
      17 Nov 16
  25. LaguHardcore
    17 Jan 17
    • Andre
      18 Jan 17
  26. deka
    07 Mar 17
    • Andre
      07 Mar 17
  27. Jackie
    15 Apr 17
  28. Hanial
    27 May 17
    • Andre
      27 May 17
  29. Rendy Kece
    17 Jul 17
  30. Heru
    29 Jul 17
    • Andre
      30 Jul 17
  31. Muhaimin
    04 Aug 17
    • Andre
      05 Aug 17
  32. Anonymous
    10 Nov 17
  33. Akane akari
    12 Dec 17
    • Akane akari
      12 Dec 17
      • Andre
        13 Dec 17
    • Andre
      13 Dec 17

Add Comment