Perbedaan Antara Div dan Span Tag

 ⊛ • 4 mins read

Main Image
Photo by Angèle Kamp on Unsplash

Halo semuanya, apa kabar? Mudah-mudahan selalu diberikan kesehatan ya. Pada kali ini saya akan menjelaskan mengenai Perbedaan Antara Div dan Span Tag.

Mungkin kalian pernah bertanya-tanya, apasih perbedaan antara div dan span tag? Yuk simak selengkapnya untuk mengetahuinya.

Div Tag

Div tag atau yang biasa disebut division tag digunakan dalam HTML untuk membuat bagian-bagian konten dalam web seperti header, body, footer, dll.

Div tag memiliki opening tag <div> dan closing tag </div>. Seperti yang kita ketahui bahwa div tag adalah block level element yang berarti akan membuat baris baru sebelum dan sesudah tag div. Perhatikan contoh berikut sebagai gambarannya.

  • Contoh 1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
      <!DOCTYPE html>
      <html>
      <head>
          <title>Div</title>
          <style>
          div {
              color: white;
              background-color: red
          }
          </style>
      </head>
      <body>
          Sebelum div
          <div>Ini div</div>
          Sesudah div
      </body>
      </html>
    
  • Output

    img

  • Contoh 2
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
      <!DOCTYPE html>
      <html>
      <head>
          <title>Div</title>
          <style>
          div {
              color: white;
              background-color: red
          }
          </style>
      </head>
      <body>
          Sebelum div <div>Ini div</div> Sesudah div
      </body>
      </html>
    
  • Output

    img

Nah, seperti kedua contoh diatas dapat dilihat bahwa outputnya sama karena div membuat baris baru sebelum dan sesudahnya.

Span Tag

Span tag biasa digunakan dalam HTML untuk membuat styling suatu konten pada website.

Span tag memiliki opening tag <span> dan closing tag </span>. Seperti yang kita ketahui bahwa span tag adalah inline element yang berarti tidak membuat baris baru sebelum dan sesudah tag span. Perhatikan contoh berikut sebagai gambarannya.

  • Contoh 1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
      <!DOCTYPE html>
      <html>
      <head>
          <title>Div</title>
          <style>
          span {
              color: white;
              background-color: green
          }
          </style>
      </head>
      <body>
          Sebelum span. <span>Ini span.</span> Sesudah span.
      </body>
      </html>
    
  • Output

    img

  • Contoh 2
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
      <!DOCTYPE html>
      <html>
      <head>
          <title>Div</title>
          <style>
          span {
              color: white;
              background-color: green
          }
          </style>
      </head>
      <body>
          Sebelum span. 
          <span>Ini span.</span> 
          Sesudah span.
      </body>
      </html>
    
  • Output

    img

Nah, seperti kedua contoh diatas dapat dilihat bahwa outputnya sama karena span tidak membuat baris baru sebelum dan sesudahnya.

Jadi kesimpulannya div adalah block level element yang cocok digunakan untuk membuat bagian-bagian dari website, sedangkan span adalah inline element yang lebih cocok digunakan untuk memberi styling pada suatu konten dalam website.

Share this post:


Tags Other Articles Cara Membuat CRUD dengan PHP dan MySQL Apa Itu CSS Combinator