Tutorial HTML Lanjutan: Perbedaan Block Element dan Inline Element

Halo gan. Di postingan sebelumnya, kita sudah membahas cara membuat internal link di HTML.

Kita review sedikit. Internal link adalah link yang menuju ke suatu bagian dari halaman web. Cara membuatnya adalah dengan menambahkan atribut id pada tag yang dijadikan sebagai penanda bagian.
<h1 id="atas">Ini judul</h1>

Jika sudah ditambahkan, buat link dengan tag <a> disertai artibut href yang berisi tanda pagar (#) dan alamat ke bagian tag yang ditambahkan atribut id tadi.
<a href="#atas">klik untuk berpindah ke judul</a>

Kali ini, kita akan bahas block element dan inline element serta perbedaan diantara keduanya.

perbedaan block element dan inline element


Block Element dan Inline Element

Tag HTML ada 2 jenis, yakni block dan inline. Perbedaannya adalah pada tampilannya di web browser.

Block akan membuat baris baru dan memisahkan diri dari tag di sekitarnya. Sedangkan inline tidak membuat baris baru dan menyatu dengan tag di sekitarnya.

Kita bahas satu per satu. Mulai dari block element.

Block element

Tag HTML yang berjenis block element akan memisahkan diri dari tag di sekitarnya. Jadi halaman HTML akan menjadi terbagi-bagi, atau menjadi blok. 

Contoh tag berjenis block, yakni: tag paragraf <p>, tag list (<ul>, <ol>, atau <dl>), dan heading (<h1> s/d <h6>). 

Block element akan ditampilkan terpisah dari tag sebelum dan sesudahnya dengan berpindah baris baru. Dan biasanya, ada spasi antara tag sesudah dan sebelumnya.

Kita coba koding HTMLnya.
<!DOCTYPE html>
<html>
  <head>
   <title>Perbedaan block element dan inline element</title>
  </head>
  <body>
    <h1>Ini adalah element h1</h1>
    <p>Ini adalah element p</p>
    <ul>
      <li>Dan ini adalah elemen ul</li>
      <li>Dan ini adalah elemen ul juga</li>
    </ul>
  </body>
</html>

Simpan dengan nama block-elemen.html. Kalau dijalankan, hasilnya akan seperti ini:

perbedaan block element dan inline element

Dari gambar di atas kita bisa lihat bahwa block element akan terpisah dari tag di sekitarnya (membuat blok) dan membuat baris baru. Terlihat juga ada jarak di antara bloknya.

Inline element

Kalau tag berjenis inline element, tidak akan membuat blok sendiri, tidak terpisah dari tag di sekitarnya. Tag jenis ini akan menyatu dengan tag yang ada di sekitarnya. Juga, tidak membuat baris baru.

Contoh tag berjenis inline, yakni: tag <em>, tag <i>, dan tag <b>.

Kita coba buat file HTML dengan nama inline-element.html. Seperti ini kodenya.
<!DOCTYPE html>
<html>
  <head>
   <title>Perbedaan block element dan inline element</title>
  </head>
  <body>
    <em>Ini adalah elemen em</em>
    <b>Ini adalah element b</>
    <i>Ini adalah element i</i>
  </body>
</html>


perbedaan block element dan inline element

Terlihat kan perbedaannya dengan block element. Inline element akan saling menyatu dan tidak terpisah-pisah, tidak membentuk blok, dan tidak membuat baris baru. Dia akan mengikuti alur dari tag-tag yang ada di sekitarnya.

Itulah perbedaan block element dan inline element. 

Tampilan perbedaan dari kedua jenis tag tersebut tidaklah mutlak karena dapat diubah oleh CSS. Misalnya, block element menjadi inline element, inline element menjadi block element.

Namun, Karena HTML digunakan untuk menyusun struktur halaman web, secara struktur begitulah perbedaan block element dan inline element.

Dengan berakhirnya postingan ini, berakhir juga sesi Tutorial HTML Lanjutan. Setelah itu kita akan bahas beberapa cara formating atau memanipulasi teks di HTML.

Manipulasi teks itu seperti teks miring, bercetak tebal, bergaris bawah, teks bercoret, teks quote, dan lainnya.

Pertama-tama, kita akan bahas cara membuat huruf miring di HTML terlebih dahulu.


0 Komentar untuk "Tutorial HTML Lanjutan: Perbedaan Block Element dan Inline Element"