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 menarik pada aturan elemen bersarang. HTML selalu membedakan antara elemen blok dan inline. Misalnya, Definisi Tipe Dokumen HTML4 mencantumkan h1, p, dan div sebagai elemen blok dan a, span, dan 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>

Menautkan seluruh wadah yang berisi elemen blok tambahan sebelumnya hanya dapat dilakukan (dengan kode yang valid) menggunakan trik (misalnya dengan pemosisian absolut dari lapisan overlay tertaut). Alternatifnya, judul dan paragraf ditautkan - hal ini pada gilirannya menyebabkan redundansi dan penampung tidak dapat diklik. Berkat ekstensi HTML5 yang diterima, hal ini tidak lagi menjadi masalah.

Kembali