HTML dipakai untuk menciptakan �tujuan� dari konten. Hampir semua tag mempunyai 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 mempunyai �tujuan� apa-apa.
Pengertian tag Span dan tag Div
Tag <span> dan tag <div> adalah tag yang tidak mempunyai 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 dipakai untuk menciptakan struktur web, terutama tag <div>. Tag <div> yang tidak mempunyai style bawaan (tidak mempunyai efek tampilan apa-apa), sanggup dengan gampang diubah memakai CSS. Biasanya tag <div> memakai atribut id sebagai pembeda antara tag <div> yang satu dengan yang lainnya.
Contoh paling umum untuk penggunaan tag <div> ialah sebagai container atau pembatas satu struktur HTML dengan struktur lainnya. Berikut pola format penggunaan tag <div> :
<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
</head>
<body>
<div id="header">
<h1>RuangIlmu</h1>
<img src="logo_ruangilmu.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>Belajar HTML</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 RuangIlmu Januari 2018</p>
</div>
</body>
</html>
Stuktur web diatas umum ditemukan pada web modern yang memakai CSS untuk 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 dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line.
Jenis tag Block-line atau Block-style ialah kelompok tag yang �ingin� bangkit sendiri, dan memisahkan diri dari tag disekitarnya.Block Style tag umumnya akan tampil pada baris gres dan secara otomatis menambahkan spasi (enter) di simpulan tag. Contoh tag Block-line yaitu tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>). Tag Block-line akan menciptakan sebuah �blok� dalam struktur HTML. Di dalam tag ini sanggup terdapat tag block lain, maupun tag In-line.
Jenis tag In-line atau Inline style ialah tag yang tidak menciptakan blok gres di dalam struktur HTML. Tag jenis ini tidak menambahkan spasi di simpulan tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam 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.
Berikut ini ialah pola Perbedaan antara tag div dengan tag 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 ialah <em>Sebuah</em> paragraf </strong>
</p>
<div id="kalimat">
Ini juga <span class="miring">Sebuah</span> paragraf
</div>
</body>
</html>
Kedua paragraf akan mempunyai efek yang sama. Namun pada paragraf kedua kita hanya memakai tag div dan span. Efek penebalan dan garis miring dari goresan pena kita ubah melalui CSS.
Sumber http://informasigameindo11.blogspot.com
EmoticonEmoticon