Tutorial Belajar HTML5 Bagian 16 : Blok Elemen & Inline Elemen Pada HTML

0
547

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar HTML5 Bagian 15 : Cara Membuat Link Pada Email di HTML, pada tutorial kali ini kita aka mempelajari apa itu blok elemen & inline elemen pada HTML.

Di HTML, semua elemen dapat dibagi menjadi 2 kategori yaitu :

  • Blok Elemen
  • Inline Elemen

Blok Elemen

Pada blok elemen, setiap tag penutup, akan memulai baris yang baru.

Misalnya, pada tag <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, dan <address> adalah blok elemen.

Tag ini akan selalu memulai di baris baru, dan tag apa pun yang mengikuti mereka akan muncul di baris barunya sendiri.

Inline Elemen

Sebaliknya, inline elemen adalah tag yang selalu berada pada 1 baris dan tidak dapat membuat baris baru sendiri.

Contoh pada tag <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd>, dan <var> semuanya adalah inline elemen.

Mengelompokkan Elemen HTML

Ada 2 tag penting yang sering digunakan untuk mengelompokkan berbagai tag HTML lainnya :

  • tag <div>
  • tag <span>

Tag <div>

Ini adalah tag blok level yang sangat penting dan memainkan peran besar dalam mengelompokkan berbagai tag HTML lainnya juga menerapkan CSS pada sekelompok elemen.

Bahkan sekarang tag <div>, dapat digunakan untuk membuat layout halaman web di mana kita mendefinisikan bagian yang berbeda (Kiri, Kanan, Atas dll) dari halaman menggunakan tag <div>.

Tag ini tidak memberikan efek perubahan visual apa pun pada blok, tetapi memiliki arti yang lebih jika digunakan dengan CSS.

Berikut adalah contoh sederhana dari tag <div>. Kita akan mempelajari Cascading Style Sheet (CSS) dalam tutorial terpisah, tetapi untuk keperluan conotoh, kita akan menggunakannya di sini untuk menunjukkan fungsi tag <div> :

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!—Tag kelompok pertama -->
      <div style = "color:red">
         <h4>Ini adalah grup pertama</h4>
         <p>Berikut ini adalah daftar sayur-sayuran </p>
         
         <ul>
            <li>Wortel</li>
            <li>Jahe</li>
            <li>Kentang</li>
            <li>Bayam</li>
         </ul>
      </div>

      <!—Tag kelompk kedua -->
      <div style = "color:green">
         <h4>Ini adalah kelompok kedua </h4>
         <p>Berikut ini adalah daftar buah-buahan </p>
         
         <ul>
            <li>Apel</li>
            <li>Pisang</li>
            <li>Mangga</li>
            <li>Jeruk</li>
         </ul>
      </div>
   </body>
   
</html>

Browser akan menampilkan hasil seperti berikut ini :

Tag <span>

Tag <span> adalah inline elemen dan dapat digunakan untuk mengelompokkan tag inline elemen dalam dokumen HTML.

Tag ini juga tidak memberikan efek perubahan visual apa pun pada blok, tetapi memiliki lebih banyak arti ketika digunakan dengan CSS.

Perbedaan antara tag <span> dan tag <div> adalah bahwa tag <span> digunakan pada inline elemen sedangkan tag <div> digunakan dengan level blok elemen.

Berikut adalah contoh sederhana dari penggunaan tag <span>. Kita akan mempelajari Cascading Style Sheet (CSS) dalam tutorial terpisah, tetapi kita menggunakannya di sini untuk menunjukkan penggunaan tag <span> :

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>Ini adalah <span style = "color:red">merah</span> dan ini adalah
         <span style = "color:green">hijau</span></p>
   </body>
	
</html>

Browser akan menampilkan hasil seperti berikut ini :

Semoga tutorial ini bisa membantu Anda memahami apa itu blok elemen & inline elemen serta cara penggunaannya pada dokumen HTML.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.