HTML 5.1 Diungkap:14 Penjelasan Fitur Baru &Penggunaan Praktis
HTML5 dimiliki oleh World Wide Web Consortium (W3C), yang menyediakan standar di seluruh web sehingga protokol dari seluruh dunia dapat diakses satu sama lain. Pada bulan November 2016, W3C memperbarui HTML 5 yang sudah berjalan lama, yang merupakan pembaruan kecil pertama dalam 2 tahun. Banyak fitur awal HTML 5.1 yang dihilangkan karena kesalahan desain dan kurangnya dukungan vendor browser.
Meskipun ada beberapa elemen dan perbaikan yang dibawa ke HTML 5.1, ini masih merupakan pembaruan kecil. Beberapa elemen baru berisi tag kombo, yang kini mencakup
W3C telah mulai mengerjakan draf HTML 5.2 yang diharapkan akan dirilis menjelang akhir tahun 2017. Sementara itu, kami menyajikan beberapa fitur baru yang menarik dan peningkatan yang diperkenalkan di versi 5.1. Anda dapat menggunakan fitur-fitur ini tanpa menyentuh JavaScript. Tidak semua browser mendukung fitur ini, jadi sebaiknya Anda memeriksa dukungan browser sebelum menggunakannya dalam produksi.
14. Cegah Serangan Phishing
Kebanyakan orang yang menggunakan target='_blank' tidak mengetahui fakta aneh – tab yang baru dibuka dapat mengubah window.opener.location menjadi halaman phishing. Ini akan mengeksekusi beberapa kode JavaScript berbahaya di halaman pembuka atas nama Anda. Karena pengguna mempercayai halaman yang sudah dibuka, mereka tidak akan curiga.
Untuk sepenuhnya menghilangkan masalah ini, HTML 5.1 telah menstandarkan penggunaan atribut rel=”noopener” yang memisahkan konteks browser. Rel=”noopener” dapat digunakan dalam tag dan .
<a href="#" target="_blank" rel="noopener">
The link won't make trouble anymore
</a>
Baca:24 Alat Animasi CSS3 dan HTML5 untuk Desainer
13. Menangani Keterangan Gambar secara Fleksibel
Tag mewakili keterangan atau legenda yang terkait dengan elemen , yang bertindak sebagai wadah untuk visual seperti gambar, diagram, ilustrasi, dll. Dalam versi HTML awal, hanya dapat digunakan sebagai tag turunan pertama atau terakhir dari elemen . HTML5.1 telah melonggarkan batasan ini, dan sekarang Anda dapat menggunakan di mana saja dalam wadah -nya.
<article>
<h1>The Headline of todays news </h1>
<figure>
<img src="petrolimage.jpeg" alt="Petrol price drops">
<figcaption>A man fueling up his car at petrol station</figcaption>
</figure>
<p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>
12. Pemeriksaan Ejaan
Pemeriksaan ejaan adalah atribut yang disebutkan yang kata kuncinya berupa string kosong, benar dan salah. Keadaan sebenarnya menunjukkan bahwa elemen tersebut harus diperiksa ejaan dan tata bahasanya. element.forceSpellCheck() memaksa agen pengguna untuk melaporkan kesalahan ejaan dan tata bahasa pada elemen teks, meskipun pengguna tidak pernah memfokuskan elemen tersebut.
Atribut booleanallowfullscreen, yang dikembangkan untuk frame, memungkinkan Anda mengontrol apakah konten dapat ditampilkan sendiri di layar penuh dengan menggunakan metode requestFullscreen(). Misalnya, mari kita ambil iframe yang menyematkan pemutar dari YouTube. Atributallowfullscreen diperlukan agar pemutar dapat menampilkan videonya dalam layar penuh.
<article>
<header>
<p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
<p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
</header>
<main>
<p>Check out my new video!</p>
<iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
</main>
</article>
9. Header dan Footer Bersarang
HTML 5.1 memungkinkan Anda menyarangkan header dan footer di dalam header lain. Anda dapat menambahkan header atau footer ke elemen header jika elemen tersebut terdapat dalam konten bagian. Fitur ini bisa sangat berguna jika Anda ingin menambahkan header yang rumit ke elemen pembagian semantik, seperti dan .
Pada kode di bawah ini, berisi yang memiliki tag
<article>
<header>
<h2>Lesson: How to cook chicken</h2>
<aside>
<header>
<h2>About the author: Tom Hank</h2>
<p><a href="./tomhank/">Contact him!</a></p>
</header>
<p>Expert in nothing but Cooking. The cookbook sideshow.</p>
</aside>
</header>
<p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
Remove as much air as possible from the bag and seal it. </ins></p>
</article>
8. Gambar Lebar Nol
Versi HTML baru memungkinkan Anda menambahkan gambar berukuran nol. Fitur ini digunakan ketika gambar tidak ditujukan untuk pengguna. Jika elemen img digunakan untuk tujuan selain menampilkan gambar, misalnya sebagai bagian dari layanan untuk menghitung jumlah tampilan halaman, gunakan atribut lebar dan tinggi dengan nilai 0. Untuk gambar dengan lebar nol, disarankan menggunakan atribut kosong.
Metode reportValidity() yang baru memungkinkan Anda memvalidasi formulir dan mengambil hasilnya, serta melaporkan kesalahan kepada pengguna langsung di browser. Agen pengguna dapat melaporkan lebih dari satu pelanggaran batasan, jika elemen tersebut mengalami beberapa masalah pada saat yang bersamaan. Seperti dalam kasus ini, masukan “kata sandi” harus ditandai dengan kesalahan karena bersifat wajib tetapi kosong.
