Tipe Elemen dalam HTML


   Dokumen HTML terbentuk dari elemen - elemen. Elemen itu sendiri terbentuk dari tag beserta isi didalam tag itu sendiri. Dari hasil belajar kita yang lalu, kita telah membahas tentang Penjelasan Tag, Element, dan Attribute dalam HTML. Kali ini kita akan belajar jenis dan karakteristik elemen dalam HTML.

Secara umum, Jenis elemen dalam HTML terdiri dari 2 jenis yaitu:

  • Block Element
  • Inline Element

 

- Block Elemen

Elemen Block mempunyai karakteristik yaitu elemen tersebut selalu tampil pada baris baru. Beberapa contoh elemen block misalnya sebgai berikut:

  • <p>...</p>
  • <ol>...</ol>
  • <ul>...</ul>
  • <li>...</li>
  • <table>...</table>
  • <form>...</form>
  • <div>...<div>
  • <h1>...</h1> s/d <h6>...</h6>

Jika kita amati saat menuliskan elemen tersebut, pasti akan dimulai dari ganti baris terlebih dahulu, kecuali pada elemen - elemen tertentu yang ukurannya telah diperkecil dan disesuaikan. 



<h1> Elemen h1 <ul><li> Contoh Elemen Block </li></ul> </h1>


Dari sintak diatas akan menghasilkan tampilan seperti dibawah ini.

Kita dapat melihat contoh diatas, meskipun elemen <ul> ditulis berada satu baris dan berada di dalam elemen <h1> tetapi tetap saja hasilnya elemen itu berbeda baris. Seperti yang sudah dijelaskan bahwa block elemen punya karakter selalu memulai dari baris yang baru.

 

- Inline Element

Sedangkan jenis elemen Inline, mempunyai karakteristik yaitu akan tampil tanpa harus ganti baris (Ini berarti kebalikan dari elemen block). Contoh elemen Inline seperti berikut ini: 

  • <span>
  • <a>
  • <img>
  • <b>
  • <strong>
  • <input>

Sebagai contoh ketika kita menuliskan sintak elemen <h1> kemudian menuliskan salah satu elemen inline seperti <span> didalamnya, maka elemen span itu akan tetap berada satu baris dengan elemen <h1>.

 



<h1> Elemen h1 <span style="color: red;"> Diisi dengan elemen span </span> </h1>


Dari sintak diatas akan menghasilkan tampilan seperti dibawah ini.

Pada contoh diatas saya menambahkan atribut style dan memberikan nilai warna merah untuk mempermudah dan pembeda bahwa elemen tersebut adalah elemen <span>. Kita akan bahasa lebih banyak atribut pada kesempatan lain. Pada contoh diatas kita bisa melihat bahwa elemen span tetap berada pada baris dimana elemen itu dituliskan. Hal itu membuktikan bahwa elemen tersebut adalah elemen inline yang mempunyai karakter tidak memulai pada baris baru.

Catatan: "Kamu dapat menuliskan sintak elemen inline didalam elemen block, tetapi jika kamu menuliskan sebaliknya elemen block ditulis didalam elemen inline maka hasilnya elemen block akan tetap bekerja dengan memulai dengan baris baru."

Baiklah sobat webmaster yang baik hati, demikian kita telah mengetahui jenis elemen dan juga karakternya. Sebagai pengetahuan kita bersama, bahwa ada beberapa elemen yang dapat kamu tuliskan baik sebagai elemen block ataupun elemen inline yaitu:

  • APET - embedded Java applet
  • IFRAME - bingkai sebaris
  • INS - teks yang disisipkan
  • PETA - peta gambar
  • OBJEK - objek yang tertanam
  • SCRIPT - script dalam dokumen HTML


Membuat Tabel dan Beberapa Atributnya    -    Membuat Form dengan Sintak HTML


Berikan Komentar Anda