Beranda » Coding » 10 Fitur Baru HTML 5.1 & Cara Menggunakan Mereka IRL

    10 Fitur Baru HTML 5.1 & Cara Menggunakan Mereka IRL

    Spesifikasi HTML mendapat perbaikan besar-besaran beberapa minggu yang lalu ketika W3C menerbitkan rekomendasi HTML 5.1 baru pada November 2016. Dalam posting blog terbarunya, W3C menyebut rilis besar baru itu standar emas, karena HTML 5.1 memberi kami cara baru tentang bagaimana kami dapat menggunakan HTML untuk menciptakan pengalaman web yang lebih fleksibel.

    Pada artikel ini, kita akan melihat fitur-fitur barunya yang dapat Anda manfaatkan tanpa menyentuh JavaScript, namun peningkatan latar belakang JavaScript juga luar biasa, seperti yang Anda lihat di log perubahan resmi.

    Perhatikan bahwa saat ini tidak semua browser mendukung semua fitur ini, jadi jangan lupa untuk melakukannya periksa dukungan browser sebelum Anda menggunakannya dalam produksi. Jika Anda tertarik pada pengembangan lebih lanjut dari standar HTML, Anda dapat memeriksa konsep kerja HTML 5.2 juga.

    1. Tentukan beberapa sumber gambar untuk desain responsif

    Di HTML 5.1, Anda bisa menggunakan tag bersama dengan srcset atribut untuk dibuat pemilihan gambar responsif mungkin. Itu tag mewakili sebuah wadah gambar yang memungkinkan pengembang untuk mendeklarasikan sumber gambar yang berbeda untuk beradaptasi dengan UAUkuran viewport, kerapatan piksel layar, tipe layar, dan parameter lain yang digunakan di desain responsif.

    Itu tag itu sendiri tidak menampilkan apa-apa, itu berfungsi hanya sebagai konteks untuk beberapa sumber gambar. Anda harus mendeklarasikan sumber daya gambar default sebagai nilai dari src atribut dari tag, dan sumber gambar alternatif masuk ke dalam srcset atribut dari dan elemen.

    Contoh kode:

    2. Tampilkan atau sembunyikan informasi tambahan

    Dengan

    dan tag, kamu bisa tambahkan informasi tambahan ke bagian konten. Informasi tambahan tidak ditampilkan secara default, tetapi jika pengguna tertarik, mereka memiliki opsi untuk melihatnya. Dalam kode Anda, Anda seharusnya tempatkan tag di dalam
    . Setelah tag kamu bisa tambahkan informasi tambahan Anda ingin bersembunyi.

    Contoh kode:

     
     
    Pesan eror
     
     Kami tidak dapat menyelesaikan mengunduh video ini. 
     
    Nama file:
    yourfile.mp4
     
    Ukuran file:
    100 MB
     
    Lamanya:
    00:05:27

    Beginilah contoh kode ini terlihat di Firefox 50.0.2:

    3. Tambahkan fungsionalitas ke menu konteks browser

    Dengan elemen dan nya type = "context" atribut, kamu bisa tambahkan fungsionalitas khusus ke menu konteks browser. Anda harus menetapkan sebagai elemen anak dari

    menandai. Itu id dari elemen perlu membawa nilai yang sama dengan menu konteks atribut dari elemen yang ingin kita tambahkan menu konteks (yang merupakan

    Itu tag bisa memiliki tiga tipe berbeda, "kotak centang", "perintah" (yang Anda perlu menambahkan tindakan dengan JavaScript), dan radio. Dimungkinkan untuk menambahkan lebih dari satu item menu ke menu konteks, namun dukungan browser untuk fitur ini belum terlalu bagus. Chrome 54 tidak mendukungnya, dan Firefox 50 hanya memungkinkan kehadiran satu menu konteks tambahan. Di bawah ini Anda dapat melihat bagaimana contoh kode berfungsi di Firefox 50.

    4. Header dan footer sarang

    HTML 5.1 memungkinkan Anda untuk header dan footer sarang jika setiap level terkandung dalam konten bagian. Catatan di bawah ini adalah tangkapan layar dari dokumen W3C, dan memberi saran kepada pengembang tentang cara yang tepat untuk bersarang header dan footer.

    Fitur ini dapat bermanfaat jika Anda ingin menambahkan diuraikan header untuk elemen pembagian semantik, seperti

    dan
    . Contoh kode di bawah ini membuat sidebar di dalam header, the