HTML Lanjutan: Perbedaan Tag Div dan Tag Span di HTML

HTML Lanjutan: Perbedaan Tag Div dan Tag Span di HTML - Sebelumnya kita sudah selesai membahas belajar koding HTML kita tentang HTML Dasar. Nah Sekarang kita akan memulai belajar koding HTML Lanjutan yaitu tentang perbedaan tag div dan tag span dalam HTML.

Pengertian Tag Div dan Tag Span

Tag didalam HTML berfungsi untuk membuat konten didalam sebuah halaman website. Contohnya tag <p> untuk membuat paragraf, tag <table> untuk membuat tabel, <form> untuk membuat form dan lain-lain.

Tag <div> dan tag <span> tidak memiliki peranan tertentu di dalam HTML namun menjadi sangat berguna ketika dikombinasikan dengan CSS.

Jadi apa fungsi dari kedua tag ini ?

Tag <div> dan tag <span> ini berfungsi untuk mendesain struktur sebuah halaman web dengan menggunakan CSS. Tag <div> dan tag <span> tidak memiliki tampilan apa-apa.

Contoh penggunaannya sebagai berikut :


<!DOCTYPE html>
<html>
<head>
   <title>Tag Div dan Tag Span</title>
</head>
<body>
    <div>
        <p>Paragraf ini dibungkus didalam tag div</p>
    </div>
    
    <p>Ada <span>tag span</span> didalam paragraf ini</p>

</body>
</html>

Hasilnya :

Nah, sekarang kita lihat hasilnya gimana? Tampak seperti biasa aja ya kan. Ya seperti itulah tag <div> dan tag <span> tidak memiliki efek tampilan apa-apa.

Untuk membedakan tag <div> yang satu dengan tag <div> lainnya adalah dengan memberi sebuah atribut yaitu atribut id. Id tersebut berfungsi untuk menjadi selector terhadap penggunaan CSS.


<!DOCTYPE html>
<html>
<head>
   <title>Tag Div dan Tag Span</title>
</head>
<body>
    <div id="header">
        <h1>Websiteku</h1>
        <img src="logo_websiteku.jpg" />
    </div>

    <div id="navigasi">
        <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 &copy; paltycox.com</p>
    </div>
</body>
</html>

Umumnya, struktur halaman web seperti diatas sudah sering ditemukan di web modern ini yang menggunakan CSS untuk mendesainnya. Lihat atribut id yang membedakan tag <div> dengan div yang lain.

Perbedaan Tag <div> dan Tag <span>

Tag yang berada didalam HTML, terdiri dari 2 jenis element yaitu Block-line Element dan In-line Element. Kita sudah membahasnya pada pengertian tag, atribut dan element pada HTML.

Tag <div> tergolong kedalam Block-line Element dan tag <span> tergolong kedalam In-line Element.

Untuk perbedaan kedua tag ini, dapat kita lihat dengan contoh kode HTML dibawah ini, silahkan ketik kode nya lalu simpan dengan nama tagdivspan

Contoh penggunaan tag div dan tag span


<!DOCTYPE html>
<html>
 <style type="text/css">
   #kalimat{
      font-weight: bold;
      }
   .miring{
      font-style: italic;
      }
 </style>
<head>
   <title>Perbedaan Tag Div dan Span</title>
</head>
<body>
   <p>
       <strong>Kalimat ini merupakan sebuah <em>Paragraf</em> </strong>
   </p>
   <div id="kalimat">
       Kalimat ini juga merupakan sebuah  <span class="miring">Paragraf</span>
   </div>
</body>
</html>

Hasilnya :

Memang sekilas terlihat kedua paragraf diatas memiliki efek yang sama.

Pada paragraf yang kedua kita menggunakan tag <div> dan tag <span>. Untuk huruf cetak tebal dan huruf garis miring, kita mengubahnya dengan menggunakan CSS.

Jika Kamu belum belum tau apa itu CSS, tidak perlu merasa khawatir, karena di paltycox.com tersedia untuk belajar koding CSS.

Namun hal yang perlu untuk Kamu ingatbahwa tag span dan tag div merupakan tag ‘tanpa makna’ yang bisa dimaknai.