HTML digunakan untuk membuat 'tujuan' dari konten. Hampir semua tag memiliki keperluan masing-masing. Misalnya tag <p> untuk paragraf, tag h1 untuk heading (judul), dan lain-lain. Namun ada 2 buah tag khusus, yaitu span dan div yang memang tidak memiliki 'tujuan' apa-apa. Pada Tutorial Belajar HTML: Perbedaan tag span dan div ini kita akan membahasnya lebih dalam.
Pengertian tag Span dan tag Div
Tag <span> dan tag <div> adalah tag yang tidak memiliki makna apa-apa. Selain kedua tag ini, tag-tag lain di dalam HTML memiliki makna masing-masing. Jadi, apa fungsi dari kedua tag ini?
Tag <span> dan tag <div> yang tidak bermakna ini malah menjadi salah satu tag yang paling sering digunakan untuk membuat struktur web, terutama tag <div>. Tag <div> yang tidak memiliki style bawaan (tidak memiliki efek tampilan apa-apa), dapat dengan mudah diubah menggunakan CSS. Biasanya tag <div> menggunakan atribut id sebagai pembeda antara tag <div> yang satu dengan yang lainnya.
Contoh paling umum untuk penggunaan tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan struktur lainnya. Berikut adalah contoh struktur HTML menggunakan tag <div>:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Div</title>
</head>
<body>
<div id="header">
<h1>Judul Website</h1>
<img src="logo_website.jpg" />
</div>
  Â
<div id="menu">
<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 Duniailkom 2014</p>
</div>
</body>
</html>
Stuktur web diatas umum ditemukan pada web modern yang menggunakan CSS untuk men-style halaman tersebut. Perhatikan bahwa masing-masing tag <div> memiliki atribut id yang membedakannya dengan tag <div> lainnya.
Perbedaan Antara tag Span dan tag Div
Secara garis besar, tag-tag di dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line.
Jenis tag Block-line atau Block-style adalah kelompok tag yang 'ingin' berdiri sendiri, dan memisahkan diri dari tag disekitarnya.Block Style tag umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi (enter) di akhir tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>). Tag Block-line akan membuat sebuah 'blok' dalam struktur HTML. Di dalam tag ini bisa terdapat tag block lain, maupun tag In-line.
Jenis tag In-line atau Inline style adalah tag yang tidak membuat blok baru di dalam struktur HTML. Tag jenis ini tidak menambahkan spasi di akhir tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam baris yang sama. Contoh tag inline adalah 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 dalam kode HTML berikut, savelah sebagai spandiv.html
Contoh penggunaan tag div dan span:
<!DOCTYPE html>
<html>
<style type="text/css">
#kalimat{
font-weight: bold;
}
.miring{
font-style: italic;
}
</style>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<p>
<strong>Ini adalah <em>Sebuah</em> paragraf </strong>
</p>
<div id="kalimat">
Ini juga <span class="miring">Sebuah</span> paragraf
</div>
</body>
</html>
Kedua paragraf akan memiliki efek yang sama. Namun pada paragraf kedua kita hanya menggunakan tag div dan span. Efek penebalan dan garis miring dari tulisan kita ubah melalui CSS.
Jika anda belum mempelajari CSS, tidak perlu khawatir, namun dapat diingat bahwa tag span dan tag div merupakan tag 'tanpa makna' yang bisa dimaknai.
Kok punya saya di tag , outputnya kok g miring ya?padahal udah copas
font-style nya di gabung sama font-weight
Maaf mas, memang ada kekurangan di kode programnya, lupa menambahkan class="miring" pada tag , sekarang contohnya sudah saya update lagi..
terimah kasih atas imponya gag ini sangat berman faat
Terimakasih kunjungannya mas hasmal…
div buat layout. lebih fleksibel dengan penambahan class. Sangat berbeda jauh ketika me-layout menggunakan table yang tidak bisa wrap ketika menerapkan responsive design.
terimakasih atas tambahannya pakdheihsan, div memang lebih banyak digunakan untuk membuat layout, lalu di-"style" menggunakan CSS.
ci hiiu dapat ilmu baru lagi…..?
Senang bisa membantu mady, mudah-mudahan bisa bermanfaat.
Bagus ,Bahasanya Mudah Di Pahami ,Mungkin Anda Bisa Menambahkan Ilmu Komputer Lain Seperti :Asp ,c++ ,VB ,Java Dll
trims.
Terimakasih atas usulannya… :) mudah2an saya juga sempat untuk menambahkan tutorial bahasa pemograman lain. Salah satu alasan pemilihan nama duniailkom adalah agar bisa menampung tutorial selain pemograman web, Namun untuk saat ini saya masih fokus ke web programming…
Setelah tutorial web programming dirasa cukup, saya akan masuk ke tutorial lain… :)
Ditambahkan juga membuat layout paragraf yang panjang kalimatnya beserta tampilan image dan jk di gabung dengan php. Selain itu jg membuat tutorial php yang isinya membahas ttg suatu case DSS(Desision Support) yang membahas html, php beserta algoritma nya.. Trims..
Terimakasih atas usulannya, iya saya ada rencana juga untuk kesana, namun saat ini masih fokus untuk tutorial dasar dulu, setelah di rasa lengkap, baru akan membuat tutorial gabungan seperti form login, validasi form, pagination, dll… mudah2an dalam waktu yang tidak lama lagi… :)
gan kalo misal saya udah buat 2 html(home.html dan produk.html),,,trus dri home.html mau saya lanjutkan ke produk.html dengan cara mengeklik kata produk di home.html yg sudah saya sediakan,,,kira" gmn nih script nya???,,sebelumnya makasih,salam newbie
maaf gan di salah satu web saya menjmpai tag yg berhubungan dengan tag , namun saya bingng tag ini kok fugsinya untuk membuat kolom.??
ini tag nya gan
solid
apa ini merupakn kombinasi dari beberapa bhs. pemrograman atau memang multifungsi???
mohon pencerahannya gan…!
maklum gan newbie. he he he
salam sukses slalu………!!!
Terimakasih sudah berbagi ilmu yang sangat bermanfaat ini mas Andre.
Oya, maaf OOT, ada yang punya WP theme premium untuk company profile dengan halaman katalog yang stylish dan elegan gak ya?
Mohon maaf mas, saya tidak punya file themenya, silahkan coba di googling aja misalnya "free wp theme". Atau invest beli theme premium :)
terima kasih mas ilmu html nya, sangat bermanfaat! :)
hmm.. saya masih newbie yg mau belajar membuat website, saya bingung apa yg paling baik saya pelajari untuk belajar membuat website? saya baru kenal html saja dengan memakai html++
bisa minta sarannya ga mas andre, baik nya apa saja yang saya pelajari untuk membuat website?
terima kasih sebelumnya, sukses trus! :)
Notepad++ maksud saya, bukan html++ hehe, sorry newbie ^^"
Kalau tujuannya ingin membuat website, saat ini ada alternatif: cara instant atau cara reguler, hehe…
Jika hanya butuh 'membuat website' tanpa repot2 mempelajari semua kode program dibaliknya, bisa langsung pelajari aplikasi CMS (content management system) seperti WordPress atau Joomla. Khusus untuk wordpress, cara instalasinya bisa kesini: tutorial belajar wordpress duniailkom. Tapi memang masih belum lengkap…
Tapi jika ingin membangun website dari dasar, atau malah ingin berkarir sebagai web programming, web designer, dll. Memang harus mempelajari kode-kode program di baliknya. Saat ini website modern terdiri dari HTML, CSS, PHP, MySQL, dan JavaScript. Mau tidak mau semuanya harus dipelajari untuk membangun sebuat website. Penjelasan lengkapnya bisa kesini: Ingin belajar web programming? harus mulai dari mana?.
Mudah2an bisa dapat sedikit gambarannya :)
wah makasih masukannya ^^
mudah dimengerti thakns ya!!
Sama2 gan, semoga tutorialnya bisa bermanfaat…
Mudah-mudahan berkah gan.:)
ana minta ridhonya nih, nyoba belajar di sini
agar cepat mengerti , coba saja ubah tag span di atas menjadi tag div
Terimakasih untuk tambahan tipsnya gan :)
tambahan ilmu ;)
makasi mas andre :)
Siip, sama2 mas sahwan. Semoga bermanfaat…
wah bagus nih buat refersi, sangat bermanfaat bang Adre
penjelasannya bagus bgt, mudah dimengerti
kapan ya tutorial java dibuat hehe
Request di tampung y gan, tp kayaknya belum dalam waktu dekat, soalnya saat ini saya masih fokus ke web programming.
Ko andre,, dibagian <style ="text/css">
#kalimat { font-weight ; bold }
.miring {font-style ; italic }
kenapa ada yg pake "#" dan ".(titik)" mohon pencerahannya ko..
Itu kode program CSS gan. Untuk bisa memahaminya, silahkan lanjut baca2 tutorial belajar CSS dasar di duniailkom…
Melanjutkan komentar di atas agan, ohh berarti kedua contoh diatas menggunakan kode program CSS y gan, soalnya di contoh yg prtma jg ada tnda "#" trus di contoh kedua jg pada tag syle
*< styletype="text/css"> #kalimat{ font-weight: bold; } .miring{ font-style: italic; } </ style>* jg, keduanya kn blum prnah dibahas pada tutorial HTML sebelumnya, jdi keduanya mrupkan kode program CSS ya gan? Maaf gan newbie bgd soalnya saya mau prlajari HTML dulu jadi blum smpet buka2 CSS.. Mohon pncerahanya gan trimakasih
Kalau untuk contoh yang pertama, tanda '#' hanya sebagai pengganti link, atau sering dibilang sebagai link dummy.
Sedangkan kalau yang kedua, betul gan itu pakai CSS. Karena seperti pembahasan dalam artikel ini, tag <div> dan tag <span> baru berguna jika dipasangkan dengan CSS. Tanpa CSS, kedua tag ini tidak bermakna apa2.
Oke mas paham saya.. Pantesan saya bingung ada tag select dsb hehe, krn sblumnya blum ad pmbhsan. Mungkin materi html lanjutan ini saya pelajari stelah semua bab html saya pelajari dlu ya dari yg format text dll baru ke html lanjutan biar nanti itu buat gmbran pelajari css. Siap2 mas mksih banyak..
Siip, sama2 gan… :)
c++ dong om, hehe. Ada matkul itu soalnya dan masih bingung.
Bagus om websitenya, semoga makin berkembang yaa.
Requestnya di tampung y gan, mudah2an nanti sempat buat tutorial C dan C++ di duniailkom :)
GImana caranya meng-Upload website yang sudah jadi?
#newbie
Agar webnya bisa online, agan harus sewa web hosting dan web domain dulu. Kemudian nanti filenya diupload menggunakan menu cPanel dari web hosting. Tutorial lengkapnya bisa kesini: https://www.duniailkom.com/tutorial-cara-membuat-website-online/
Makasih banyak kang, buat ngejelasin tag <div> sama <span>. Semoga informasi yang bisa dijelaskan berguna bagi pembaca dan pembuatnya. hatur nuhun kang. Salam Syahda dari Bandung.
Amiiin… salam kenal juga :)
kren banget blognya Andre penyusunan kata2-nya juga mudah dimengerti bagi pemula ;) numpang shared ya kk andre?
semua tutornya aku dah ambil dan jadiin txt biar bisa dibuka di hp comuniceter :v #canda doang
makasi infonya ya bang andre,,,
blognya banyak yang ngelike di fb apalagi di GROUP Palembang Hacker Link Chat
kalo bisa ditingkatin lagi biar bisa jadi MASTA :D :D
by Jack.deviloped
Hehe.. siip gan, semoga bisa bermanfaat :)
Bos, tolong donk diajari untuk men style tag ol dan ul, maklum ,masih anak bawang ini bos…suwun sblmnya
Caranya, silahkan belajar HTML dan CSS gan… kalau mau yang lebih lengkap bisa cari2 buku khusus yang membahas HTML dan CSS.
Walaupun belum terlalu faham tapi akan saya pelajari terus secara pelan-pelan dan sebelumnya terimakasih mas buat penjelasannya, Semoga tetap selalu menyajikan informasi bermanfaat.
Siip, semoga bisa bermanfaat…
mas,kalo buku css uncover itu belinya dimana y
Saat ini cara pembeliannya hanya via online (belum tersedia di toko2 buku). Apabila berminat, bisa kontak saya via email ke [email protected]. Buku CSS Uncover tersedia dalam bentuk buku cetak maupun versi eBook.
gan bisa buatin tugas buat ane gk?, soalny susah belajar kalo cuma ngebaca , tapi klo ada yg ngasih tugas kaya "buat laman seperti gambar ini" gtu + dikasih penjelasan fungsi tag2 nya
Thx
mau tanya sebenernya penggunaan ID dan CLASS pada DIV itu sama apa beda ya ?
Tambahan atribut class dan id ke dalam tag DIV berfungsi sebagai penanda untuk kode CSS. Kalau kode CSSnya sama, keduanya juga akan berefek sama. Penjelasan lebih lanjut akan dipelajari saat belajar CSS.
Bang Andre Request tutorial vb dong hehe
Request di tampung ya…
Mas andre tadi saya baca di komen di atas katanya tanda"#" itu kan pengganti link atau biasa disbut link dummy. Dan di pljaran html lanjutan ini kan udh ada tag yng harus di ubah pake css, jadi menurut mas andre saya harus belajar css dasar smbil bljar htlm, apa saya selesein blajar html dulu sampai selesei baru belajar css. Makasih
Yang mana saja boleh, tapi sepertinya lebih pas selesaikan dulu seluruh tutorial HTML baru lanjut ke CSS.
Saya belajar banyak dari web ini. Bahasanya sangat mudah dimengerti, terutama bagi saya yang tidak memiliki background pemrograman web. Semoga konsisten update kontennya.
Siip, terimakasih untuk dukungannya, semoga bisa bermanfaat…
Ternyata seperti itu, karena setiap saya inspect elemen mesti bingung apaan maksudnya div?
terima kasih :)
thank you min ^^ tutornya sangat membantu .. sukses terus ya min, semoga nanti di bahas juga yang bahasa pemograman berorientasi object xoxo
btw ane pakai sublime text jadi lebih senang!!!
Sip, sublime text memang text editor yang sangat populer. Hanya saja sublime text ini tidak gratis (berbayar sekitar 1jt). Versi demonya juga tidak bisa digunakan terus.
Jadi daripada pakai yang bajakan, sebaiknya pilih text editor yang benar2 free, seperti Notepad++, Bracket atau Komodo Edit. Fiturnya memang lebih sederhana, tapi mudah2an bisa jadi lebih berkah…
Siap, request ditampung… untuk saat ini sudah ada materi OOP PHP. Untuk bahasa pemrograman lain seperti Java, akan menyusul…
untuk penambahan <style type="text/css"> di file html apa perlu install css, saya mencoba contoh di atas menggunakan notepad bawaan windows, hasilnya baris pertama tampil sedangkan baris kedua tidak tampil, terima kasih.
kok saya ngetik sendiri di notepad++ persis kayak contoh tapi kok kalimat sebuah di tag span gk miring ya malah ikutan tebel
Boleh coba copy paste saja kode programnya, mana tau ada yang salah ketik…
Tapi teks di dalam tag <span> memang akan tebal karena berasal dari kode CSS untuk tag <div>
ooh ok makasih banyak atas pencerahannya
pake anchor?
<a href"nama_file.html">
Apa kah ini materi yang ada di buku ² uncover? Bang?
Secara umum materi di eBook jauh lebih banyak dibandingkan dari yang ada di web duniailkom. Sekitar 70% materi hanya ada di buku.
Contohnya di buku HTML Uncover nanti akan belajar tentang tag <audio>, <video>, <canvas>, dan <svg>. Semua ini tidak ada tutorialnya di web duniailkom (hanya tersedia di buku)