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

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Macam Macam Tag dan Fungsinya dalam HTML

Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML.Tag html biasanya terdiri dari tag pembuka dan tag penutup, tag pembuka <nama tag> dan tag penutup </namatag> namun ada beberapa hanya mengunakan 1 tag dengan mengabungkan tag pembuka dan tag penutup contoh <br/> contoh tag dngan 1 tag: 1. <br/> break ganti baris 2. <hr/> membuat garis horisontal 3. <img/> menampilkan gambar U sahakan untuk menutup semua tag. Penulisan untuk semua Tag bebas, maksudnya kita bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ). Tapi untuk mengantisipasi standar penulisan Tag, sebaiknya kita menggunakan huruf kecil semua. Tag dalam HTML mempunyai berbagai jenis, yaitu Tag Tag dasar, Tag Tag pemformatan, Tag Tag Computer-Output, Tag Tag Citation, Quotation, dan Definition dan masih banyak lainnya. 1. Tag Dasar Tag awal Kegunaan ...
Posting Komentar
Baca selengkapnya

Fibonacci Dengan PHP

Fibonacci Dengan PHP - adalah membuat baris fibonaccy (bilangan yang ditambah dengan bilangan sebelumnya) contoh 1 2 3 5 8 13 21 ... $bil_sebelum=0; $bil_sekarang=1; for ($i=1; $i<10; $i++) {   $hasil = $bil_sekarang + $bil_sebelum;   echo " $hasil";   $bil_sebelum = $bil_sekarang;   $bil_sekarang = $hasil; } Penjelasan $bil_sebelum=0; membuat variabel $bil_sebelum, $bil_sekarang=1; membuat variabel $bil_sekarang for adalah perulangan jika kondisi bernilai true/benar for terdiri dari parameter nilai awal, nilai akhir perubahan. for (nilai awal, nilai/batas akhir, perubahan){ menampilkan jika kondisi benar } $i=1; artinya nilai awal ditetapkan yaitu 1 $i<10; artinya nilai akhir harus kurang dari 10 $i++; artinya variabel $i ditambah 1 bisajuga ditulis $i+1 $hasil berasal dari $bil_sekarang + $bil_sebelum; echo "$hasil"; artinya untuk menampilkan hasil ke layar/output $bil_sebelum = $bil_sekarang; artinya mereplace/menganti $bil_sebelum...
Posting Komentar
Baca selengkapnya

PERINTAH-PERINTAH DASAR LINUX

Siapa yang tidak kenal dengan linux,OS dengan system keamanan yang tinggi dan tentunya gratis....Seperti yang sobat ketahui LInux dikenal dengan CLI-nya (Command Line Iterfaces).dan kebanyakan orang atau perusahaan menggunakan linux sebagai SOJ pada server-server mereka       Bagi para pemula yang ingin mengenal dasar-dasar linux sebaiknya bukan hanya menghapal namun juga harus mempraktekkannya secara langsung.karna didalam linux intinya bukan hapalan namun tindakan yang sobat lakukan.berikut perintah" dasar di linux: 1.sudo su digunakan untuk login sebagai root/pengguna tertinggi sintaks: sudo  su 2.root digunakan untuk login sebagi root sintaks: root 3.login digunakan untuk login sebagai user lain,namun harus menjadi root terlebih dahulu untuk bias menjalankan perintah ini. Sintaks: login  nama_user 4.cd (change directory) digunakan untuk berpindah directory/folder sintaks: cd  alamat_directory contoh: cd ...
Posting Komentar
Baca selengkapnya