cloud-hosting-terbaik-indonesia

Tutorial HTML Lanjutan: Perbedaan tag Span dan tag Div

Posted on

HTML digunakan bagi merancang ‘tujuan’ dari konten. Hampir seluruh tag mempunyai kebutuhan masing-masing. Misalnya tag <p> bagi paragraf, tag h1 bagi heading (judul), dan lain-lain. Namun ada 2 buah tag khusus, yaitu span dan div yang memang tak mempunyai ‘tujuan’ apa-apa. Di Panduan Belajar HTML: Perbedaan tag span dan div ini kita akan membahasnya lebih pada.


Pengertian tag Span dan tag Div

Tag <span> dan tag <div> ialah tag yang tak mempunyai makna apa-apa. Selain kedua tag ini, tag-tag lain di pada HTML mempunyai makna masing-masing. Jadi, apa guna dari kedua tag ini?

Tag <span> dan tag <div> yang tak bermakna ini malah menjadi diantara tag yang sangat sering digunakan bagi merancang struktur web, terutama tag <div>. Tag <div> yang tak mempunyai style bawaan (tak mempunyai efek tampilan apa-apa), dapat dengan gampang diubah menggunakan CSS. Biasanya tag <div> menggunakan atribut id selaku pembeda antara tag <div> yang satu dengan yang lainnya.

Contoh sangat umum bagi pemakaian tag <div> ialah selaku container atau pembatas satu struktur HTML dengan struktur lainnya. Berikut ialah contoh struktur HTML menggunakan tag <div>:

Stuktur web diatas umum ditemukan di web modern yang menggunakan CSS bagi men-style halaman tersebut. Perhatikan bahwa masing-masing tag <div> mempunyai atribut id yang membedakannya dengan tag <div> lainnya.


Perbedaan Antara tag Span dan tag Div

Secara garis besar, tag-tag di pada HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line.

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

Jenis tag In-line atau Inline style ialah tag yang tak merancang blok baru di pada struktur HTML. Tag jenis ini tak menambahkan spasi di ahir tag, dan cenderung menyambung tag sebelum dan sesudahnya pada baris yang sama. Contoh tag inline ialah 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 pada kode HTML berikut, savelah selaku spandiv.html

Contoh pemakaian tag div dan span:

Kedua paragraf akan mempunyai efek yang sama. Namun di paragraf kedua kita hanya menggunakan tag div dan span. Efek penebalan dan garis miring dari tulisan kita ubah lewat CSS.

Apabila kamu belum mempelajari CSS, tak perlu khawatir, namun dapat diingat bahwa tag span dan tag div adalah sebuah tag ‘tanpa makna’ yang dapat dimaknai.


Sumber https://www.duniailkom.com/