HTML

Apa fungsi DOCTYPE?

DOCTYPE adalah singkatan dari Document Type. Sebuah DOCTYPE selalu dikaitkan dengan DTD - untuk Document Type Definition.

DTD mendefinisikan bagaimana dokumen dari tipe tertentu harus distrukturkan (misalnya button dapat berisi span tetapi bukan div), sedangkan DOCTYPE menyatakan DTD mana yang seharusnya dihormati oleh sebuah dokumen (misalnya dokumen ini menghormati DTD HTML).

Untuk halaman web, deklarasi DOCTYPE wajib. Ini digunakan untuk memberitahu agen pengguna versi spesifikasi HTML mana yang dihormati oleh dokumen Anda. Setelah agen pengguna mengenali DOCTYPE yang benar, ia akan memicu mode tanpa quirks yang sesuai dengan DOCTYPE ini untuk membaca dokumen. Jika agen pengguna tidak mengenali DOCTYPE yang benar, ia akan memicu mode quirks.

Deklarasi DOCTYPE untuk standar HTML5 adalah <!DOCTYPE html>.

Bagaimana Anda menyajikan halaman dengan konten dalam berbagai bahasa?

Saya akan berasumsi bahwa pertanyaan ini menanyakan tentang kasus yang paling umum, yaitu bagaimana cara menyajikan halaman dengan konten yang tersedia dalam berbagai bahasa, tetapi konten di dalam halaman tersebut harus ditampilkan hanya dalam satu bahasa yang konsisten.

Ketika permintaan HTTP dibuat ke server, agen pengguna yang meminta biasanya mengirimkan informasi tentang preferensi bahasa, seperti di header Accept-Language. Server kemudian dapat menggunakan informasi ini untuk mengembalikan versi dokumen dalam bahasa yang sesuai jika alternatif tersebut tersedia. Dokumen HTML yang dikembalikan juga harus mendeklarasikan atribut lang di tag <html>, seperti <html lang="en">...</html>.

Tentu saja ini tidak berguna untuk memberi tahu mesin pencari bahwa konten yang sama tersedia dalam berbagai bahasa, dan oleh karena itu Anda juga harus menggunakan atribut hreflang di <head>. Misalnya <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />

Di bagian back end, markup HTML akan berisi placeholder i18n dan konten untuk bahasa tertentu yang disimpan dalam format YML atau JSON. Server kemudian secara dinamis menghasilkan halaman HTML dengan konten dalam bahasa tertentu tersebut, biasanya dengan bantuan kerangka kerja back end.

Hal-hal apa saja yang harus diwaspadai saat mendesain atau mengembangkan situs multibahasa?

  • Gunakan atribut lang di HTML Anda.
  • Mengarahkan pengguna ke bahasa asli mereka - Izinkan pengguna untuk mengubah negara/bahasa mereka dengan mudah tanpa repot.
  • Teks dalam gambar berbasis raster (misalnya png, gif, jpg, dll.), bukanlah pendekatan yang terukur - Menempatkan teks dalam gambar masih merupakan cara populer untuk mendapatkan font non-sistem yang bagus agar dapat ditampilkan di komputer mana pun. Namun, untuk menerjemahkan teks gambar, setiap string teks perlu dibuatkan gambar terpisah untuk setiap bahasa. Apa pun yang lebih dari beberapa penggantian seperti ini dapat dengan cepat menjadi tidak terkendali.
  • Panjang kata/kalimat yang membatasi - Beberapa konten bisa lebih panjang saat ditulis dalam bahasa lain. Waspadai masalah tata letak atau luapan dalam desain. Sebaiknya hindari mendesain di mana jumlah teks akan membuat atau merusak desain. Jumlah karakter ikut berperan dalam hal seperti judul, label, dan tombol. Ini kurang menjadi masalah dengan teks yang mengalir bebas seperti teks tubuh atau komentar.
  • Perhatikan bagaimana warna dipersepsikan - Warna dipersepsikan secara berbeda di berbagai bahasa dan budaya. Desain harus menggunakan warna dengan tepat.
  • Memformat tanggal dan mata uang - Tanggal kalender kadang-kadang disajikan dengan cara yang berbeda. Contoh: "31 Mei 2012" di A.S. vs. "31 Mei 2012" di beberapa bagian Eropa.
  • Jangan menggabungkan string yang diterjemahkan - Jangan lakukan hal seperti "Tanggal hari ini adalah " + tanggal. Ini akan rusak dalam bahasa dengan urutan kata yang berbeda. Gunakan string template dengan substitusi parameter untuk setiap bahasa sebagai gantinya. Misalnya, perhatikan dua kalimat berikut dalam bahasa Inggris dan Cina masing-masing: Saya akan melakukan perjalanan pada {% date %} dan {% date %} 我会出发. Perhatikan bahwa posisi variabel berbeda karena aturan tata bahasa dari bahasa tersebut.
  • Arah membaca bahasa - Dalam bahasa Inggris, kita membaca dari kiri-ke-kanan, atas-ke-bawah, dalam bahasa Jepang tradisional, teks dibaca dari atas-ke-bawah, kanan-ke-kiri.
  • Berguna - sertakan lokal dalam jalur (misalnya en_US, zh_CN, dll).

Untuk apa atribut `data-`?

Sebelum kerangka kerja JavaScript menjadi populer, pengembang front end menggunakan atribut data- untuk menyimpan data tambahan dalam DOM itu sendiri, tanpa peretasan lain seperti atribut non-standar, properti tambahan pada DOM. Ini dimaksudkan untuk menyimpan data kustom yang bersifat pribadi untuk halaman atau aplikasi, yang tidak ada atribut atau elemen yang lebih sesuai.

Hari-hari ini, penggunaan atribut data- umumnya tidak dianjurkan. Salah satu alasannya adalah pengguna dapat dengan mudah memodifikasi atribut data dengan menggunakan inspeksi elemen di browser. Model data lebih baik disimpan dalam JavaScript itu sendiri dan tetap diperbarui dengan DOM melalui pengikatan data mungkin melalui pustaka atau kerangka kerja.

Namun, salah satu penggunaan atribut data yang sepenuhnya valid adalah untuk menambahkan kait untuk kerangka kerja pengujian end to end seperti Selenium dan Capybara tanpa harus membuat kelas atau atribut ID yang tidak berarti. Elemen perlu cara untuk ditemukan oleh spesifikasi Selenium tertentu dan sesuatu seperti data-selector='the-thing' adalah cara yang valid untuk melakukannya tanpa membingungkan markup semantik sebaliknya.

Pertimbangkan HTML5 sebagai platform web terbuka. Apa saja blok bangunan HTML5?

  • Semantik - Memungkinkan Anda menjelaskan konten Anda dengan lebih tepat.
  • Konektivitas - Memungkinkan Anda berkomunikasi dengan server dengan cara baru dan inovatif.
  • Offline dan penyimpanan - Memungkinkan halaman web untuk menyimpan data di sisi klien secara lokal dan beroperasi secara offline dengan lebih efisien.
  • Multimedia - Menjadikan video dan audio sebagai warga kelas satu di Web Terbuka.
  • Grafis dan efek 2D/3D - Memungkinkan jangkauan pilihan presentasi yang jauh lebih beragam.
  • Kinerja dan integrasi - Memberikan optimasi kecepatan yang lebih besar dan penggunaan perangkat keras komputer yang lebih baik.
  • Akses perangkat - Memungkinkan penggunaan berbagai perangkat input dan output.
  • Gaya - Membiarkan penulis menulis tema yang lebih canggih.

Jelaskan perbedaan antara `cookie`, `sessionStorage`, dan `localStorage`.

Semua teknologi yang disebutkan di atas adalah mekanisme penyimpanan key-value di sisi klien. Mereka hanya dapat menyimpan nilai sebagai string.

| | cookie | localStorage | sessionStorage | | --- | --- | --- | --- | | Inisiator | Klien atau server. Server dapat menggunakan header Set-Cookie | Klien | Klien | | Kedaluwarsa | Ditetapkan secara manual | Selamanya | Saat tab ditutup | | Persisten di seluruh sesi browser | Tergantung apakah kedaluwarsa diatur | Ya | Tidak | | Dikirim ke server dengan setiap permintaan HTTP | Cookie secara otomatis dikirim melalui header Cookie | Tidak | Tidak | | Kapasitas (per domain) | 4kb | 5MB | 5MB | | Aksesibilitas | Jendela apa pun | Jendela apa pun | Tab yang sama |

Catatan: Jika pengguna memutuskan untuk menghapus data Jelajah melalui mekanisme apa pun yang disediakan oleh browser, ini akan menghapus cookie, localStorage, atau sessionStorage apa pun yang disimpan. Penting untuk diingat hal ini saat merancang untuk persistensi lokal, terutama saat membandingkannya dengan alternatif seperti penyimpanan sisi server di basis data atau sejenisnya (yang tentu saja akan tetap ada meskipun ada tindakan pengguna).

Jelaskan perbedaan antara `<script>`, `<script async>`, dan `<script defer>`.

  • <script> - Parsing HTML diblokir, skrip diambil dan dieksekusi segera, parsing HTML dilanjutkan setelah skrip dieksekusi.
  • <script async> - Skrip akan diambil secara paralel dengan parsing HTML dan dieksekusi segera setelah tersedia (berpotensi sebelum parsing HTML selesai). Gunakan async ketika skrip tidak tergantung pada skrip lain di halaman, misalnya, analitik.
  • <script defer> - Skrip akan diambil secara paralel dengan parsing HTML dan dieksekusi ketika halaman telah selesai di-parse. Jika ada beberapa, setiap skrip yang ditangguhkan dieksekusi dalam urutan yang ditemukan dalam dokumen. Jika skrip bergantung pada DOM yang telah sepenuhnya di-parse, atribut defer akan berguna dalam memastikan bahwa HTML telah sepenuhnya di-parse sebelum dieksekusi. Skrip yang ditangguhkan tidak boleh berisi document.write.

Catatan: Atribut async dan defer diabaikan untuk skrip yang tidak memiliki atribut src.

Mengapa umumnya merupakan ide yang baik untuk menempatkan `<link>` CSS di antara `<head></head>` dan `<script>` JS tepat sebelum `</body>`? Apakah Anda tahu pengecualian apa pun?

Menempatkan <link> di <head>

Menempatkan <link> di <head> adalah bagian dari spesifikasi yang tepat dalam membangun situs web yang dioptimalkan. Saat halaman pertama kali dimuat, HTML dan CSS diurai secara bersamaan; HTML membuat DOM (Document Object Model) dan CSS membuat CSSOM (CSS Object Model). Keduanya diperlukan untuk membuat visual di situs web, memungkinkan waktu "first meaningful paint" yang cepat. Render progresif ini adalah kategori situs optimisasi yang diukur dalam skor kinerja mereka. Menempatkan stylesheet di dekat bagian bawah dokumen adalah yang melarang render progresif di banyak browser. Beberapa browser memblokir rendering untuk menghindari harus mengecat ulang elemen halaman jika gaya mereka berubah. Pengguna kemudian terjebak melihat halaman putih kosong. Di lain waktu mungkin ada kilasan konten tanpa gaya (FOUC), yang menampilkan halaman web tanpa gaya yang diterapkan.

Menempatkan <script> tepat sebelum </body>

Tag <script> memblokir parsing HTML saat mereka diunduh dan dieksekusi yang dapat memperlambat halaman Anda. Menempatkan skrip di bagian bawah akan memungkinkan HTML diurai dan ditampilkan kepada pengguna terlebih dahulu.

Pengecualian untuk posisi <script> di bagian bawah adalah ketika skrip Anda berisi document.write(), tetapi saat ini tidak disarankan untuk menggunakan document.write(). Selain itu, menempatkan <script> di bagian bawah berarti browser tidak dapat mulai mengunduh skrip sampai seluruh dokumen diurai. Ini memastikan kode Anda yang perlu memanipulasi elemen DOM tidak akan memicu kesalahan dan menghentikan seluruh skrip. Jika Anda perlu menempatkan <script> di <head>, gunakan atribut defer, yang akan mencapai efek yang sama yaitu menjalankan skrip hanya setelah HTML diurai tetapi browser dapat mengunduh skrip lebih awal.

Ingatlah bahwa menempatkan skrip tepat sebelum tag </body> penutup akan menciptakan ilusi bahwa halaman memuat lebih cepat pada cache kosong (karena skrip tidak akan memblokir pengunduhan sisa dokumen). Namun, jika Anda memiliki kode yang ingin Anda jalankan selama pemuatan halaman, itu hanya akan mulai dieksekusi setelah seluruh halaman dimuat. Jika Anda menempatkan skrip tersebut di tag <head>, mereka akan mulai dieksekusi sebelumnya - jadi pada cache yang diisi, halaman sebenarnya akan tampak memuat lebih cepat.

Tag <head> dan <body> sekarang opsional

Sesuai spesifikasi HTML5, tag HTML tertentu seperti <head> dan <body> adalah opsional. Panduan gaya Google bahkan merekomendasikan menghapusnya untuk menghemat byte. Namun, praktik ini masih belum banyak diadopsi dan peningkatan kinerja kemungkinan akan minimal dan untuk sebagian besar situs mungkin tidak akan menjadi masalah.

Apa itu progressive rendering?

Render progresif adalah nama yang diberikan untuk teknik yang digunakan untuk meningkatkan kinerja halaman web (khususnya, meningkatkan waktu muat yang dirasakan) untuk merender konten agar ditampilkan secepat mungkin.

Dulu jauh lebih lazim di masa sebelum internet broadband tetapi masih digunakan dalam pengembangan modern karena koneksi data seluler menjadi semakin populer (dan tidak dapat diandalkan)!

Contoh teknik tersebut:

  • Pemuatan gambar secara malas (lazy loading) - Gambar di halaman tidak dimuat sekaligus. JavaScript akan digunakan untuk memuat gambar ketika pengguna menggulir ke bagian halaman yang menampilkan gambar.
  • Memprioritaskan konten yang terlihat (atau rendering above-the-fold) - Sertakan hanya CSS/konten/skrip minimum yang diperlukan untuk jumlah halaman yang akan dirender di browser pengguna terlebih dahulu agar ditampilkan secepat mungkin, Anda kemudian dapat menggunakan skrip yang ditangguhkan atau mendengarkan peristiwa DOMContentLoaded/load untuk memuat sumber daya dan konten lainnya.
  • Fragmen HTML Asinkron - Membersihkan bagian-bagian HTML ke browser saat halaman sedang dibangun di bagian belakang. Detail lebih lanjut tentang teknik ini dapat ditemukan.

Mengapa Anda akan menggunakan atribut `srcset` dalam tag gambar? Jelaskan proses yang digunakan browser saat mengevaluasi konten atribut ini.

Anda akan menggunakan atribut srcset ketika Anda ingin menyajikan gambar yang berbeda kepada pengguna tergantung pada lebar tampilan perangkat mereka - menyajikan gambar berkualitas lebih tinggi ke perangkat dengan tampilan retina meningkatkan pengalaman pengguna sementara menyajikan gambar resolusi lebih rendah ke perangkat kelas bawah meningkatkan kinerja dan mengurangi pemborosan data (karena menyajikan gambar yang lebih besar tidak akan memiliki perbedaan yang terlihat). Misalnya: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> memberitahu browser untuk menampilkan grafik .jpg kecil, sedang, atau besar tergantung pada resolusi klien. Nilai pertama adalah nama gambar dan nilai kedua adalah lebar gambar dalam piksel. Untuk lebar perangkat 320px, perhitungan berikut dilakukan:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

Jika resolusi klien adalah 1x, 1.5625 adalah yang terdekat, dan 500w yang sesuai dengan small.jpg akan dipilih oleh browser.

Jika resolusi adalah retina (2x), browser akan menggunakan resolusi terdekat di atas minimum. Artinya, browser tidak akan memilih 500w (1.5625) karena lebih besar dari 1 dan gambar mungkin terlihat buruk. Browser kemudian akan memilih gambar dengan rasio yang dihasilkan lebih dekat ke 2 yaitu 1000w (3.125).

srcset memecahkan masalah di mana Anda ingin menyajikan file gambar yang lebih kecil ke perangkat layar sempit, karena mereka tidak memerlukan gambar besar seperti yang dilakukan layar desktop — dan juga secara opsional bahwa Anda ingin menyajikan gambar resolusi yang berbeda ke layar kepadatan tinggi/kepadatan rendah.

Pernahkah Anda menggunakan bahasa templat HTML yang berbeda sebelumnya?

Ya, Pug (sebelumnya Jade), ERB, Slim, Handlebars, Jinja, Liquid, dan EJS, hanya untuk menyebutkan beberapa. Menurut pendapat saya, mereka kurang lebih sama dan menyediakan fungsionalitas serupa untuk meloloskan konten dan filter yang membantu untuk memanipulasi data yang akan ditampilkan. Sebagian besar mesin templat juga akan memungkinkan Anda untuk menyuntikkan filter Anda sendiri jika Anda memerlukan pemrosesan kustom sebelum ditampilkan.

Apa perbedaan antara canvas dan SVG?

Canvas berbasis raster, bekerja dengan piksel, sedangkan SVG berbasis vektor, menggunakan deskripsi matematis dari bentuk. Canvas menggunakan gambar imperatif, di mana setiap langkah ditentukan dengan JavaScript, ideal untuk grafik dinamis dan interaktif seperti animasi dan game.

Sebaliknya, SVG menggunakan gambar deklaratif, dengan bentuk dan jalur yang ditentukan langsung di HTML, membuatnya lebih mudah diakses dan ramah SEO. Canvas optimal untuk adegan kompleks karena overhead-nya yang lebih rendah, tetapi penskalaan dapat menyebabkan hilangnya kualitas gambar. SVG, yang independen resolusi, beradaptasi dengan berbagai ukuran layar tanpa mengorbankan kualitas.

Pada akhirnya, canvas cocok untuk grafik dinamis yang intensif kinerja, sementara SVG unggul dalam grafik yang dapat diskalakan, independen resolusi, dengan aksesibilitas bawaan dan keuntungan SEO.

Apa itu elemen kosong di HTML?

Elemen kosong dalam HTML adalah elemen yang tidak mengandung konten apa pun di antara tag pembuka dan penutupnya. Sebaliknya, mereka adalah tag yang menutup sendiri, yang berarti mereka memiliki garis miring (/) sebelum tanda kurung siku penutup (>). Beberapa contoh umum elemen kosong meliputi:

  • <img>: Digunakan untuk menyematkan gambar ke dalam dokumen.
  • <input>: Digunakan untuk menerima masukan pengguna.
  • <br>: Digunakan untuk menyisipkan jeda baris atau jeda baris paksa.
  • <hr>: Digunakan untuk membuat aturan horizontal atau pemisah.