Blog Pintasku: Mengenal Tag Span dan Tag Div Dalam HTML

Pada Tutorial Dasar HTML kita mengenal berbagai tag dan setiap tag itu memiliki tujuan tersendiri. Misalnya Tag Heading yaitu untuk judul di dalam HTML dan tag <p> untuk membuat sebuah paragraf. Tapi untuk kali ini saya akan mengenalkan beberapa tag yang tidak memiliki makna atau tujuan, yaitu Tag Div dan Tag Span.

Saya sarankan sebelum sobat mempelajari lebih lanjut tentang Mengenal Tag Span dan Tag Div Dalam HTML. Saya sarankan untuk membaca terlebih dahulu tentang Tutorial Belajar Dasar HTML

Apa Itu Tag Span Dan Tag Div Dalam HTML ?

Tag Span dan Tag Div itu tidak memiliki makna atau tujuan tersendiri, berbeda dengan tag lain yang mempunyai tujuan atau fungsi tersendiri. Jadi Apa fungsi atau kegunaan Tag Span dan Tag Div ini ?

Perlu sobat ketahui bahwa penggunaan tag span dan tag div ini sangatlah sering digunakan didalam pembuatan sebuah halaman web, terutama tag Div. Kenapa sering digunakan padahal tidak memiliki makna atau tujuan ? Karena tag <div> itu tidak menghasilkan efek apa - apa , dan oleh sebab itu Tag <div> bisa dengan mudah di ubah dengan menggunakan CSS. Tag Div biasanya atau pada umumnya menggunakan atribut id atau class, dimana fungsi pemakaian atribut id dan class untuk membedakan antara tag div yang satu dengan yang lainnya.

Penggunaan Tag Div biasanya digunakan untuk pembuatan container atau secara sederhananya pembatas antara bagian bagian kelompok tag, seperti header, menu, footer, contetnt, sidebar. dll .

<!DOCTYPE html>
<html>
 <head>
   <title>Div</title>
 </head>
 <body>
  <div id="Header">
   <h1>Judul Website</h1>
  </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">
    <h2>ISI Konten</h2>
   </div>
  <div id="footer">
   <p>Footer - Copyright Duniailkom 2014</p>
  </div>
</html>

Apa perbedaan Antara Tag Div dengan Tag Span ?

Untuk perbedaan dari Tag Span dengan Tag Div itu terletak dari jenis tag. Umumnya tag itu ada 2 jenis, yaitu Tag Inline Element dan Block Element,

nahh Tag Div ini termasuk kedalam jenis Tag Block Element, dimana tag ini akan memisahkan diri dari tag yang lain dengan memberikan jarak. Sedangkan Tag Span termasuk kedalam jenis Inline Element yang dimana tag ini tidak akan memisahkan diri dari tag lain, tetapi akan menyambung dengan tag sebelumnya maupun tag sebelumnya,

Untuk lebih lengkapnya tentang Inline dan Block Element silahkan baca artikel saya sebelumnya tentang Mengenal Tag Inline Element dan Block Element Dalam HTML.

Berikut ini adalah contoh Perbedaan antara tag div dengan tag span.

<!DOCTYPE html>
<html>
 <style type="text/css">
   #block{
      font-weight: bold;
      }
   .inline{
      font-style: italic;
      }
 </style>
<head>
   <title>Belajar Membuat Form </title>
</head>
<body>
   <div id="block">
       Ini juga adalah Penggunaan Tag Div dengan atribut id
   </div>
 <p>
    ini adalah contoh <span class="inline">Penggunaan Tag Span dengan atribut Class</span>
    </p>
</body>
</html>

contoh Perbedaan antara tag div dengan tag span

Keterangan : Pada contoh di atas kalimat yang pertama itu menggunakan tag div dan yang kedua itu menggunakan tag p dan didalamnya ada tag span.

Sekian Penjelasan tentang Mengenal Tag Span dan Tag Div semoga artikel Tutorial ini bisa bermanfaat untuk semuanya. Terimakasih

Mengenal Tag Span dan Tag Div Dalam HTML

Apa Itu Tag Span Dan Tag Div Dalam HTML ?

Apa perbedaan Antara Tag Div dengan Tag Span ?

1 comment:

Mengenai Saya