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>

Seluruh penampung yang berisi elemen blok lebih lanjut sebelumnya hanya mungkin (dengan kode yang valid) menggunakan trik (misalnya, dengan posisi absolut dari lapisan hamparan yang ditautkan). Atau, tajuk dan paragraf ditautkan - ini pada gilirannya menyebabkan redundansi dan penampung tidak dapat diklik. Dengan tambahan selamat datang untuk HTML5, ini tidak lagi menjadi masalah.

Kembali