Ada apa dengan HTML di frontend? Baru-baru ini, saya berbicara dengan banyak pengembang. Sepertinya beberapa bahkan tidak mengerti HTML. Maksudku, mereka mengerti sesuatu. Mereka mengerti apa itu
div dan apa
span , dan ketika semuanya terlihat bagus dan bekerja dengan sekali klik, itu sudah cukup bagi mereka. Sedemikian rupa sehingga banyak orang menjawab pertanyaan tentang HTML: "Oh, ya, saya melakukan semuanya dalam React atau Vue sekarang." Tapi itu benar-benar tidak masalah bahwa Anda hanya menulis Javascript. Jika Anda mengembangkan situs web, maka HTML adalah hal yang paling penting bagi Anda. Ini webnya.
Ini tentang apa yang dikonsumsi oleh pengguna. Ini adalah UI dan UX. Ini seluruh paket. Dalam urutan kepentingan: HTML, CSS dan perilaku (yang dapat disediakan oleh Javascript - atau mungkin tidak).
Saya melihat masalah di bagian bawah piramida teknologi ini. Denominator umum terkecil dari web. Dasar. Band irama. Bagian terpenting dari semua makanan penutup web. Ini HTML. Dan menurut saya semakin banyak bahwa seluruh lapisan insinyur front-end tidak tahu atau tidak mengerti teknologi utama dari front-end.
Halaman web adalah dokumen. Komponen apa pun, apakah itu templat blog, situs berita, panel statistik pemasaran, atau formulir pendaftaran, adalah bagian dari dokumen. Dokumen memiliki struktur. Di Internet, ini bukan hanya tentang elemen visual atau arsitektur yang disediakan platform Anda. Ini adalah tentang memilih elemen semantik yang benar sehingga halaman web Anda, komponen, apa pun, diformat secara struktural dengan benar. Judul harus judul, daftar harus daftar, tombol harus tombol, dan tabel harus berupa tabel. Anda dapat menata mereka (cukup banyak) sesuka Anda - judul tidak harus besar dan tebal dengan lekukan di bawah ini. Terserah Anda, tapi pasti harus menjadi berita utama, dan saya bisa melawan Anda jika Anda membuatnya seperti
div .
HTML tidak sulit dipelajari, terutama jika Anda sudah tahu kerangka kerja JavaScript. Saya tidak mempertimbangkan, tetapi saya cukup yakin bahwa hanya ada sekitar 116 elemen di sana, dan sebagian besar dari Anda tidak akan pernah dibutuhkan. Mengapa tidak mempelajarinya?
Saya salah satu dari orang-orang yang bekerja di ujung paling depan. Saya melakukan HTML dan CSS, jadi mudah bagi saya untuk mendorong semua orang untuk mempelajari apa yang sudah saya ketahui (sebagai catatan, saya tidak tahu segalanya - kami masih memiliki banyak perdebatan di kantor kami tentang cara terbaik untuk menandai komponen tertentu). Bukannya pekerjaan saya lebih penting daripada milik Anda. Jika Anda menulis kode yang menampilkan sesuatu di browser, maka ini jelas pekerjaan Anda.
Ini tentang kegunaan dan aksesibilitas. Jika Anda tidak menganggap struktur semantik dari halaman web atau aplikasi Anda penting, pada dasarnya, Anda berkata: "Ya, semuanya bekerja untuk saya, Anda bisa merilisnya." Saya tidak berpikir Javascript cukup di sini, seperti halnya CSS. Mesin pencari harus membaca konten Anda, tidak menikmati animasi cepat atau gradien mewah. Pembaca layar harus membaca konten Anda. Pengguna tanpa mouse harus bekerja dengan situs Anda. Siapa yang tahu teknologi apa yang akan terjadi selanjutnya dan bagaimana ia akan memahami aplikasi Anda, tetapi saya bertaruh pada bitcoin terbaru, yang mungkin akan terbantu oleh kemampuan untuk dengan mudah membaca, menganalisis, dan menavigasi konten. Semua teknologi ini harus menganggap konten sebagai konten integral, dan bukan hanya baris teks yang dibungkus dengan tag yang tidak berarti. Mereka harus melihat apa tabel itu dan bagaimana menyajikannya, apa daftar itu dan bagaimana menyajikannya, apakah tombol itu dan apa bendera itu. Buat semuanya div, dan mereka harus melakukan banyak pekerjaan untuk mengenali hal-hal seperti itu.
“Tapi kerangka kerja saya mengurus semuanya. Saya hanya menulis template .jsx »
Tidak. Tulis HTML yang benar di JSX Anda. Kamu bisa melakukannya. Hanya karena Anda menggunakan React atau Vue atau yang lain, Anda tidak perlu menulis semuanya dengan divs. Tidak wajib
"Perpustakaan ini di mana-mana menambahkan atribut WAI-Aria, jadi semuanya baik-baik saja dengan aksesibilitas."
Bagus Jika Anda menulis HTML yang benar, sebagian besar atribut ini tidak diperlukan sama sekali. Anda mendapatkan sejumlah fungsi aksesibilitas gratis, hanya menggunakan
button nyata dan bukan
div dengan
onClick event
onClick . GRATIS. Ini aksesibilitas, kinerja, dan keramahan pengguna, gratis. GRATIS!
Ini adalah hal yang sangat penting. Jika tidak diikuti, itu perlahan (sebenarnya tidak begitu lambat) merusak web. Paling tidak, membuatnya kurang dapat diakses oleh orang-orang yang akan menggunakan produk Anda. Jika Anda menyebut diri Anda seorang insinyur front-end, maka tanggung jawab Anda adalah mempelajari dan menggunakan dasar-dasar web, yang umum untuk semua browser, platform, perangkat, atau peralatan rumah tangga yang dapat mengakses Internet.
Tolong lakukan itu. Jadikan Internet lebih baik, dengan pendekatan pembangunan yang bertanggung jawab. Ada cukup sumber daya di Web yang dapat membantu, berikut adalah beberapa untuk Anda mulai:
- Pelajari cara membuat dokumen dalam HTML. Cobalah latihan mental sederhana ketika Anda melihat poster konser atau halaman koran - dan bayangkan bagaimana itu akan terstruktur dalam HTML. Jika Anda punya waktu, tulis HTML ini. Gunakan pengetahuan ini dalam pekerjaan sehari-hari.
- MDN adalah sumber yang bagus dengan blog, tutorial, dan tautan yang bermanfaat.
- Jangkau orang-orang di komunitas. Baca blog (misalnya, posting terbaru Andy Bell tentang penggunaan HTML semantik) dan tonton videonya .
- Ketika saya sedang belajar, melihat sumber itu masih berguna. Kami secara kolektif memecahkan ini untuk generasi saat ini dan yang akan datang, tetapi saya dapat mengesankan Anda dengan kekuatan "Alat Pengembang" di browser
- Pelajari cara kerja teknologi bantu di web
- Lihatlah spesifikasi HTML atau bahkan hanya daftar elemen HTML dan contoh penggunaannya.
- Jika Anda bekerja sebagai tim, diskusikan markup. Benar-benar berdebat, akan benar untuk memasukkan beberapa elemen dalam bentuk
table atau dl ( Deskripsi Daftar Elemen , MDN). Itu akan sangat menyenangkan, aku janji.
- Cari tahu siapa pakar HTML terbaik di tim Anda dan minta mereka meninjau kode Anda. Jika ini aku, selalu senang berbicara.