Tutorial HTML Lanjutan: Perbedaan Tag Div dan Span

Halo gan. Ini adalah tutorial perdana di sesi Tutorial HTML Lanjutan. Sebelumnya, kita sudah membahas tutorial HTML untuk pemula dan sudah saatnya kita berlanjut ke tahap selanjutnya.

Semua list tutorial HTML akan di posting di halaman Tutorial HTML. Dan bagi yang penasaran pembahasan kita terakhir tentang apa bisa lihat di: Tutorial HTML untuk Pemula: Membuat Form di HTML.

Terus, apa yang mau kita bahas di postingan ini?

Kali ini kita akan bahas apa itu tag <div> dan <span>, dan juga perbedaan di antara keduanya.

perbedaan div dan span

Pengertian tag <div> dan <span>

Setiap tag HTML punya tujuan/makna tertentu yang menunjukkan itu bagian konten apa. Misalnya, tag <p> bagian konten paragraf, tag <ol> bagian konten list/daftar, tag <table> bagian konten tabel, dan lain sebagainya.

Tag <div> dan <span> tidak punya tujuan/makna seperti tag lainnya. Padahal, tag inilah yang paling sering digunakan dalam mendesain halaman web.

Kok bisa?

Karena tag <div> dan <span> ini nggak punya makna tersendiri, kedua tag ini fleksibel digunakan. Artinya, kita bisa mengatur dan memasang makna (style CSS) sesuai yang kita mau dengan tag ini.

Jadi, tag <div> dan <span> adalah tag yang tidak punya makna dan style bawaan (tidak punya efek tampilan apa-apa).

Contohnya seperti ini:
<!DOCTPYE html>
<html>
  <head>
    <title>Tag div dan tag span</title>
  </head>

  <body>
    <div>Ini adalah kalimat yang ditulis di dalam tag div</div>
    <span> Sedangkan ini adalah kalimat yang ditulis di dalam tag span</span>
  </body>
</html>

Akan menghasilkan:

perbedaan div dan span

Hasilnya sama dan biasa saja. Karena kedua tag tersebut, tag <div> dan <span>, tidak memiliki efek tampilan apa-apa.

Untuk membedakan tiap-tiap tag <div> dan <span>, keduanya diberi atribut id. Id inilah yang akan menjadi selector CSS yang bisa dibedakan stylenya.

Contoh yang paling umum adalah untuk pemisahan bagian-bagian web. Ada bagian kepala, bagian konten, bagian sidebar bagian footer, dan bagian lainnya.
<!DOCTPYE html>
<html>
  <head>
    <title>Penggunaan tag div</title>
  </head>

  <body>
    <div id="header">
      <h3>Ini adalah bagian header</h3>
    </div>

    <div id="menu">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact us</a>
    </div>

    <div id="konten">
      <p>Ini adalah bagian konten..</p>
    </div>

    <div id="sidebar">
      <ul>
        <li>Ke halaman 1</li>
        <li>Ke halaman 2</li>
        <li>Ke halaman 3</li>
      </ul>
    </div>

    <div id="footer">
      <p>Ini adalah bagian footer</p>
    </div>
  </body>
</html>

Dulu, bagian-bagian web di desain pakai tabel. Kebayang deh ribetnya kaya apa. Nah kalo sekarang ini, web modern menerapkan div id untuk membuat bagian/struktur web, seperti kode di atas.

Di HTML5 malah lebih canggih lagi. Tiap bagian-bagian web sudah punya tag masing-masing, seperti bagian kepala tagnya <header>, bagian bawah/kaki tagnya <footer>, dan masih banyak lagi.

HTML5 juga akan kita bahas di postingan-postingan selanjutnya, tunggu ya. Oke, back to topik. Lalu, dimana perbedaannya?

Perbedaan tag <div> dan <span>

Perbedaan antara tag <div> dan <span> adalah pada jenis tagnya. Tag <div> merupakan jenis tag block-line sedangkang tag <span> adalah jenis tag in-line..

Apa itu block-line dan in-line? Keduanya adalah jenis tag. Jadi tag HTML punya 2 jenis; block-line dan in-line.

Block-line
Adalah tag yang akan membuat baris baru dari suatu elemen HTML. Jadi, tag ini akan memakan area sampai ujung layar browser dan secara otomatis akan berpindah baris baru.

Tag yang termasuk dalam block-line, seperti tag <h1> sampai <h6>, tag <div>, tag <p>, dan tag <table>.

Supaya lebih ngena lagi, kita praktikkan saja.
<!DOCTPYE html>
<html>
  <head>
    <title>Tag div dan tag span</title>
  </head>

  <body>
    <div>Ini kalimat pertama</div>
    <div>Ini kalimat kedua</div>
  </body>
</html>

Seperti ini jadinya:

perbedaan div dan span

Tag <div> akan mem-block 1 area sampai ujung layar browser dan secara otomatis berpindah baris. Sedangkan in-line.

Baca juga ya..
Baru 7 Tahun, Muhammad Hamza Shahzad Sudah Jadi Programmer
Terlahir Cacat di Wajah, Bayi Ini Wajahnya Seperti Ada 2
Koran Bekas Disulap Jadi Ukiran Hewan, Keren Banget Jadinya

In-line 
Adalah tag yang tidak membuat baris baru dari suatu elemen HTML. Jadi, tag ini tidak memakan area sampai ujung layar browser, hanya seluas kontennya saja, dan juga tidak akan berpindah baris baru.

Tag yang termasuk dalam in-line, seperti tag <em>, tag <i>, tag <strong>, tag <b>, dan tag <span>.

Coba kita praktikkan dengan kode di atas dengan mengganti tag <div> dengan tag <span>.
<!DOCTPYE html>
<html>
  <head>
    <title>Tag div dan tag span</title>
  </head>

  <body>
    <span>Ini kalimat pertama</span>
    <span>Ini kalimat kedua</span>
  </body>
</html>

Jadinya seperti ini:

perbedaan div dan span

Terlihat kan perbedaannya?

Maka dari itu, tag <div> cocok digunakan untuk membuat bagian-bagian web dan tag <span> cocok digunakan untuk memberi style ke kata yang ada di tengah kalimat.

Selesai sudah pembahasan kita kali ini tentang perbedaan div dan span.

Next, kita akan bahas pengertian meta tag pada HTML.


0 Komentar untuk "Tutorial HTML Lanjutan: Perbedaan Tag Div dan Span"