50 Pertanyaan dan Jawaban Wawancara HTML Teratas (2026)
Emma Davis
Bersiap untuk Wawancara HTML? Pikirkan baik-baik pertanyaan yang mungkin Anda ajukan. Wawancara ini penting karena mengungkap kedalaman teknis, pendekatan pemecahan masalah, dan penerapan praktis dari konsep-konsep penting pengembangan web.
Peluang kerja di bidang HTML mencakup berbagai bidang, mulai dari lulusan baru hingga profesional senior dengan pengalaman kerja 5 atau 10 tahun di bidang ini. Perusahaan menilai keahlian teknis, keahlian di bidang tertentu, dan keterampilan analisis melalui tanya jawab. Pengalaman profesional yang kuat, pengalaman tingkat dasar, dan keahlian yang beragam membantu kandidat mengatasi tantangan dasar, lanjutan, dan teknis.
Analisis kami didasarkan pada masukan dari lebih dari 60 pemimpin teknis, wawasan dari lebih dari 45 manajer, dan diskusi dengan lebih dari 100 profesional. Secara keseluruhan, perspektif ini menyoroti beragam ekspektasi dan kebutuhan industri yang terus berkembang.
Pertanyaan dan Jawaban Wawancara HTML Teratas
1) Apa itu HTML dan mengapa ia dianggap sebagai tulang punggung pengembangan web?
HyperText Markup Language (HTML) adalah bahasa dasar web, yang dirancang untuk menyusun dokumen dan memberi makna pada konten web. HTML mendefinisikan elemen-elemen seperti judul, paragraf, tautan, gambar, dan multimedia, yang memungkinkan peramban untuk menafsirkan dan merendernya. Alasan mengapa HTML disebut sebagai tulang punggung pengembangan web adalah karena setiap halaman web, terlepas dari kompleksitasnya, menggunakan HTML untuk menentukan tata letak dan kontennya. Tanpa HTML, teknologi seperti CSS dan JavaNaskah tidak memiliki dasar untuk ditata atau dimanipulasi.
👉 Unduh PDF Gratis: Pertanyaan Wawancara HTML
2) Jelaskan perbedaan antara HTML dan HTML5 dengan contoh.
HTML adalah bahasa markup standar, sedangkan HTML5 adalah versi modern dan lebih canggih yang diperkenalkan pada tahun 2014. HTML5 menghadirkan elemen semantik, dukungan multimedia, dan API yang menghilangkan kebutuhan akan plugin pihak ketiga seperti Flash.
| Fitur | HTML | HTML5 |
|---|---|---|
| tipe dokumen | Panjang & rumit | Sederhana: |
| multimedia | Membutuhkan plugin | , |
| Grafis | Tidak didukung secara asli | , |
| Formulir | Masukan terbatas | Input baru seperti email, date |
| Tag semantik | Diandalkan | , , |
Contoh:
<video controls> <source src="sample.mp4" type="video/mp4"> </video>
3) Bagaimana struktur dasar dokumen HTML diatur?
Setiap dokumen HTML mengikuti struktur yang ditentukan untuk memastikan browser menginterpretasikan konten dengan benar. Di bagian atas terdapat deklarasi yang menentukan penggunaan HTML5. elemen membungkus seluruh konten, dibagi menjadi Dan . Itu berisi metadata, judul, tautan ke CSS dan skrip, sementara `render` menampilkan konten yang terlihat. Contoh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>Hello World</h1> </body> </html>
4) Apa itu tag dan elemen dalam HTML? Berikan contohnya.
Tag adalah kata kunci yang diapit tanda kurung siku yang memberi tahu browser cara menampilkan konten. Elemen, di sisi lain, mengacu pada keseluruhan struktur yang terdiri dari tag pembuka, konten, dan tag penutup. Misalnya:
- Tag: Dan
- Elemen: Ini adalah sebuah paragraf
Beberapa elemen dapat menutup sendiri, seperti Dan , artinya tidak memerlukan tag penutup.
5) Jenis daftar apa yang didukung dalam HTML, dan di mana daftar tersebut digunakan?
Dukungan HTML tiga jenis utama daftar:
- Daftar Berurut ( ) – item muncul dengan angka atau huruf.
- Daftar Tidak Berurut ( ) – item muncul dengan peluru.
- DescriptDaftar ion ( ) – digunakan untuk istilah dan definisinya.
Contoh:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl>
Daftar sering digunakan untuk menu navigasi, organisasi konten, dan istilah glosarium.
6) Bagaimana atribut digunakan dalam HTML, dan apa saja contoh umum?
Atribut memberikan informasi tambahan ke elemen HTML. Atribut selalu ditentukan dalam tag pembuka dan mengikuti pasangan nama-nilai. Contoh umum meliputi:
srcdi dalam untuk lokasi gambar.hrefuntuk tujuan hyperlink.idkeclassuntuk gaya dan JavaPenargetan skrip.altdalam gambar untuk aksesibilitas.
Misalnya:
<img src="logo.png" alt="Company Logo">
7) Apa itu elemen HTML semantik dan apa manfaat yang ditawarkannya?
Elemen semantik dengan jelas menggambarkan maknanya bagi pengembang dan peramban. Contohnya meliputi: , , , , Dan .
Manfaat:
- Meningkatkan aksesibilitas untuk pembaca layar.
- Memberikan mesin pencari makna konten yang lebih jelas (SEO).
- Meningkatkan keterbacaan dan pemeliharaan kode.
Contoh:
<article> <h2>News Update</h2> <p>Latest update about web development trends.</p> </article>
8) Jelaskan perbedaan antara elemen tingkat blok dan elemen sebaris dengan contoh.
Elemen tingkat blok, seperti , , Dan , menempati seluruh lebar wadahnya dan dimulai pada baris baru. Elemen sebaris, seperti , , dan , hanya menempati lebar sesuai kebutuhan kontennya.
| Tipe | contoh | karakteristik |
|---|---|---|
| Tingkat blok | , | Mulai pada baris baru, lebar penuh |
| Di barisan | , | Alur dalam teks, lebar tergantung pada konten |
9) Bagaimana hyperlink dibuat dan apa perbedaan antara hyperlink absolut dan relatif? URLs?
Hyperlink dibuat menggunakan tag dengan href atribut.
- Mutlak URL: Berisi jalur lengkap, termasuk protokol dan domain.
Contoh:<a href="https://example.com/page.html">Visit</a> - Relatif URL: Mengacu pada berkas yang relatif terhadap halaman saat ini.
Contoh:<a href="/id/about.html">About Us</a>
Mutlak URLs lebih disukai saat menautkan ke sumber daya eksternal, sedangkan relatif URLefisien dalam situs web yang sama.
10) Apa peran dari tag dan atributnya?
Itu Tag digunakan untuk mengumpulkan masukan pengguna dan mengirimkannya ke server. Dua atribut terpentingnya adalah:
- tindakan – menentukan ke mana data akan dikirim.
- metode – menentukan metode HTTP (
GETorPOST).
Contoh:
<form action="/id/submit" method="post"> <input type="text" name="username"> <input type="submit"> </form>
11) Apa saja jenis bidang input yang tersedia dalam formulir HTML5?
HTML5 memperkenalkan tipe input baru untuk meningkatkan kegunaan dan mengurangi ketergantungan pada JavaValidasi skrip. Jenis-jenis yang umum meliputi:
- Berbasis teks: teks, kata sandi, email, url, pencarian, telp.
- Berdasarkan tanggal dan waktu: tanggal, tanggalwaktu-lokal, bulan, minggu, waktu.
- Numerik: jumlah, jangkauan.
- Boolean: kotak centang, radio.
- Berkas dan warna: berkas, warna.
Contoh:
<input type="email" placeholder="Enter your email"> <input type="date"> <input type="range" min="1" max="10">
Jenis masukan ini memungkinkan browser menyajikan kontrol UI yang dioptimalkan, seperti kalender untuk tanggal atau pemilih warna, meningkatkan pengalaman pengguna dan mengurangi kesalahan formulir.
12) Bagaimana tag semantik HTML5 seperti , , , Dan berbeda dalam penggunaan?
Tag semantik diperkenalkan untuk menggantikan tag generik elemen dan memberikan makna pada struktur halaman.
| label | Tujuan | Example |
|---|---|---|
| Bagian atas, sering kali dengan logo/navigasi | Navigasi situs | |
| Bagian bawah, hak cipta atau tautan | Catatan kaki halaman | |
| Kelompok logisping dari konten terkait | Bagian blog | |
| Konten independen yang dapat berdiri sendiri | Artikel berita |
Contoh:
<article> <header><h2>Breaking News</h2></header> <p>Details of the story...</p> <footer>Author: John Doe</footer> </article>
Menggunakan elemen-elemen ini meningkatkan SEO dan aksesibilitas.
13) Jelaskan perbedaan antara CSS sebaris, CSS internal, dan CSS eksternal.
Ada tiga cara utama untuk menerapkan CSS ke HTML:
- CSS sebaris: Diterapkan langsung pada elemen menggunakan
styleatribut.
Contoh:<p style="color:red;">Text</p> - CSS internal: Dinyatakan dalam tags in the .
- CSS Eksternal: Terhubung melalui
.cssberkas menggunakan .
| metode | Kelebihan | Kekurangan |
|---|---|---|
| Di barisan | Cepat, spesifik | Sulit dirawat, tidak dapat digunakan kembali |
| Intern | Bagus untuk satu halaman | Tidak dapat digunakan kembali di beberapa halaman |
| Luar | Dapat digunakan kembali, bersih | Memerlukan pemuatan file tambahan |
Praktik terbaik adalah menggunakan CSS eksternal untuk pemeliharaan.
14) Apa itu entitas HTML, dan mengapa entitas tersebut digunakan?
Entitas HTML adalah kode khusus yang digunakan untuk merepresentasikan karakter khusus, simbol, atau karakter tak terlihat dalam dokumen HTML. Kode ini memastikan bahwa karakter seperti <, >, dan & ditampilkan dengan benar, alih-alih ditafsirkan sebagai kode.
Contoh entitas umum:
- < →
- > → >
- & → &
- © → ©
- → spasi tanpa putus
Misalnya:
<p>Use <strong> instead of <b>.</p>
Entitas sangat penting untuk menjaga keterbacaan kode dan mencegah masalah rendering.
15) Bagaimana caranya unsur-unsur tersebut bekerja, dan apa saja kelebihan dan kekurangannya?
Itu Tag ini memungkinkan penyematan satu halaman HTML di dalam halaman HTML lainnya. Tag ini sering digunakan untuk menyematkan video, peta, atau widget eksternal.
Keuntungan:
- Integrasi konten eksternal yang mudah seperti YouTube or Google Maps.
- Pemisahan konten dari halaman utama.
kekurangan:
- Kinerja pemuatan lebih lambat karena permintaan tambahan.
- Risiko keamanan (clickjacking, cross-site scripting).
- Tidak selalu ramah SEO.
Contoh:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
Alternatif modern sering kali merekomendasikan API atau metode penyematan dengan kontrol dan keamanan yang lebih baik.
16) Apa itu meta tag dalam HTML, dan bagaimana pengaruhnya terhadap SEO?
Meta tag adalah potongan informasi yang ditempatkan di dalam Bagian dari dokumen HTML. Mereka menyediakan metadata tentang halaman tetapi tidak ditampilkan kepada pengguna.
Jenis utama meta tag:
- Description:
- Kata kunci (tidak digunakan lagi):
- Viewport (desain responsif):
- Charset:
Mesin pencari menggunakan deskripsi meta untuk menghasilkan cuplikan dalam hasil pencarian, yang secara langsung memengaruhi rasio klik-tayang (RKT).
17) Apa perbedaan antara jalur absolut, relatif, dan root-relatif dalam tautan HTML?
Tautan dapat ditulis dalam tiga cara berbeda tergantung pada referensi jalur.
| Tipe | Example | Use Case |
|---|---|---|
| Mutlak | https://example.com/images/pic.jpg | Sumber daya eksternal |
| Relatif | gambar/pic.jpg | Direktori atau subdirektori yang sama |
| Kerabat akar | /aset/gambar/pic.jpg | Dari akar domain |
Jalur absolut menjamin pengambilan sumber daya tetapi mengurangi portabilitas. Jalur relatif memudahkan pemindahan konten, sementara jalur relatif akar memastikan konsistensi dalam situs besar.
18) Bagaimana API HTML5 seperti Geolokasi, Penyimpanan Web, dan Canvameningkatkan fungsionalitas?
HTML5 memperkenalkan API yang memperluas kemampuan aplikasi web tanpa memerlukan plugin.
- API Geolokasi: Mengambil lokasi pengguna (dengan izin).
- API Penyimpanan Web: Menyediakan
localStoragekesessionStorageuntuk menyimpan data kunci-nilai hingga 10MB. - Canvas API: Memungkinkan menggambar bentuk, gambar, dan animasi langsung pada halaman web.
Contoh: Penyimpanan Lokal
localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));
API ini meningkatkan interaktivitas dan kinerja dalam aplikasi modern.
19) Jelaskan keuntungan dan kerugian penggunaan elemen untuk desain tata letak.
Tabel pernah digunakan untuk tata letak halaman tetapi sekarang tidak lagi disarankan.
Keuntungan:
- Menyediakan struktur untuk data tabular.
- Didukung di semua browser.
kekurangan:
- Aksesibilitas yang buruk untuk pembaca layar saat disalahgunakan.
- Memperlambat proses rendering halaman.
- Lebih sulit dipelihara dibandingkan dengan sistem tata letak CSS seperti Flexbox dan Grid.
Praktek terbaik: Menggunakan khusus untuk data tabular (misalnya, jadwal, perbandingan produk) dan CSS untuk tata letak.
20) Bisakah beberapa kelas CSS diterapkan ke satu elemen HTML? Bagaimana caranya?
Ya, HTML memperbolehkan beberapa kelas CSS diterapkan ke satu elemen dengan memisahkannya dengan spasi di class Atribut. Teknik ini memungkinkan gaya modular yang dapat digunakan kembali dan menghindari duplikasi.
Contoh:
<p class="text-bold text-red highlight">Important Notice</p>
Di sini, elemen mewarisi gaya dari ketiga kelas. Pendekatan ini mendukung kompabilitas, membuat desain lebih terukur dan lebih mudah dipelihara.
21) Apa perbedaan antara dan dalam HTML?
Keduanya dan merupakan wadah generik, tetapi memiliki tujuan yang berbeda.
- adalah elemen tingkat blok yang digunakan untuk mengelompokkan bagian konten atau struktur tata letak yang lebih besar.
- adalah elemen sebaris yang digunakan untuk penataan gaya atau pengelompokanping fragmen teks kecil.
| Fitur | ||
|---|---|---|
| Display | Tingkat blok | Di barisan |
| penggunaan | Tata letak, wadah | Menyorot teks |
| Example | Bungkusping bagian | Kata-kata gaya |
Contoh:
<div class="container"> <p>This is a <span class="highlight">highlighted</span> word.</p> </div>
22) Bagaimana cara elemen kerja, dan di mana ia digunakan?
Itu Elemen dalam HTML5 menyediakan permukaan gambar berbasis bitmap yang bergantung pada resolusi. Elemen ini digunakan untuk merender grafik, animasi, bagan, dan bahkan game sederhana langsung di peramban. JavaAPI skrip seperti getContext("2d") memungkinkan pengembang untuk menggambar bentuk, jalur, gambar, dan teks.
Contoh:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>
Kasus penggunaan meliputi dasbor, visualisasi waktu nyata, dan animasi interaktif.
23) Jelaskan perbedaan antara id ke class atribut dalam HTML.
Kedua id ke class adalah atribut yang digunakan untuk gaya dan JavaPenargetan skrip, tetapi berbeda dalam keunikan dan penerapannya.
| Atribut | karakteristik | Example |
|---|---|---|
| id | Harus unik dalam dokumen; digunakan untuk satu elemen. | |
| kelas | Dapat diterapkan pada banyak elemen; memungkinkan grupping. |
Contoh Penggunaan:
<div id="main-header">Welcome</div> <p class="text-highlight">Hello</p>
Praktik terbaik: Gunakan id untuk pengenal unik, dan class untuk kelompok penataan gaya yang dapat digunakan kembali.
24) Apa atribut data-* dalam HTML5, dan apa manfaatnya?
The data-* Atribut memungkinkan pengembang untuk menyimpan data khusus langsung di dalam elemen HTML. Atribut ini diawali dengan data- diikuti dengan nama, membuatnya dapat diakses melalui JavaNaskah.
Manfaat:
- Aktifkan penyimpanan metadata yang ringan tanpa memengaruhi DOM.
- Berguna untuk aplikasi dinamis, keterangan alat, atau pemrosesan sisi klien.
Contoh:
<button data-user="123" data-role="admin">Edit User</button>
<script>
let btn = document.querySelector("button");
console.log(btn.dataset.user); // 123
</script>
Fitur ini meningkatkan fleksibilitas dalam mengelola status dan perilaku dinamis.
25) Bagaimana aksesibilitas dipastikan dalam HTML menggunakan peran dan atribut ARIA?
Aksesibilitas dalam HTML memastikan aplikasi web dapat digunakan oleh penyandang disabilitas. Peran dan atribut ARIA (Aplikasi Internet Kaya yang Dapat Diakses) memberikan konteks tambahan untuk teknologi bantu.
Contoh atribut ARIA:
- role=”navigation” – mendefinisikan menu navigasi.
- aria-label=”Tutup” – menyediakan label deskriptif.
- aria-hidden=”true” – menyembunyikan elemen dari pembaca layar.
Contoh:
<button aria-label="Close window">X</button>
Dengan menggabungkan HTML semantik dengan atribut ARIA, pengembang meningkatkan inklusivitas dan mematuhi standar aksesibilitas seperti WCAG.
26) Apa perbedaan antara elemen inline, block, dan inline-block?
Elemen HTML dikategorikan berdasarkan perilaku tampilannya.
| Tipe | karakteristik | contoh |
|---|---|---|
| Di barisan | Jangan memulai pada baris baru; selebar konten. | , |
| Memblokir | Menempati seluruh lebar, dimulai pada baris baru. | , |
| Blok sebaris | Berperilaku seperti inline tetapi memungkinkan properti blok (tinggi, lebar). | , bergaya |
Contoh:
<span>Inline</span> <div>Block</div> <span style="display:inline-block; width:100px;">Inline-block</span>
27) Bagaimana Anda mengoptimalkan gambar dalam HTML untuk kinerja yang lebih baik?
Mengoptimalkan gambar mengurangi waktu muat halaman dan meningkatkan SEO. Strateginya meliputi:
- Menggunakan format modern seperti WebP or AVIF.
- Menerapkan gambar responsif dengan Dan
srcset. - Menetapkan atribut lebar dan tinggi untuk menghindari pergeseran tata letak.
- Mengompres gambar sebelum diunggah.
- Pemuatan malas menggunakan
loading="lazy".
Contoh:
<img src="image.webp" alt="Optimized Image" loading="lazy">
Gambar yang dioptimalkan dengan baik meningkatkan pengalaman pengguna dan meningkatkan skor Core Web Vitals.
28) Bagaimana siklus hidup halaman HTML di browser?
Siklus hidup halaman HTML melibatkan beberapa langkah:
- Penguraian: Peramban membaca HTML dan membangun Model Objek Dokumen (DOM).
- Pemuatan sumber daya: CSS, JS, dan gambar yang tertaut diambil.
- Rendering: Browser menerapkan elemen gaya dan tata letak.
- Skrip: JavaSkrip mengeksekusi dan memanipulasi DOM jika diperlukan.
- Interaksi: Peristiwa seperti klik dan gulir diproses.
Memahami siklus hidup ini membantu pengembang mengoptimalkan kecepatan rendering, meminimalkan skrip pemblokiran, dan memastikan pemuatan halaman yang efisien.
29) Apa keuntungan dan kerugian menggunakan HTML semantik?
HTML semantik meningkatkan makna dan aksesibilitas halaman web tetapi juga memiliki pertimbangan.
| Kelebihan | Kekurangan |
|---|---|
| Meningkatkan aksesibilitas untuk pembaca layar. | Memerlukan pembelajaran tag baru. |
| Meningkatkan SEO dengan memperjelas struktur. | Dapat meningkatkan waktu pengembangan awal. |
| Kode lebih mudah dibaca dan dirawat. | Peramban lama mungkin memiliki dukungan terbatas. |
Secara keseluruhan, kelebihannya lebih besar daripada kekurangannya, menjadikan HTML semantik praktik terbaik dalam pengembangan modern.
30) Bagaimana elemen yang digunakan untuk gambar responsif?
Itu Elemen ini memungkinkan pengembang untuk menyediakan beberapa sumber gambar untuk perangkat atau resolusi layar yang berbeda. Elemen ini menggunakan elemen bersarang elemen dengan atribut seperti media ke type.
Contoh:
<picture> <source srcset="image-large.webp" media="(min-width: 800px)"> <source srcset="image-small.webp" media="(max-width: 799px)"> <img src="fallback.jpg" alt="Responsive Image"> </picture>
Hal ini memastikan bahwa perangkat seluler memuat gambar yang lebih kecil, sementara desktop menerima gambar beresolusi tinggi, sehingga meningkatkan kinerja dan responsivitas.
31) Apa saja cara untuk menanamkan audio dalam HTML5?
HTML5 menyediakan elemen tersebut, sehingga menghilangkan kebutuhan akan plugin eksternal. Ini mendukung berbagai format seperti MP3, OGG, dan WAV untuk memastikan kompatibilitas lintas browser. Pengembang dapat menentukan beberapa sumber di dalam elemen tersebut memungkinkan browser untuk memilih format pertama yang didukung.
Contoh:
<audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
Fitur-fitur yang tersedia meliputi kontrol bawaan, pemutaran otomatis, dan lain-lain.ping, dan aksesibilitas dengan teks terjemahan melaluitrack>.
32) Bagaimana cara tag work, dan apa saja keuntungannya?
Itu Elemen ini memungkinkan penyematan video tanpa pemutar pihak ketiga. Format yang didukung meliputi MP4 (H.264), WebM, dan Ogg. Pengembang dapat menambahkan beberapa sumber dan atribut seperti controls, autoplay, loop, dan poster.
Contoh:
<video controls width="600" poster="thumbnail.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
Keuntungan:
- Menghilangkan ketergantungan pada Flash.
- Menyediakan aksesibilitas bawaan dengan teks.
- Menawarkan kinerja dan keamanan yang lebih baik.
33) Apa keuntungan dan kerugian menggunakan formulir HTML?
Formulir penting untuk masukan pengguna tetapi memiliki kelebihan dan kelemahan.
| Kelebihan | Kekurangan |
|---|---|
| Standar, didukung di semua browser. | Rentan terhadap risiko keamanan (misalnya, XSS, CSRF). |
| Integrasi yang mudah dengan server backend. | Formulir yang dirancang buruk mengurangi kegunaan. |
| Mendukung validasi dan berbagai jenis input. | Memerlukan HTTPS untuk penanganan data yang aman. |
Praktik terbaik: Gunakan tag formulir semantik, validasi sisi klien dan server, dan metode transmisi yang aman.
34) Apa perbedaan validasi formulir sisi klien dengan validasi sisi server?
Validasi sisi klien dilakukan di browser menggunakan atribut HTML5 ( required, pattern ) atau JavaSkrip. Memberikan umpan balik langsung tetapi dapat dilewati.
Validasi sisi server terjadi setelah data diserahkan ke server, memastikan keamanan dan kebenaran.
| Aspek | Sisi klien | Sisi server |
|---|---|---|
| Kecepatan | Umpan balik langsung | Lebih lambat, setelah penyerahan |
| Security | Bisa dilewati | Lebih aman |
| Example | PHP, validasi Node.js |
Praktik terbaik adalah menggabungkan kedua metode untuk kegunaan dan keamanan yang optimal.
35) Apa tujuan dari viewport tag meta dalam desain responsif?
The viewport Tag meta memastikan halaman web ditampilkan dengan benar di perangkat seluler. Secara default, banyak peramban seluler memperkecil tampilan halaman desktop. Tag viewport memungkinkan kontrol atas skala dan lebar.
Contoh:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Manfaat:
- Memastikan tata letak responsif.
- Mencegah masalah pembesaran.
- Meningkatkan Core Web Vitals dan kegunaan pada layar kecil.
Tanpanya, situs web mungkin tampak kecil dan tidak dapat digunakan pada perangkat seluler.
36) Bagaimana caranya Dan elemen meningkatkan aplikasi HTML5?
: Menyediakan cara bawaan untuk membuat pop-up modal. Pop-up ini dapat dibuka atau ditutup melalui JavaSkrip ( show() ke close() ).
: Menentukan fragmen HTML yang dapat digunakan kembali yang tidak akan ditampilkan hingga diaktifkan oleh JavaNaskah.
Contoh:
<dialog id="myDialog">Hello!</dialog> <template id="card"> <div class="card">Reusable content</div> </template>
Manfaat:
- menghilangkan ketergantungan pada pustaka modal eksternal.
- memungkinkan rendering dinamis tanpa mengacaukan DOM.
37) Jelaskan perbedaan antara , , and .
Skrip dapat memblokir penyajian halaman jika tidak dikelola dengan benar.
| Atribut | Tingkah laku | Use Case |
|---|---|---|
| Memblokir penguraian HTML hingga eksekusi selesai. | Skrip sebaris kecil | |
| Dimuat secara asinkron, dieksekusi segera setelah siap. | Analisis, iklan | |
| Dimuat secara asinkron, dijalankan setelah penguraian HTML. | Skrip yang bergantung pada DOM |
Contoh:
<script src="main.js" defer></script>
Menggunakan async ke defer meningkatkan kinerja dan mencegah masalah pemblokiran render.
38) Bagaimana Anda memastikan penanganan formulir dalam HTML yang aman?
Keamanan formulir memerlukan praktik HTML dan perlindungan backend.
Praktik utama meliputi:
- Selalu gunakan HTTPS untuk transmisi data.
- Validasi masukan sisi klien dan sisi server.
- Gunakan
autocomplete="off"atribut untuk bidang sensitif seperti kata sandi. - Mendaftar
rel="noopener noreferrer"pada tindakan bentuk eksternal. - Cegah Pemalsuan Permintaan Lintas Situs (CSRF) dengan token.
Contoh:
<form method="post" action="/id/secure" autocomplete="off"> <input type="password" name="pwd" required> </form>
Formulir yang aman melindungi dari kebocoran data dan kerentanan umum.
39) Apa perbedaan antara cookies, localStorage, dan sessionStorage dalam HTML5?
HTML5 memperkenalkan Penyimpanan Web sebagai alternatif cookie.
| Jenis Penyimpanan | Kapasitas | Lifetime | Dikirim dengan HTTP? |
|---|---|---|---|
| Cookie | ~4 KB | Sampai tanggal kadaluarsa | Ya |
| penyimpanan lokal | ~5–10 MB | Bertahan sampai dibersihkan | Tidak |
| penyimpanan sesi | ~5MB | Sampai browser/tab ditutup | Tidak |
Contoh:
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));
Penyimpanan Web meningkatkan kinerja karena data tidak dikirim dengan setiap permintaan HTTP.
40) Bagaimana HTML menangani aksesibilitas untuk gambar, formulir, dan multimedia?
Aksesibilitas memastikan inklusivitas bagi pengguna penyandang disabilitas.
- Gambar: penggunaan
altatribut untuk pembaca layar. - Formulir: Tambahkan tertaut dengan
foratribut untuk mendeskripsikan masukan. - multimedia: Berikan keterangan (teks terjemahan)track> untuk video) dan transkrip.
Contoh:
<img src="logo.png" alt="Company Logo"> <label for="email">Email</label> <input type="email" id="email">
Mengikuti standar aksesibilitas (WCAG, ARIA) membuat aplikasi web lebih mudah digunakan dan patuh hukum.
41) Apa manfaat menggunakantrack> elemen dengan multimedia?
ItutracElemen k> digunakan di dalam atau untuk menyediakan teks tracseperti subtitle, keterangan, atau deskripsi. Hal ini meningkatkan aksesibilitas dan kemudahan penggunaan.
Manfaat:
- Membantu pengguna dengan gangguan pendengaran.
- Meningkatkan SEO karena teks dapat dijelajahi.
- Meningkatkan pengalaman pengguna di lingkungan yang bising.
Contoh:
<video controls> <source src="movie.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English"> </video>
Hal ini memastikan konten multimedia dapat diakses oleh khalayak yang lebih luas.
42) Bagaimana file contenteditable atribut bekerja di HTML?
The contenteditable Atribut memungkinkan pengguna untuk mengedit konten elemen langsung di browser tanpa alat eksternal.
Contoh:
<p contenteditable="true">This paragraph is editable.</p>
Gunakan kasing:
- Editor dalam browser.
- Aplikasi pencatatan atau sejenis CMS.
- Prototyping fitur interaktif.
Meskipun berguna, hal ini harus ditangani dengan hati-hati karena penyuntingan yang tidak terkontrol dapat menimbulkan risiko keamanan saat data dikirimkan ke server.
43) Apa perbedaan antara peningkatan progresif dan degradasi anggun dalam desain HTML?
Ini adalah dua pendekatan untuk menangani kemampuan browser yang berbeda.
| Pendekatan | Konsep | Example |
|---|---|---|
| Peningkatan Progresif | Mulailah dengan HTML dasar dan tambahkan fitur-fitur lanjutan untuk peramban yang mumpuni. | Formulir bekerja dengan HTML dasar, tetapi menggunakan JavaValidasi skrip jika tersedia. |
| Degradasi Anggun | Bangun fitur-fitur tingkat lanjut terlebih dahulu dan pastikan ada cadangan untuk browser lama. | Bagan berbasis kanvas kembali ke gambar statis. |
Peningkatan progresif merupakan strategi yang disukai saat ini karena menjamin akses universal.
44) Apa itu mikrodata dalam HTML5, dan bagaimana manfaatnya untuk SEO?
Mikrodata adalah cara untuk menanamkan data terstruktur ke dalam elemen HTML menggunakan atribut seperti itemscope, itemtype, dan itempropMesin pencari menggunakan ini untuk menyediakan cuplikan kaya dalam hasil.
Contoh:
<div itemscope itemtype="https://schema.org/Book"> <span itemprop="name">HTML Mastery</span> by <span itemprop="author">Jane Doe</span> </div>
Manfaat:
- Meningkatkan visibilitas dengan cuplikan yang kaya.
- Memberikan konteks ke mesin pencari.
- Meningkatkan CTR dalam hasil pencarian.
45) Apa keuntungan dan kerugian menggunakan frame inline ( )?
Kami menyentuh sebelumnya, tetapi mari kita rangkum kelebihan dan kekurangannya.
| Kelebihan | Kekurangan |
|---|---|
| Integrasi konten pihak ketiga yang mudah. | Memperlambat kinerja halaman. |
| Menjaga sumber daya eksternal tetap terisolasi. | Rentan terhadap clickjacking. |
| Berguna untuk menanamkan peta, video. | Tidak ramah SEO, konten sering diabaikan. |
Praktik terbaik adalah menggunakan hemat dan lebih memilih API atau sematan yang memungkinkan penyesuaian dan integrasi aman.
46) Bagaimana cara Anda menggunakan Dan elemen dalam HTML5?
Elemen-elemen ini membuat bagian konten yang dapat dilipat tanpa JavaNaskah.
Contoh:
<details> <summary>Click for more details</summary> <p>This text is revealed when expanded.</p> </details>
Manfaat:
- Meningkatkan interaksi pengguna.
- Meningkatkan aksesibilitas (ramah terhadap keyboard dan pembaca layar).
- Menghindari ketergantungan pada kebiasaan JavaSolusi skrip.
Ini khususnya berguna untuk FAQ atau antarmuka pengungkapan progresif.
47) Apa perbedaan utama antara HTML dan XHTML?
HTML dan XHTML (Extensible HTML) adalah bahasa markup, tetapi XHTML mengikuti aturan XML yang lebih ketat.
| Fitur | HTML | XHTML |
|---|---|---|
| Sintaksis | Fleksibel | Ketat, sesuai XML |
| Penutupan tag | Opsional | wajib |
| Sensitivitas kasus | Tidak peka huruf besar/kecil | Harus huruf kecil |
| Menangani kesalahan | Peramban bersifat pemaaf | Kesalahan penguraian merusak rendering |
Contoh: valid dalam HTML tetapi harus dalam XHTML. Saat ini, HTML5 telah banyak menggantikan XHTML karena fleksibilitasnya.
48) Apa saja jenis doctype dalam HTML, dan mengapa itu penting?
Doctype memberi tahu browser versi HTML mana yang akan digunakan.
jenis:
- HTML5: (sederhana, modern).
- HTML 4.01 Ketat/Transisi/Frameset.
- XHTML 1.0 Ketat/Transisi/Frameset.
Penggunaan doctype yang tepat memastikan rendering yang konsisten di semua browser. Doctype HTML5 sekarang menjadi standar.
49) Bagaimana Anda meningkatkan SEO dengan tag HTML seperti , <meta>, dan <h1>?
SEO bergantung pada penataan semantik yang tepat.
- : Menentukan judul halaman, penting untuk peringkat.
- : Menyediakan cuplikan untuk mesin pencari.
- Judul ( – ): Mengatur hierarki konten.
- atribut alt pada gambar: Meningkatkan visibilitas pencarian gambar.
- Markup skema: Menyediakan data terstruktur.
Contoh:
<title>HTML Interview Questions</title> <meta name="description" content="Comprehensive HTML interview guide with answers."> <h1>Top HTML Questions</h1>
50) Apa perbedaan antara dan dalam HTML?
Meskipun keduanya menggunakan href atribut, tujuannya berbeda.
| label | Tujuan | Example |
|---|---|---|
| Membuat hyperlink untuk menavigasi antar halaman. | klik disini | |
| Menentukan hubungan dengan sumber daya eksternal seperti CSS atau ikon. |
Itu Elemen tidak pernah muncul di badan halaman, namun membuat teks atau gambar yang dapat diklik.
🔍 Pertanyaan Wawancara HTML Teratas dengan Skenario Dunia Nyata & Respons Strategis
1) Apa perbedaan antara elemen HTML semantik dan non-semantik, dan mengapa itu penting?
Apa yang dicari pewawancara: Pemahaman tentang semantik, aksesibilitas, SEO, dan pemeliharaan.
Contoh jawaban:
“Elemen semantik seperti , , , Dan menyampaikan makna dan struktur kepada peramban dan teknologi bantu. Mereka meningkatkan aksesibilitas melalui navigasi landmark yang lebih baik, membantu mesin pencari memahami hierarki konten, dan membuat kode lebih mudah dipelihara. Elemen non-semantik seperti dan tidak memberikan makna inheren dan sebaiknya digunakan untuk kasus-kasus di mana tidak ada elemen semantik yang sesuai. Saya memprioritaskan elemen semantik terlebih dahulu, lalu menambahkan kelas atau atribut ARIA hanya jika diperlukan.
2) Bagaimana Anda membuat formulir yang rumit menjadi mudah diakses dan ramah pengguna menggunakan HTML biasa?
Apa yang dicari pewawancara: Penguasaan kontrol bentuk asli, label, batasan, dan atribut aksesibilitas.
Contoh jawaban:
“Saya mulai dengan asosiasi yang tepat, menggunakan kata-kata yang tepat type atribut seperti email, tel, dan date, dan tambahkan required, min, dan pattern untuk validasi kendala. Saya mengelompokkan bidang terkait dengan Dan Saya menggunakan aria-describedby untuk menghubungkan masukan ke teks pembantu dan pesan kesalahan, memberikan penjelasan yang jelas placeholder teks tanpa mengganti label, dan mengaktifkan autocomplete token seperti given-name ke address-line1Saya mengandalkan pesan validasi asli, tetapi melengkapinya dengan ringkasan kesalahan yang mudah diakses yang berfokus pada bidang pertama yang tidak valid.”
3) Jelaskan bagaimana Anda akan menghasilkan gambar responsif dengan kinerja optimal.
Apa yang dicari pewawancara: Penggunaan praktis dari , sizes, Dan .
Contoh jawaban:
“Saya menggunakan dengan srcset untuk memberikan beberapa resolusi dan sizes atribut yang mencerminkan lebar render tata letak yang sebenarnya. Untuk arahan seni, saya membungkus gambar dalam dengan media yang dikondisikan elemen. Saya selalu menyertakan intrinsik width ke height untuk memesan ruang dan mengurangi pergeseran tata letak, dan saya mempertimbangkan loading="lazy" untuk gambar di bawah lipatan. Jika memungkinkan, saya menyajikan format modern seperti AVIF atau WebP dengan fallback.
4) Halaman lama menggunakan tabel untuk tata letak dan tidak dapat diakses. Bagaimana Anda melakukan refaktorisasi?
Apa yang dicari pewawancara: Strategi migrasi, manajemen risiko, dan pengujian.
Contoh jawaban (menggunakan frasa wajib #1):
“Dalam peran saya sebelumnya, saya mengganti struktur berbasis tabel dengan kontainer semantik seperti , , , dan CSS Grid untuk tata letak. Saya melakukan migrasi secara bertahap untuk mengurangi risiko, petaping Saya membagi setiap bagian tabel ke dalam bagian semantik dan memvalidasinya dengan validator HTML dan aXe. Saya menambahkan level heading, landmark, dan urutan fokus keyboard yang tepat. Saya memverifikasi kesamaan dengan tes regresi visual dan meningkatkan kinerja dengan menghapus gambar pemisah dan atribut yang sudah usang.”
5) Bagaimana caranya defer ke async pada differ, and why should HTML authors care?
Apa yang dicari pewawancara: Pemahaman tentang perilaku rendering dan pemblokiran.
Contoh jawaban:
"async mengunduh dan mengeksekusi skrip segera setelah tersedia, yang dapat menyebabkan eksekusi tidak berurutan. defer mengunduh selama penguraian tetapi menjamin eksekusi setelah HTML diurai, secara berurutan. Penulis HTML harus berhati-hati karena skrip pemblokiran menunda render pertama. Saya menggunakan default defer untuk skrip halaman yang bergantung pada kesiapan DOM dan cadangan async untuk skrip independen seperti analitik.”
6) Jelaskan saat Anda menyeimbangkan permintaan desain piksel sempurna dengan HTML yang semantik dan mudah diakses.
Apa yang dicari pewawancara: Kolaborasi, komunikasi, dan prinsip-prinsip saling menguntungkan.
Contoh jawaban (menggunakan frasa wajib #2):
“Pada posisi sebelumnya, sebuah desain membutuhkan pembungkus dekoratif bersarang yang mendorong markup non-semantik. Saya mengusulkan struktur semantik terlebih dahulu, lalu mencapai hasil visual dengan CSS, alih-alih tambahan elemen. Saya mendemonstrasikan peningkatan navigasi pembaca layar dan mendokumentasikan API komponen yang disepakati. Kompromi tersebut mempertahankan tampilan yang diinginkan sambil tetap menjaga aksesibilitas dan kemudahan perawatan.
7) Anda menemukan pergeseran tata letak kumulatif akibat gambar dan iframe tanpa dimensi. Apa rencana Anda?
Apa yang dicari pewawancara: Solusi praktis untuk masalah kinerja nyata.
Contoh jawaban (menggunakan frasa wajib #3):
“Di pekerjaan saya sebelumnya, saya mengaudit semua Dan unsur-unsur dan menambahkan intrinsik width ke height atribut yang sesuai dengan rasio aspek sumber. Saya menggunakan CSS max-width: 100% untuk skala responsif dan, ketika konten dinamis terlibat, saya menerapkan CSS aspect-ratio placeholder properti atau kontainer. Saya telah memverifikasi peningkatan di panel Performa dan Lighthouse, yang mengonfirmasi pengurangan pergeseran tata letak.
8) Apa praktik terbaik untuk menulis tabel HTML yang mudah diakses?
Apa yang dicari pewawancara: Markup struktural yang benar dan dukungan teknis bantuan.
Contoh jawaban:
“Saya menggunakan untuk judul yang ringkas, , , Dan untuk struktur, dan untuk menentukan header. Untuk tabel kompleks dengan header multi-level, saya menggunakan headers ke id atribut untuk memetakan sel. Saya menghindari penggunaan tabel untuk tata letak, memastikan kontras teks yang memadai untuk konten di dalam sel, dan memberikan ringkasan di luar tabel untuk konteks jika diperlukan.
9) Bagaimana Anda menangani tenggat waktu yang ketat ketika beberapa hasil HTML bersaing untuk mendapatkan perhatian?
Apa yang dicari pewawancara: Prioritas, komunikasi, dan kualitas di bawah tekanan.
Contoh jawaban (menggunakan frasa wajib #4):
"Di peran terakhir saya, saya memilah tugas berdasarkan dampak pengguna dan rantai ketergantungan. Saya mengirimkan halaman dengan dampak tertinggi dan risiko terendah terlebih dahulu, mengomunikasikan kompromi kepada para pemangku kepentingan, dan menetapkan definisi penyelesaian yang mencakup validasi, pemeriksaan aksesibilitas, dan anggaran kinerja dasar. Saya mendokumentasikan setiap peningkatan yang tertunda dan menjadwalkan perbaikan lanjutan untuk memastikan kualitas tidak menurun."
10) Situs pemasaran satu halaman harus ramah SEO tanpa JavaKetergantungan skrip. Strategi HTML apa yang Anda terapkan?
Apa yang dicari pewawancara: Kemampuan untuk mengirimkan konten yang tangguh dan mudah dicari.
Contoh jawaban:
“Saya memastikan konten utama ditampilkan dalam HTML, bukan disuntikkan oleh JavaNaskah. Saya menggunakan hierarki judul logis, deskriptif. dan <meta name=”description”>, kanonik URLSaya menambahkan bagian-bagian semantik. Saya menandai konten dengan microdata atau JSON-LD yang sesuai jika diperlukan, memastikan tautan internal yang bermakna, dan menambahkan tag meta sosial untuk pratinjau. Saya memvalidasi kerangka dokumen dan memastikan kemampuan perayapan dengan peta situs statis.”
