Fungsi Tag Div dan Tag Span Beserta Cara Penggunaannya

Kuy Belajar - Fungsi Tag Div dan Tag Span Beserta Cara Penggunaannya. Assalamualaikum sobat semua, kita ketemu lagi nih. Setelah sebelumnya kita telah membahas materi tentang Fungsi Input Type Hidden Beserta Cara Penggunaannya yang merupakan materi terakhir pada pembahasan form di HTML. Kali ini kita akan membahas materi tentang Fungsi Tag Div dan Tag Span Beserta Cara Penggunaannya. Kuy simak pembahasan di bawah ini!

Mengenal Tag Div dan Tag Span Dalam HTML

Tag <span> dan tag <div> adalah tag yang sebenarnya tidak memiliki makna secara spesifik. Mungkin sobat bertanya tanya kenapa begitu? pada tag-tag lain di dalam HTML memiliki makna masing-masing. Jadi, apa fungsi dari kedua tag ini?

Walaupun tag <span> dan tag <div> ini tidak bermakna, justru kedua tag ini lah 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), sobat dapat dengan mudah mengubahnya 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>:


<html>



<title>Kuy Belajar Tag Div</title>






</head>









<body>

  <div id="header">

  <h1>Judul Website</h1>

  </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 Kuy-Belajar 2016</p>

 </div>

</body>





</html>

Ketika sobat menjalankan kode HTML di atas, maka akan seperti berikut ini hasilnya.

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 Tag Div dan Tag Span Dalam HTML

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.


<html>

<head>



<title>Kuy Belajar Tag Div</title> 

<style type="text/css">

   #kalimat{

      font-weight: bold;

      }

   .miring{

      font-style: italic;

      }

</style>






</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>

Maka akan menghasilkan seperti pada gambar di bawah ini.

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.

Saya kira itu lah pembahasan kita tentang Fungsi Tag Div dan Tag Span Beserta Cara Penggunaannya. Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya sobat!

Kuy ke materi berikutnya : Fungsi Meta Tag Dalam HTML Beserta Cara Penggunaannya