10 Tips Menggunakan HTML5 Saat Ini (alias Homo-Adminus Blog 2.0 HTML5ified)

info/wp-content/uploads/2009/07/kovyrin-net.png” class=”attachment-full size-full” alt=”” decoding=”async”/>

Ada banyak artikel tentang HTML5 dalam beberapa hari terakhir, jadi ketika Alexei Kovyrin meminta saya membantunya mendesain blog barunya, saya tidak punya pilihan selain menggunakan HTML5. Banyak fitur baru telah ditambahkan sejak HTML4, beberapa di antaranya sudah tersedia sekarang, seperti elemen baru

,

,

,

,

dll. Ada kata kunci “semantik” untuk menggambarkan hal ini, tapi saya tidak suka kata kunci tersebut, jadi saya menyebutnya “akal”. Jadi fitur apa saja yang bisa kita dapatkan dari HTML5 yang didukung semua browser modern?

Dari sudut pandang pengembang web, tidak banyak perbedaan antara HTML4 dan HTML5; <div> Elemen diganti dengan elemen yang lebih masuk akal (saya sedang membicarakan markup sekarang, bukan API baru. Inilah yang saya maksud:

Singkatnya: satu-satunya perbedaan adalah kami menggunakan elemen HTML baru, bukan nama kategori dan ID CSS yang deskriptif. Saya tidak akan menjelaskan semua fitur baru HTML5 di sini, perkenalan yang baik dapat ditemukan di sini atau di sini.

Berikut saran saya untuk menggunakan HTML5 hari ini:

1. Untuk mengaktifkan elemen HTML5 baru di IE, Anda harus menggunakan document.createElement — Lihat baris 6-8, instruksi di sini.

2. Pastikan elemen HTML5 baru berada di level blok:

   1 2 3 4 5

   tajuk, catatan kaki, bagian, navigasi, artikel, menyisihkan { laba: 0 piksel; isian: 0 piksel; pameran: buntu; }

3. menggunakan

   >

   elemen jika Anda perlu menambahkan blok konten tertentu, seperti daftar kategori (baris 54-61). Gunakan yang lama dengan baik <div> Sertakan elemen markup yang tidak memiliki arti khusus (misalnya, <div id="container"> baris 11).

4. menggunakan

   Elemen untuk membuat semua jenis panel navigasi (menu atas, sidebar, tautan footer). Jangan gunakan

   Buat sidebar – ini salah!

5. >

   Dan

   Elemen adalah kandidat yang baik untuk membungkus informasi header (logo, navigasi tingkat atas, dan hampir semua hal yang secara visual terletak di bawah konten utama) dan bawah (metadata artikel, footer, tautan bawah, dan hampir semua hal yang secara visual terletak di bawah konten utama). WHO. Anda dapat menggunakan elemen ini di dalam elemen lain seperti

   ,

   >

   atau

   >

   jadi gunakanlah.

6. elemen baru

   >

   Sertakan blok informasi dalam area konten utama. Bisa berupa artikel atau postingan blog, review, deskripsi buku tertentu di toko buku, dll.

7. Unsur yang paling kontroversial adalah

   . Banyak artikel tentang HTML5 di Internet merekomendasikan menggunakannya untuk navigasi sidebar, tapi ini sepenuhnya salah. Gunakan tag ini untuk mengekstrak beberapa informasi dari konten utama. Kandidat yang baik adalah catatan kaki atau marginalia, kutipan, gambar penulis ulasan, dll.

8. Hampir semua yang Anda lakukan di HTML4 valid di HTML5: gunakan daftar tidak berurutan <ul> Untuk item daftar yang urutannya tidak penting, gunakan daftar terurut <ol> jika tidak. Gunakan tabel (ya, <table>) digunakan untuk struktur data tabular (bukan tata letak). Paragraf, penekanan, kutipan, dan elemen lainnya harus ditempatkan di markup Anda.

9. Gunakan validator untuk memastikan Anda melakukannya dengan benar.

10. Baca kodenya. Galeri HTML5 adalah tempat yang bagus untuk memulai.

Sekarang Anda dapat mulai menggunakan HTML5. Ini adalah masa depan kita dan kita perlu tahu seperti apa jadinya nanti.

P.S. Apakah Anda memperhatikan penyorotan sintaksis yang indah pada kode di blog ini? Saya menggunakan CodeColorer — plugin penyorotan sintaksis terbaik untuk WordPress. Cobalah dan Anda akan bertahan selamanya!