Perbedaan Antara Tag Div dan Span
January 01, 2018
Add Comment
Setiap tag HTML memiliki tujuan atau makna masing-masing seperti tag
Pengertian Tag
Tag
Contoh yang paling sering untuk penggunaan tag
Untuk membuat tampilan website di atas terlihat bagus kita bisa menggunakan CSS, tapi untuk pembahasan kali ini Saya tidak akan menggunakan CSS.
Pada contoh kode di atas, masing-masing tag
Perbedaan Antara Tag
Perbedaan antara tag
Supaya lebih paham silahkan ketikan kode di bawah ini :
Terlihat teks "Ini adalah kalimat pertama" yang di apit oleh tag
Supaya lebih paham silahkan ketikan kode di bawah ini :
Terlihat pada gambar di atas teks "Ini adalah kalimat pertama" yang berada diantara tag
Selain itu di dalam jenis tag block line juga bisa di tambahkan tag block line yang lain, maupun tag in line. Contohnya seperti kode di bawah ini :
Terlihat pada contoh kode di atas, terdapat 2 jenis tag block line yaitu tag
Jika Anda belum tahu apa itu CSS Anda tidak perlu khawatir nanti akan Saya bahas pada Tutorial CSS, yang perlu Anda ingat tag
Pada artikel selanjutnya kita akan membahas Cara Mengatur Posisi dan Tampilan Gambar di HTML.
<h1> sampai dengan tag <h6> untuk membuat judul, tag <p> untuk membuat paragraf, tag <a> untuk membuat link dan masih banyak lagi yang lain. Namun terdapat 2 buah tag yang tidak memiliki makna apa-apa, yaitu tag <div> dan <span>. Walaupun tidak memiliki makna apa-apa tapi tag ini sering di gunakan untuk membuat struktur website ataupun untuk memberi style pada sebuah teks, nah pada artikel kali ini Saya akan membahas tentang perbedaan antara tag <div> dan <span> secara lebih mendalam.
Pengertian Tag <div> dan <span>
Tag <div> dan <span> adalah tag yang tidak memiliki makna apa-apa, walaupun begitu tag ini sering di gunakan untuk membuat struktur atau bagian-bagian website. Itu karena tag <div> dan <span> yang tidak memiliki makna apa-apa, dapat dengan mudah di tambahkan style-nya atau tampilannya dengan CSS.Contoh yang paling sering untuk penggunaan tag
<div> adalah sebagai pemisah satu bagian kode HTML dengan bagian kode HTML yang lainnya. Berikut ini adalah contoh kode HTML yang menggunakan tag <div> :<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<div id="header">
<h1>Nama website</h1>
</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="article">
<p>Isi dari artikel...</p>
</div>
<div id="sidebar">
<h3>Artikel Popular</h3>
<ul>
<li><a href="#">Artikel 1</a></li>
<li><a href="#">Artikel 2</a></li>
<li><a href="#">Artikel 3</a></li>
</ul>
</div>
<div id="footer">
<p>Copyright © 2017 Mas Abdi</p>
</div>
</body>
</html>
Untuk membuat tampilan website di atas terlihat bagus kita bisa menggunakan CSS, tapi untuk pembahasan kali ini Saya tidak akan menggunakan CSS.
Pada contoh kode di atas, masing-masing tag
<div> memiliki atribut id yang membedakan dengan tag <div> yang lainnya.
Perbedaan Antara Tag <div> dan <span>
Perbedaan antara tag <div> dan <span> adalah pada jenis tag-nya. Tag <div> merupakan jenis tag block line sedangkan tag <span> termasuk ke dalam jenis tag in line. Berikut ini penjelasan tentang perbedaan tag berjenis in line dan block line.Block Line
Block line adalah tag yang memisahkan dirinya dengan tag lain yang ada di sekitarnya. Block line umumnya akan membuat baris baru secara otomatis. Contoh tag yang termasuk jenis block line yaitu tag untuk membuat judul<h1> sampai <h6>, tag untuk membuat paragraf <p>, tag untuk membuat tabel <table>, dan tag yang tidak memiliki makna apa-apa<div> .Supaya lebih paham silahkan ketikan kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<div>Ini adalah kalimat pertama</div>
<div>Ini adalah kalimat kedua</div>
</body>
</html>
Terlihat teks "Ini adalah kalimat pertama" yang di apit oleh tag
<div>..</div> pada gambar di atas, akan membuat sebuah blok dan secara otomatis akan membuat baris baru yang membuat teks "Ini adalah kalimat kedua" berpindah baris. Itu karena tag <div> memiliki style bawaan browser yaitu display: block; yang memungkinkan tag <div> membuat sebuah blok yang panjang.In Line
Jenis tag in line tidak akan membuat baris baru ataupun membuat sebuah blok. Tag ini cenderung akan menyambung dengan tag yang di sekitarnya dalam baris yang sama. Contoh jenis tag in line adalah tag untuk membuat garis miring<i> dan <em>, tag untuk membuat garis tebal <strong> dan <b>, tag untuk membuat link <a> dan tag yang tidak memiliki makan apa-apa <span>.Supaya lebih paham silahkan ketikan kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<span>Ini adalah kalimat pertama</span>
<span>Ini adalah kalimat kedua</span>
</body>
</html>
Terlihat pada gambar di atas teks "Ini adalah kalimat pertama" yang berada diantara tag
<span>...</span> tidak akan membuat sebuah blok yang panjang dan terlihat menyambung dengan teks "Ini adalah kalimat kedua" atau tag yang ada di sekitarnya pada baris yang sama. Itu karena tag <span> tidak memiliki style bawaan browser yang memungkinkan tag <span> dapat menyambung dengan tag yang ada di sekitarnya.Selain itu di dalam jenis tag block line juga bisa di tambahkan tag block line yang lain, maupun tag in line. Contohnya seperti kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<meta charset="utf-8"/>
<style>
#kalimat {
padding: 10px;
background: palegreen;
}
#belajar-html {
color: blueviolet;
font-weight: bold;
}
</style>
</head>
<body>
<div id="kalimat">
<p>Sekarang Saya sedang belajar <span id="belajar-html">HTML</span>.</p>
</div>
</body>
</html>
Terlihat pada contoh kode di atas, terdapat 2 jenis tag block line yaitu tag
<p> dan <div>, dan terdapat 1 jenis tag in line yaitu tag <span>. Tag <p> berada di dalam tag <div> sedangkan tag <span> berada di dalam tag <p>. Itu artinya jenis tag block line juga bisa di tambahkan tag block line yang lain dan juga tag in line. Tampilan latar belakang teks dan juga warna teks kita menggunakan CSS.Jika Anda belum tahu apa itu CSS Anda tidak perlu khawatir nanti akan Saya bahas pada Tutorial CSS, yang perlu Anda ingat tag
<div> dan <span>merupakan tag tanpa makna yang bisa kita maknai dengan CSS.Pada artikel selanjutnya kita akan membahas Cara Mengatur Posisi dan Tampilan Gambar di HTML.
0 Response to "Perbedaan Antara Tag Div dan Span"
Post a Comment