Tag <span> dan tag <div> adalah tag dalam HTML yang tidak memiliki makna apa apa, namun kita sering menemukan kedua tag ini di struktur web, Tag <div> dan <span> yang tidak memiliki style bawaan, bisa diubah menggunakan CSS, berikut adalah contoh dari tag <div> :
<html>
<head>
<title>Tag Div</title>
</head>
<body>
<div id="header">
<h1>
Judul Website</h1>
<img src="logo.png" />
</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">
......Isi dari artikel.....
</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">
Footer - Copyright Rivai.id 2K17
</div>
</body>
</html>Stuktur web diatas umum ditemukan pada web yang menggunakan CSS untuk men-style halaman tersebut. Masing masing tag <div> memiliki id tersendiri untuk membedakan nya dengan tag <div> yang lain.
Perbedaan Antara tag <span> dan tag <div>
Didalam tag HTML terdiri dari Block-Line dan In-line.
Jenis tag Block-line 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>), (<h1>..<h6>), dan (<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 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 (<em> atau <i>), tag (<strong> atau <b>) dan tag (<a>).
Tag div termasuk kedalam jenis block-line, sedangkan tag span termasuk kedalam in-line tag.
Contoh tag <div> dan <span>:
<html>
<style type="text/css">
#kalimat{
font-weight: bold;
}
.miring{
font-style: italic;
}
</style>
<head>
<title>Contoh </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.
EmoticonEmoticon