Perbedaan Paragraph, Span, dan Div pada Tag HTML

Paragraph, Span, dan Div

Pada kesempatan kali ini, saya akan membahas tentang Perbedaan antara Paragraph, Span dan  Div pada Tag HTML. Ketiga Tag tersebut pasti kita jumpai didalam dokumen HTML. Karena ketiga Tag tersebut berfungsi sebagai pengatur paragraf, kalimat, atau pun per kata. Yang dapat berarti bahwa ketiga Tag tersebut adalah Tag yang penting dan paling dasar didalam dokumen HTML. Baiklah langsung saja kita bahas perbedaannya dibawah ini.

1. Paragraph (<p>)
   
   Sesuai dengan namanya Paragraph atau Paragraf digunakan untuk menentukan elemen atau beberapa kalimat yang akan dijadikan sebuah paragraf HTML.Didalam sebuah paragraf HTML tidak boleh berisi tabel dan pemblokiran lainnya. Penggunaannya dengan menggunakan Tag <p> dan diakhiri atau ditutup dengan Tag </p>.

   Contoh :
   <p> Ini adalah Paragraf yang Pertama </p>
   <p> Ini adalah Paragraf yang Kedua </p>
   <p> Ini adalah Paragraf yang Ketiga </p>
   <p> Ini adalah Paragraf yang Keempat </p>
   <p> Ini adalah Paragraf yang Kelima </p>
   
   Hasil :
   Ini adalah Paragraf yang Pertama
   
   Ini adalah Paragraf yang Kedua
   
   Ini adalah Paragraf yang Ketiga
   
   Ini adalah Paragraf yang Keempat
   
   Ini adalah Paragraf yang Kelima
   
   
2. Span (<span>)
   
   Span digunakan untuk untuk mengelompokkan atau menerapkan style ke elemen baris. Span biasanya kita temui saat akan memberikan sebuah perbedaan dari suatu kalimat atau kata misalnya saat kita akan mengubah warna suatu kata, pasti kita akan menggunakan span dan ditambahkan atribut. Penggunaannya dengan Tag <span> dan ditutup dengan </span>.

   Contoh :
   <span> Ini adalah Konten Span yang Pertama</span>
   <span> Ini adalah Konten Span yang Kedua</span>
   <span> Ini adalah Konten Span yang Ketiga</span>
   <span> Ini adalah Konten Span yang Keempat</span>
   <span> Ini adalah Konten Span yang Kelima</span>
   
   Hasil :
   Ini adalah Konten Span yang Pertama Ini adalah Konten Span yang Kedua Ini adalah Konten Span yang Ketiga Ini adalah Konten Span yang Keempat Ini adalah Konten Span yang Kelima
3. Division (<div>)
   
   Tag ini tidak lebih dari unit penampung yang merangkum elemen halaman lainnya dan membagi (division) dokumen HTML menjadi beberapa bagian. Sama halnya dengan Tag span, Tag div  juga  digunakan untuk mengelompokkan elemen HTML dan menerapkan gaya CSS ke banyak elemen sekaligus. Hanya saja, jika span digunakan di elemen baris (inline) sedangkan div digunakan pada konten level blok garis.

   Contoh :
   <div>Ini adalah Konten Div yang Pertama</div>
   <div>Ini adalah Konten Div yang Kedua</div>
   <div>Ini adalah Konten Div yang Ketiga</div>
   <div>Ini adalah Konten Div yang Keempat</div>
   <div>Ini adalah Konten Div yang Kelima</div>
   
   Hasil :
   

   Ini adalah Konten Div yang Pertama

   Ini adalah Konten Div yang Kedua

   Ini adalah Konten Div yang Ketiga

   Ini adalah Konten Div yang Keempat

   Ini adalah Konten Div yang Kelima

Dapat disimpulkan bahwa Tag <p>, <span>, dan <div> ketiga Tag tersebut sangat mirip atau bahkan cenderung sama. Namun ketiga Tag tersebut ada perbedaannya. Tag <p> untuk membuat suatu paragraf yang berarti bukan satu baris yang sama atau pun satu per satu baris. Sedangkan tag <span> untuk tampilan dalam baris yang sama (inline) dan tag <div> untuk menampilkan satu per satu baris (division/dibagi-bagi).

Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.