Penggunaan fungsi FDIV pada PHP

Tutorial HTML Lanjutan: Perbedaan tag Span dan tag Div

Table of Contents Show

Pengertian tag Span dan tag Div
Perbedaan Antara tag Span dan tag Div
Kapan kita menggunakan div?
Untuk apa tag div digunakan?
Apa itu elemen div?
Apa Perbedaan DIV dan Section?

05 May 13 | | Tutorial HTML | |

HTML digunakan untuk membuat ‘tujuan’ dari konten. Hampir semua tag memiliki keperluan masing-masing. Misalnya tag <p> untuk paragraf, tag h2 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 containeratau 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">
    <h2>Judul Website</h2>
    <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">
    <h2>Artikel Terbaru</h2>
      <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(<h2>..<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.

Kapan kita menggunakan div?

Penggunaan div ditujukan untuk memudahkan aplikasi bergaya dengan CSS dan memperlakukan secara khusus yang nantinya dapat diberi Class, ID, Title, dan sebagainya. Biasanya, fungsi tag div pada HTML digunakan untuk mengelompokkan elemen atau bermacam-macam tag agar menjadi suatu grup.

Untuk apa tag div digunakan?

Fungsi div pada HTML biasanya untuk mengelompokkan elemen atau tag-tag agar menjadi suatu grup. Tag div ini juga sering digunakan untuk mendefinisikan id atau class dari css. Fungsi div pada HTML lainnya yang sering digunakan oleh para programmer adalah untuk membatasi bagian satu dengan bagian yang lain.

Apa itu elemen div?

Elemen Div pada HTML dapat dijadikan sebagai wadah untuk menempatkan beberapa elemen menjadi satu bagian, yang penggunaannya ditujukan untuk mempermudah aplikasi gaya dengan CSS dan perlakukan khusus lainnya yang kemudian dapat diberi atribut Class, ID, Title, dan lain sebagainya.

Apa Perbedaan DIV dan Section?

div sendiri tidak punya arti khusus, dia hanya elemen kosong. Untuk section secara "arti" dia adalah bagian tertentu dari website kamu. misalnya bagian artikel bisa pakai section.