Salah satu kesalahan paling umum yang dilakukan orang saat menggunakan tag adalah menyamakan <section> HTML5 dengan <div> - khususnya, menggunakannya secara langsung sebagai pengganti (untuk tujuan penataan gaya). Pada XHTML atau HTML4, kita sering melihat kode seperti ini:
<!-- Kode gaya HTML 4 --><div id=wrapper> <div id=header> <h1>Halaman super duper saya</h1> Konten header </div> <div id=main> Konten halaman < /div> <div id=secondary> Konten sekunder </div> <div id=footer> Konten footer </div></div>
Sekarang di HTML5 akan terlihat seperti ini:
Tolong jangan menyalin kode ini! Ini salah!
<section id=wrapper> <header> <h1>Halaman super duper saya</h1> <!-- Konten header --> </header> <section id=main> <!-- Konten halaman --> </ section> <section id=secondary> <!-- Konten sekunder --> </section> <footer> <!-- Konten footer --> </footer></section>
Penggunaan ini salah:**
Ini bukan wadah gaya. Elemen **section mewakili bagian semantik dari konten yang digunakan untuk membantu membuat ringkasan dokumen. Itu harus berisi header. Jika Anda mencari elemen yang berfungsi sebagai penampung halaman (seperti gaya HTML atau XHTML), maka pertimbangkan untuk menulis gaya langsung ke elemen body, seperti yang disarankan Kroc Camen. Jika Anda masih membutuhkan wadah gaya tambahan, tetap gunakan divs.
Berdasarkan ide di atas, berikut adalah contoh penggunaan HTML5 yang benar dan beberapa fitur peran ARIA (perhatikan bahwa bergantung pada desain Anda sendiri, Anda mungkin juga perlu menambahkan div)
<body><header> <h1>Halaman super duper saya</h1> <!-- Konten header --></header><div role=main> <!-- Konten halaman --></div>< side role=complementary> <!-- Konten sekunder --></aside><footer> <!-- Konten footer --></footer></body>2. Gunakan header dan hgroups hanya jika diperlukan
Tentu saja tidak ada gunanya menulis label yang tidak perlu ditulis. Sayangnya, saya sering melihat header dan hgroup disalahgunakan tanpa tujuan. Anda dapat membaca dua artikel tentang elemen header dan hgroup untuk pemahaman lebih detailnya, saya rangkum secara singkat isinya sebagai berikut:
Karena header dapat digunakan beberapa kali dalam sebuah dokumen, ini mungkin membuat gaya pengkodean ini populer:
Tolong jangan menyalin kode ini! Tidak diperlukan header di sini ->
<header> <h1>Postingan blog terbaik saya</h1> </header> <!-- Konten artikel --></article>
Jika elemen header Anda hanya berisi satu elemen header, buang elemen header tersebut. Karena elemen artikel sudah menjamin bahwa header akan muncul di ringkasan dokumen, dan header tidak boleh berisi banyak elemen (seperti yang didefinisikan di atas), mengapa menulis kode tambahan. Cukup tulis seperti ini:
<article> <h1>Postingan blog terbaik saya</h1> <!-- Konten artikel --></article>
penggunaan yang salah
Pada topik header, saya juga sering melihat hgroups digunakan secara tidak tepat. Terkadang hgroup dan header tidak boleh digunakan bersamaan:
Pertanyaan pertama biasanya terlihat seperti ini:
Mohon jangan menyalin kode ini! Tidak diperlukan hgroup di sini –> <hgroup> <h1>Entri blog terbaik saya</h1> </hgroup> <p>oleh Rich Clark</p></header>
Dalam contoh ini, hapus saja hgroup dan biarkan judulnya berjalan sebagaimana mestinya.
<header> <h1>Postingan blog terbaik saya</h1> <p>oleh Rich Clark</p></header>
Pertanyaan kedua adalah contoh lain yang tidak perlu:
Tolong jangan salin kode ini! Tidak diperlukan header di sini ->
<hgroup> <h1>Perusahaan saya</h1> <h2>Didirikan tahun 1893</h2> </hgroup></header>
Jika satu-satunya sub-elemen dari header adalah hgroup, apa lagi yang dilakukan header? Jika tidak ada elemen lain di header (seperti beberapa hgroup), hapus saja headernya secara langsung.
<hgroup> <h1>Perusahaan saya</h1> <h2>Didirikan tahun 1893</h2></hgroup>3. Jangan letakkan semua link seperti daftar di nav
Dengan diperkenalkannya 30 elemen baru dalam HTML5 (sejak publikasi aslinya), pilihan kita dalam membuat tag semantik dan terstruktur menjadi agak ceroboh. Meskipun demikian, kita tidak boleh menyalahgunakan elemen hiper-semantik. Sayangnya, nav adalah contoh penyalahgunaan tersebut. Spesifikasi elemen nav dijelaskan sebagai berikut:
Elemen nav mewakili blok di halaman yang terhubung ke halaman lain atau bagian lain dari halaman ini;
Catatan: Tidak semua link pada halaman perlu ditempatkan di elemen nav - elemen ini dimaksudkan untuk digunakan sebagai blok navigasi utama. Sebagai contoh spesifik, seringkali terdapat banyak tautan di footer, seperti persyaratan layanan, beranda, halaman pernyataan hak cipta, dll. Elemen footer sendiri sudah cukup untuk menangani situasi ini. Meskipun elemen nav juga dapat digunakan di sini, biasanya kami menganggapnya tidak diperlukan.
Kata kuncinya adalah navigasi utama. Tentu saja kita bisa saling muncrat sepanjang hari tentang hal-hal penting. Inilah cara saya mendefinisikannya secara pribadi:
Untuk akses yang lebih mudah, apakah Anda akan menambahkan link ke tag nav ini dalam shortcut jump?
Jika jawaban atas pertanyaan-pertanyaan ini adalah tidak, membungkuklah dan pergilah sendiri.
4. Kesalahan umum pada elemen gambarPenggunaan figure dan figurcaption yang benar memang sulit untuk dikuasai. Mari kita lihat beberapa kesalahan umum,
Tidak semua gambar adalah figur
Di atas, saya sudah bilang jangan menulis kode yang tidak perlu. Hal yang sama berlaku untuk kesalahan ini. Saya telah melihat banyak situs web memberi label semua gambar sebagai gambar. Demi gambarnya, mohon jangan menambahkan tag tambahan ke dalamnya. Anda hanya menyakiti diri sendiri dan tidak memperjelas halaman Anda.
Gambar dijelaskan dalam spesifikasi sebagai konten yang mengalir, terkadang dengan deskripsi judulnya sendiri. Umumnya, mereka direferensikan sebagai unit independen dalam aliran dokumen. Inilah keindahan gambarnya - dapat dipindahkan dari halaman konten utama ke sidebar tanpa mempengaruhi alur dokumen.
Masalah ini juga tercakup dalam diagram alur elemen HTML5 yang disebutkan sebelumnya.
Jika diagram tersebut murni untuk presentasi dan tidak dirujuk di tempat lain dalam dokumen, maka jelas tidak demikian
. Selebihnya tergantung situasi, tetapi mulailah dengan bertanya pada diri sendiri: Apakah gambar ini harus relevan dengan konteksnya? Jika tidak, mungkin juga tidak (mungkin memang demikian). Selanjutnya: Bolehkah saya memindahkan ini ke lampiran? Jika kedua pertanyaan tersebut berlaku, mungkin memang demikian.
Logo bukanlah sebuah figur
Selain itu, logo juga tidak berlaku untuk gambar. Berikut beberapa cuplikan kode umum yang saya gunakan:
<!-- Mohon jangan menyalin kode ini! Ini salah--><header> <h1> <figure>  </figure> Nama perusahaan saya </h1 > </header><!-- Mohon jangan menyalin kode ini! Ini juga salah--><header> <figure>  </figure></header>
Tidak ada lagi yang perlu dikatakan. Ini adalah kesalahan yang sangat umum. Kita bisa berdebat satu sama lain sampai sapi-sapi itu pulang mengenai apakah logo tersebut harus berupa tag H1, tapi bukan itu intinya di sini. Masalah sebenarnya adalah penggunaan elemen figure secara berlebihan. Gambar hanya boleh dirujuk di dalam dokumen, atau diapit oleh elemen bagian. Saya rasa kecil kemungkinan logo Anda akan direferensikan dengan cara ini. Sederhana saja, jangan gunakan gambar. Anda hanya perlu melakukan ini:
<header> <h1>Nama perusahaan saya</h1> <!-- Lebih banyak hal di sini --></header>
Figur bukan sekadar gambar
Kesalahpahaman umum lainnya mengenai figur adalah bahwa figur hanya digunakan dalam bentuk gambar. Gambar dapat berupa video, audio, bagan, kutipan, tabel, kode, prosa, atau kombinasi dari semuanya. Jangan batasi angka hanya pada gambar. Merupakan tugas standar web untuk mendeskripsikan konten secara akurat menggunakan tag.
5. Jangan gunakan atribut tipe yang tidak perluIni adalah masalah umum, namun bukan suatu kesalahan, dan menurut saya kita harus menghindari gaya ini melalui praktik terbaik.
Dalam HTML5, elemen skrip dan gaya tidak lagi memerlukan atribut type. Namun, kemungkinan besar ini akan ditambahkan secara otomatis oleh CMS Anda, sehingga tidak mudah untuk menghapusnya. Namun jika Anda membuat kode dengan tangan atau Anda memiliki kendali penuh atas templat Anda, tidak ada alasan untuk menyertakan atribut type. Semua browser menganggap skrip adalah javascript dan gaya adalah gaya css, jadi Anda tidak perlu melakukan ini lagi.
<!-- Tolong jangan salin kode ini! Ini terlalu berlebihan! --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts /></skrip>
Sebenarnya, yang perlu Anda lakukan hanyalah menulis:
<link rel=stylesheet href=css/styles.css /><script src=js/scripts /></script>
Bahkan kode yang menentukan rangkaian karakter dapat dihilangkan. Mark Pilgrim menjelaskannya di bab Semantik dari Menyelami HTML5.
6. Penggunaan atribut form yang salahHTML5 memperkenalkan beberapa atribut formulir baru. Berikut beberapa catatan tentang penggunaan:
Properti Boolean
Beberapa elemen multimedia dan elemen lainnya juga memiliki sifat Boolean. Aturan yang sama berlaku di sini.
Beberapa atribut formulir baru adalah boolean, yang berarti selama atribut tersebut muncul di label, perilaku terkait dijamin akan disetel. Properti ini meliputi:
Sejujurnya, saya jarang melihat ini. Mengambil contoh yang diperlukan, yang umum adalah sebagai berikut:
<!-- Harap jangan menyalin kode ini! Ini salah! --><input type=email name=email require=true /><!-- Contoh kesalahan lainnya --><input type=email name = email diperlukan=1 />
Sebenarnya, ini bukan masalah besar. Selama pengurai HTML browser melihat atribut yang diperlukan muncul dalam sebuah tag, fungsinya akan diterapkan. Namun bagaimana jika Anda menulis require=false sebaliknya?
<!-- Tolong jangan salin kode ini! Ini salah! --><input type=nama email=email wajib=false />
Parser akan tetap memperlakukan atribut yang diperlukan sebagai valid dan melakukan perilaku yang sesuai, bahkan jika Anda mencoba untuk memberitahukannya untuk tidak melakukannya. Ini jelas bukan yang Anda inginkan.
Ada tiga cara valid untuk menggunakan properti Boolean. (Dua yang terakhir hanya valid di xthml)
Cara yang benar untuk menulis contoh di atas adalah:
<tipe input=nama email=email diperlukan />Meringkaskan
Di atas adalah apa yang editor perkenalkan kepada Anda tentang cara menghindari 6 penggunaan umum HTML5 yang salah. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!