Langsung ke konten utama

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>

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
<!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>


Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

FUNGSI PERINTAH BREAK DAN CONTINUE DI PHP

Ketika proses perulangan berjalan, ada kalanya kita ingin segera keluar dari perulangan jika sebuah kondisi tertentu telah terpenuhi, sehingga sisa proses perulangan tidak perlu dijalankan. Misalkan kita memiliki nama-nama mahasiswa yang tersimpan di dalam sebuah array atau di dalam database. Proses pencarian sederhana dapat dirancang dengan melakukan pencocokan secara berulang dimulai dari nama pertama, kedua, dan seterusnya. Perulangan ini akan dilakukan sebanyak daftar mahasiswa yang ada. Akan tetapi, jika nama yang dicari telah ditemukan, proses perulangan seharusnya dapat dihentikan saat itu juga, karena tujuan pencarian nama telah selesai. Untuk keperluan inilah PHP menyediakan instruksi break .   Break berfungsi sebagai perintah kepada web server untuk menghentikan perulangan secara prematur , yaitu menghentikan perulangan di luar dari yang direncanakan. Cara Penulisan Perintah Break Perintah break dapat di letakkan di posisi manapun di dalam perulang...
Posting Komentar
Baca selengkapnya

Array Lanjutan

Array asosiatif Array asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Jika tidak ditentukan kunci dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka. Lihat code di samping. Kami telah mendeklarasikan dua variabel sebagai array. Apakah anda bisa menebak array mana yang merupakan array asosiatif? Betul, $array_saya adalah array asosiatif. Kedua array tersebut memiliki isi yang sama. Perbedaannya adalah bagaimana kita mengakses elemen-elemen di array tersebut. Contoh: // membuat array biasa $array_kamu = array(1610, 'VOC Belanda', 350); // membuat array asosiatif $array_saya = array( 'tahun' => 1610, 'organisasi' => 'VOC Belanda', 'total' => 350); // cara mencetak array biasa echo $array_kamu[0]; echo "\n"; echo $array_kamu[1]; echo "\n"; // cara mencetak array asosiatif echo $array_saya[ 'tahun...
Posting Komentar
Baca selengkapnya