Goodbye Block & Inline - Selamat Datang di HTML5

Inovasi spesifikasi HTML5 sangat banyak dan banyak di antaranya sudah didukung oleh sebagian besar lanskap browser - di bawah ini saya ingin menyoroti perubahan yang menarik pada aturan untuk elemen bersarang. HTML selalu membedakan antara elemen blok dan sebaris. Definisi Tipe Dokumen HTML4, misalnya, menamai h1, p, dan div sebagai elemen blok dan a, span, img sebagai elemen sebaris.


Konsep ini sekarang telah ditinggalkan (untuk alasan yang bagus). Dalam beberapa kasus penggunaan, banyak desainer web mengabaikan kebenaran aturan bersarang tersebut bahwa tidak ada elemen blok yang mungkin berada dalam elemen sebaris, atau perilaku standar yang menggunakan aturan CSS seperti display: inline; atau tampilan: blok; (yang sering menyebabkan kode tidak valid) tanpa basa-basi lagi.

HTML5 sekarang memperhalus perbedaan ini dan bahkan menamai 9 kategori berbeda tempat elemen dapat berada, di mana elemen dapat berada dalam beberapa kategori. Perbedaan lama antara elemen blok dan sebaris dilemparkan ke laut dan banyaknya arti tag di web diperhitungkan. Secara khusus, ini memiliki konsekuensi bahwa konstruksi berikut mewakili kode yang valid:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

Sebelumnya, menghubungkan seluruh kontainer yang berisi elemen blok lebih lanjut hanya dimungkinkan (dengan kode yang valid) melalui solusi sementara (misalnya, dengan memposisikan lapisan overlay yang ditautkan secara absolut). Alternatifnya, kita dapat menghubungkan judul dan paragraf – yang pada akhirnya menyebabkan redundansi dan membuat kontainer tidak dapat diklik. Berkat perluasan HTML5 yang sangat bermanfaat, ini bukan lagi masalah.

Kembali