Tag Div Pada Html Dan Tag Span Pada Html Beserta Contoh
< div > ????
Ketika kita mulai berguru HTML tentunya kita harus mempelajari fungsi dan kegunaan dari tag-tag milik HTML. ibarat sebelumnya kita telah membahas Cara Membuat Teks Berjalan Dengan Tag Marquee HTML
Kali ini kita akan lanjut membahas perihal tag <div> dan <span> dan mungkin bagi temen-temen yang belum begitu paham ini sanggup membantu temen-temen.
Apa Itu Tag <div> ???
Div ialah salah satu tag / isyarat perintah dari bahasa html yang kegunaan nya sangat sering sekali di pakai oleh web aktivitas dan bahkan tag ini mempunyai tugas penting dalam mendesain halaman web.
Div artinya Division (Divisi) pengelempokan atau menyatukan beberapa elemen-elemen html menjadi satu group.
Fungsi <div> Itu Apa ?
Fungsi div sendiri cukup sederhana yaitu sebagai tag pembungkus mengelompokkan beberapa elemen html menjadi satu semoga gampang untuk di desain.
Tag ini hampir sama dengan tag <table> yaitu menciptakan desain dan membangun layout pada halaman web, namun perbedaannya <table> pengelompokan dan desain dari dokumen html dan sanggup kita lihat hasil nya secara eksklusif pada halaman browser saat dijalankan.
Bagaimana Dengan Div ? div saat kita tulis pada dokumen html dan saat kita jalankan pada browser secara eksklusif tidak menghasilkan apa-apa.
Kenapa?? karna div mempunyai tujuan khusus dan mempunyai relasi dengan desain melalui CSS (Cascading Style Sheet), artinya tag div membutuhkan pihak lain di luar html itu sendiri, tetapi penggunaan tag div ini akan lebih mempermudah kita dalam mendesain halaman web dan akan menampilkan hasil yang lebih baik secara graphic.
Tag div mempunyai 2 atribut yang biasa dipakai :
1. Id rujukan penulisan nya ibarat ini <div id="menu"> elemen group </div>2. Class contoh penulisannya ibarat ini <div class="menu"> elemen group </div>
Untuk terang nya temen-temen lihat pada gambar dibawah ini (cara penulisan) :
1. Penulisan hanya memakai <div> saja (dengan Notepad++) :
 | |||
| Gambar Contoh |
2. Penulisan <div> dengan atribut Id
 |
| Gambar Contoh |
 |
| Gambar Contoh |
Catatan : tag div atau pun tag div beserta atributnya tidak akan menghasilkan apa-apa jikalau tidak di dukung oleh Css, artinya penggunaan tag div ini ialah sebagai pengelompokkan dari tag-tag html lainnya semoga nantinya isyarat kode perintah tersebut sanggup menghasilkan desain halaman web. pada dasarnya tag div ini untuk mempermudah para web desain dalam mengerjakan desain web nya.
< Span> ????
Bagaimana Dengan <Span>, Apa Itu Tag <Span>?
Span dan Div kegunaan nya hampir sama, namun pada span hanya untuk menciptakan kelompok pada inline / barisan konten atau artikel (isi). kenapa span hanya bekerja pada baris? alasannya sifat span ialah inline artinya tag span dapan disispkan didalam isi barisan halaman konten atau artikel. Contoh tag span sanggup disisip didalam tag <p> paragraf ".
Tag span juga akan berfungsi jikalau didukung oleh Css, tanpa Css span pun tidak akan menampilkan apa-apa pada halaman web saat dijalankan di halaman browser.
Fungsi <span> itu apa?
span berfungsi sebagai isyarat perintah untuk mengelompokkan suatu baris pada isi konten atau artikel, sebagai rujukan contohnya ukuran font, warna tulisan, gaya goresan pena (harus terhubung dengan css).
Tag span juga sanggup diberi / ditambahkan atribut id dan class ibarat tag div, sebagai rujukan penulisan sebagai berikut :
1. <p> ini ialah goresan pena aku <span id="bariskata"> dengan memakai tag span </span> </p>
2. <p> ini ialah goresan pena aku <span class="bariskata"> dengan memakai tag span </span> </p>Untuk terang nya temen-temen lihat pada gambar dibawah ini (cara penulisan) :
 |
| Gambar Contoh |
Catatan : tag span sama ibarat tag div, yang tidak berarti apa-apa atau menghasilkan apa-apa saat dijalankan pada browser, artinya tag ini harus terhubung dengan css..... (temen-temen akan mempelajari ini nanti saat temen-temen mulai berguru masuk ke css untuk berguru mendesain halaman web semoga terlihat lebih baik tampilannya.
Yang terpenting ialah temen-temen kuasai sebuah pelajaran step by step (satu persatu - langkah demi langkah) semoga saat temen-temen melanjutkan ke pelajaran yang lain akan sangat gampang temen-temen pahami. Temen-temen juga sanggup melihat kode-kode HTML beserta fungsinya DISINI
Sampai disini dulu artikel kali ini, semoga sanggup membantu temen-temen belajar.... untuk artikel selanjutnya akan aku post secara perlahan langkah demi langkah. Terima Kasih buat temen-temen yang sudah berkunjung ke blog saya.