Tổng hợp 78 câu hỏi phỏng vấn HTML kèm đáp án chi tiết, song ngữ Việt–Anh — sắp xếp từ cơ bản đến nâng cao. Ôn luyện miễn phí, tự động lưu tiến độ.
DOCTYPE (Document Type Declaration) khai báo phiên bản HTML đang dùng và phải nằm ở dòng đầu tiên. HTML5 chỉ cần một dòng: Nó quyết định browser render ở standards mode hay quirks mode. Thiếu DOCTYPE → quirks mode, và khác biệt lớn nhất là…
Một tài liệu HTML tối thiểu gồm bốn phần: - <!DOCTYPE html — bật standards mode. - <html — phần tử gốc; lang ảnh hưởng trực tiếp tới screen reader và Google Translate. - <head — metadata, không hiển thị: <title, <meta, <link, <script. -…
Khác nhau ở cách element tham gia vào dòng: block chiếm một dòng riêng, inline nằm cùng dòng với văn bản xung quanh. - Block (<div, <p, <h1): chiếm hết chiều rộng còn trống, luôn bắt đầu dòng mới, đặt được width/height. - Inline (<span,…
Attribute cung cấp thông tin bổ sung cho element, viết trong thẻ mở theo cú pháp name="value": Ba nhóm hay gặp: - Global — dùng được trên mọi thẻ: id, class, style, title, hidden, data-. - Riêng từng thẻ: href (a), src/alt (img), type/name (input).…
Boolean attribute chỉ có hai trạng thái: có mặt = true, vắng mặt = false. Giá trị gán cho nó không được xét đến. Nhóm hay gặp: disabled, checked, selected, required, readonly, autofocus, hidden, multiple, defer, async. Muốn tắt thì phải gỡ hẳn attribute, không…
data- cho phép gắn dữ liệu tuỳ ý lên element mà vẫn hợp lệ theo HTML spec (dùng attribute tự chế như userid="123" thì không). Dùng được cả trong CSS: Ứng dụng thực tế: gắn hook cho test (data-testid), truyền id xuống event delegation, đánh…
id duy nhất trên toàn trang, class dùng lại thoải mái. id class --------- Số lần xuất hiện 1 nhiều Specificity (1,0,0) (0,1,0) Dùng cho anchor pricing, label[for], aria-labelledby style, nhóm element Vì specificity của id cao hơn class 10 lần bậc, style gắn vào…
Semantic HTML là dùng thẻ mô tả đúng vai trò nội dung thay vì <div/<span trung tính. Bốn lý do nó đáng giá: 1. Accessibility — screen reader nhảy thẳng tới landmark (main, nav, header); với <div thì không có gì để nhảy tới. 2.…
<div là container không mang nghĩa; <section là một khối nội dung có chủ đề riêng. Quy tắc quyết định: - Chỉ cần chỗ để gắn display:flex, padding, background → <div. - Khối này có tiêu đề riêng và có thể xuất hiện trong mục…
<article là nội dung đứng riêng vẫn có nghĩa; <section là một phần trong mạch nội dung của trang. Phép thử: đem khối đó sang RSS feed hoặc site khác mà vẫn hiểu → <article. Cần trang gốc mới hiểu → <section. Hai thẻ lồng…
Năm thẻ landmark, mỗi thẻ trả lời một câu hỏi "khối này đóng vai gì trong trang": Thẻ Số lần / trang Screen reader --------- <main đúng 1 đích của "skip to content" <nav nhiều liệt kê trong danh sách landmark <header / <footer nhiều…
<figure gói nội dung minh hoạ tách được khỏi mạch văn (ảnh, biểu đồ, đoạn code, video); <figcaption là chú thích của nó, đặt ở đầu hoặc cuối. Điểm hay bị nhầm: figcaption không thay được alt. Ai đọc được Nói cái gì --------- alt…
Cả ba đều mang ngữ nghĩa, khác nhau ở loại nhấn: Thẻ Nghĩa Mặc định --------- <strong mức độ quan trọng cao đậm <em nhấn trọng âm, đổi sắc thái câu nghiêng <mark liên quan tới ngữ cảnh hiện tại (từ khoá tìm kiếm) nền…
<time gắn một mốc thời gian máy đọc được vào phần chữ mà người đọc thấy. datetime phải theo ISO 8601. Nếu bỏ datetime thì phần text bên trong bắt buộc tự nó là chuỗi ngày hợp lệ. Dùng ở đâu: ngày đăng bài (Google…
Semantic HTML không phải yếu tố xếp hạng trực tiếp, nhưng ảnh hưởng gián tiếp qua ba đường: 1. Crawler hiểu đúng đâu là nội dung chính. <main/<article tách nội dung khỏi menu và sidebar, nên đoạn trích trong kết quả tìm kiếm lấy đúng…
<dl là danh sách cặp khoá – giá trị hoặc thuật ngữ – định nghĩa. Phù hợp nhất cho: metadata bài viết, glossary, bảng thông số sản phẩm, FAQ (<dt là câu hỏi, <dd là câu trả lời). Khi cần một lớp bọc để style,…
<details là accordion có sẵn trong browser, không cần JS. Lợi thế so với accordion tự viết: có sẵn bàn phím (Enter/Space), đúng vai trò cho screen reader, và nội dung bên trong vẫn được Ctrl+F tìm thấy — browser tự bung ra. Lưu ý:…
HTML5 (2014) thay đổi ba mảng lớn so với HTML4: 1. Ngữ nghĩa & media — thẻ landmark <header, <nav, <article, <section, <figure; <audio/<video chạy thẳng không cần Flash; <canvas và SVG inline. 2. API trình duyệt — localStorage/sessionStorage, IndexedDB, Geolocation, Web Worker, WebSocket, History…
Khác nhau ở cái browser giữ lại sau khi vẽ. - Canvas — bitmap. Bạn vẽ pixel bằng JS, vẽ xong browser không nhớ hình gì đã vẽ. - SVG — mỗi hình là một DOM node, có thể style bằng CSS, gắn event listener,…
PWA là web app dùng một nhóm API để đạt trải nghiệm gần app native: chạy offline, cài được lên màn hình chính, nhận push notification. Ba điều kiện bắt buộc: 1. HTTPS — Service Worker chỉ chạy trên secure context (localhost được miễn). 2.…
GET gắn dữ liệu vào URL, POST gửi trong body. GET POST --------- Vị trí dữ liệu query string request body Bookmark / share link được không Nằm trong lịch sử & log server có không Browser cache có không F5 sau khi gửi an…
Mỗi type đổi cả bàn phím trên mobile, UI của control và validation mặc định. Ba nhóm: - Chữ & số: text, password, email, number, tel, url, search. - Ngày giờ: date, time, datetime-local, month, week. - Tương tác & media: color, range, file, checkbox,…
<label nối phần chữ mô tả với control. Hai cách viết: Ba thứ có được ngay: 1. Click vào chữ = focus/tick input — vùng bấm rộng ra rất nhiều trên mobile, đặc biệt với checkbox nhỏ. 2. Screen reader đọc đúng tên field khi…
<select giới hạn lựa chọn; <datalist chỉ gợi ý, người dùng vẫn gõ tự do. <select <datalist --------- Nhập giá trị ngoài danh sách không được Gõ để lọc không (chỉ nhảy theo chữ cái) có Giá trị gửi đi option.value đúng chuỗi đã gõ…
<fieldset nhóm các control liên quan, <legend là nhãn của cả nhóm. Hữu ích nhất là với nhóm radio/checkbox. Mỗi radio có label riêng ("Khi nhận hàng"), nhưng không có gì nói đang chọn cho câu hỏi nào. Screen reader đọc legend trước mỗi lựa…
Validation dựng sẵn chạy khi submit, không cần JS: Attribute Áp cho ------ required mọi control pattern text, tel, email, url, password, search min / max / step number, range, date/time minlength / maxlength các kiểu nhập chữ Style theo trạng thái bằng pseudo-class: Lưu…
Khác biệt quyết định nằm ở giá trị có được gửi lên server hay không. readonly disabled --------- Sửa được không không Focus / tab tới được không Bôi đen, copy được không Gửi kèm form có không Giao diện mặc định như thường mờ…
enctype quyết định cách browser đóng gói dữ liệu form khi method="post". Giá trị Khi nào dùng Dạng body --------- application/x-www-form-urlencoded mặc định, dữ liệu chữ name=Dinh&age=30 multipart/form-data có file chia phần theo boundary text/plain debug thô, không encode Lưu ý: quên enctype="multipart/form-data" khi upload…
autocomplete nói cho browser biết field này chứa loại dữ liệu gì, để gợi ý đúng thứ đã lưu. Đặt được ở cấp <form (áp cho cả form) hoặc từng input. autocomplete="off" chỉ nên dùng cho field thật sự dùng một lần. Lưu ý: đừng…
Constraint Validation API là mặt JavaScript của validation có sẵn — cho phép đọc trạng thái và đặt thông báo lỗi riêng. Các cờ trong validity: valueMissing, typeMismatch, patternMismatch, tooShort, tooLong, rangeUnderflow, rangeOverflow, stepMismatch, customError. Lưu ý: quên gọi setCustomValidity('') khi giá trị đã hợp…
FormData thu thập dữ liệu form thành cặp khoá–giá trị, kể cả file, để gửi bằng JavaScript. Chuyển sang JSON khi API cần: Lưu ý 1: input không có name sẽ không xuất hiện trong FormData — kể cả khi có id và value. Lưu…
Accessibility (a11y — 11 chữ cái giữa chữ a và y) là làm cho web dùng được với mọi người, gồm người khiếm thị, khiếm thính, hạn chế vận động và hạn chế nhận thức. Bốn lý do, xếp theo thứ tự interviewer muốn nghe:…
ARIA (Accessible Rich Internet Applications) là bộ attribute bổ sung ngữ nghĩa cho screen reader khi HTML gốc không diễn tả đủ. Ba nhóm: Quy tắc số 1 của ARIA: đừng dùng ARIA nếu HTML đã làm được. ARIA chỉ đổi cách screen reader mô…
alt mô tả ảnh cho screen reader, và hiện ra khi ảnh không tải được. Nội dung viết gì phụ thuộc vai trò của ảnh: Lỗi hay gặp, theo thứ tự phổ biến: - alt="IMG2043.jpg" — screen reader đọc nguyên tên file. - alt="hình ảnh…
WCAG (Web Content Accessibility Guidelines) là bộ tiêu chí của W3C để đo mức độ truy cập được của nội dung web. Bốn nguyên tắc — POUR: Nghĩa Ví dụ tiêu chí --------- Perceivable nhận biết được alt cho ảnh, phụ đề video, tương phản…
Cả ba đều cấp tên hoặc mô tả cho screen reader, khác nhau ở nguồn chữ và vai trò. Nguồn Vai trò Ưu tiên ------------ aria-labelledby id của element khác tên cao nhất aria-label chuỗi viết thẳng tên thua labelledby aria-describedby id của element khác…
Bàn phím là đường vào duy nhất với người hạn chế vận động, người dùng screen reader, và cả người dùng thành thạo muốn nhanh. Phím quy ước — làm sai là người dùng mắc kẹt: Phím Hành vi mong đợi ------ Tab / Shift+Tab…
tabindex quyết định element có nằm trong thứ tự Tab hay không. Giá trị Vào tab order element.focus() --------- 0 có, theo thứ tự DOM được -1 không được 0 có, nhảy lên trước tất cả được Link, button, input, select, textarea đã focus được…
Tỉ lệ tương phản đo độ chênh sáng giữa màu chữ và màu nền, tính từ 1:1 (trùng nhau) tới 21:1 (đen trên trắng). Nội dung AA AAA --------- Chữ thường 4.5:1 7:1 Chữ lớn (≥18.66px, hoặc ≥14px in đậm) 3:1 4.5:1 Viền input, icon…
Cả hai đều tải script song song với việc parse HTML nên không chặn render. Khác nhau ở thời điểm thực thi: - async: chạy ngay khi tải xong, có thể chen ngang lúc HTML còn đang parse. Thứ tự thực thi không đảm bảo…
Cả hai là kho key-value cùng API (setItem, getItem, removeItem, clear), chỉ lưu chuỗi, dung lượng ~5–10MB, đồng bộ, gắn theo origin. Khác nhau ở vòng đời và phạm vi: - localStorage: tồn tại vô thời hạn đến khi xoá thủ công. Chia sẻ giữa…
Phần tử <dialog mở được ở hai chế độ: - showModal() — mở dạng modal: đưa dialog lên top layer, có pseudo-element ::backdrop phủ nền, giữ focus trong dialog (focus trap), nhấn Esc để đóng, và phần nền trở nên inert (không tương tác được).…
Khi dùng target="blank", trang mới nhận được tham chiếu window.opener trỏ ngược về trang gốc. Trang đích (nhất là link ngoài không kiểm soát) có thể lợi dụng để window.opener.location = "trang-giả" — kỹ thuật reverse tabnabbing (đánh tráo tab cũ sang trang lừa đảo).…
Vì onClick chỉ mang lại hành vi chuột. <button là phần tử tương tác dựng sẵn, kèm theo cả một tập hành vi mà div không có: - Focus được bằng bàn phím (nằm trong tab order tự nhiên). - Kích hoạt bằng Enter và…
Hai cách liên kết chuẩn: Cách 1 được ưu tiên vì linh hoạt về layout và tương thích rộng hơn với trợ năng. Lưu ý for khớp với id, không phải name. Liên kết đúng cho ba lợi ích: screen reader đọc được nhãn khi…
alt mô tả chức năng của ảnh trong ngữ cảnh, không phải mô tả pixel. Cùng một tấm ảnh có thể cần alt khác nhau ở hai trang khác nhau. Ba trường hợp chính: alt="" (rỗng, vẫn phải có thuộc tính) dùng cho ảnh thuần…
Quy tắc số 1 của ARIA: nếu có phần tử HTML native mang sẵn ngữ nghĩa và hành vi bạn cần, hãy dùng phần tử đó thay vì gán role ARIA. ARIA chỉ đổi cách phần tử được mô tả trong accessibility tree — nó…
Accessible name là chuỗi mà screen reader đọc lên để định danh phần tử (khác với role và state). Trình duyệt tính nó theo thuật toán accname, duyệt lần lượt và dừng ở nguồn đầu tiên có giá trị không rỗng: 1. aria-labelledby — trỏ…
Tô đỏ viền là tín hiệu chỉ dành cho mắt. Cần ba mảnh ghép: 1. Đánh dấu ô lỗi: aria-invalid="true" để screen reader đọc "không hợp lệ" khi focus vào ô. Bỏ về false/gỡ hẳn khi người dùng sửa xong. 2. Nối thông báo lỗi…
Dùng live region: một vùng DOM có aria-live, khi nội dung bên trong thay đổi thì screen reader tự đọc mà không cần chuyển focus. Chọn mức độ: - aria-live="polite" (hoặc role="status"): đợi người dùng ngừng thao tác rồi đọc. Dùng cho hầu hết trường…
Bốn bước, thiếu bước nào cũng làm người dùng bàn phím lạc chỗ: 1. Nhớ phần tử đang focus trước khi mở (document.activeElement). 2. Chuyển focus vào trong modal ngay khi mở — vào phần tử tương tác đầu tiên, hoặc vào chính container (đặt…
Một dropdown chỉ nghe click là bỏ rơi toàn bộ người dùng bàn phím. Tập phím tối thiểu theo APG (menu button): - Enter / Space / ArrowDown trên nút: mở menu và focus item đầu. - ArrowDown / ArrowUp: di chuyển giữa các item…
prefers-reduced-motion là media query phản ánh cài đặt "giảm chuyển động" ở hệ điều hành. Người bật nó thường bị rối loạn tiền đình: parallax, zoom lớn, phần tử bay ngang màn hình có thể gây chóng mặt, buồn nôn. "Reduced" không phải "none". Cách…
Kết hợp máy quét tự động với kiểm tra thủ công — công cụ tự động chỉ bắt được một phần lỗi (thiếu alt, contrast, thiếu label, id trùng), phần còn lại là logic mà máy không đánh giá được. Tự động: - axe DevTools…
Tiêu chí 1.4.1 (mức A) nói màu không được là kênh duy nhất truyền tải thông tin, chỉ ra hành động hay phân biệt trạng thái. Đây là tiêu chí khác hẳn 1.4.3 Contrast: contrast đủ mà vẫn trượt 1.4.1 là chuyện bình thường. Ba…
Ba tiêu chí khác nhau, hay bị gộp làm một: Tiêu chí Mức Yêu cầu --------- 1.4.10 Reflow AA Nội dung dùng được ở bề rộng 320 CSS px mà không phải cuộn theo cả hai chiều 1.4.4 Resize Text AA Phóng chữ tới 200%…
2.1.2 No Keyboard Trap (mức A): nếu focus vào được một vùng bằng bàn phím thì cũng phải ra được bằng bàn phím, dùng phím thông thường (Tab, Shift+Tab, mũi tên). Nếu cần phím đặc biệt để thoát thì phải nói cho người dùng biết…
Hai tiêu chí tách bạch: - 3.1.1 Language of Page (mức A): ngôn ngữ mặc định của trang phải khai báo sao cho máy đọc được — tức lang trên thẻ <html. - 3.1.2 Language of Parts (mức AA): mỗi đoạn nội dung thuộc ngôn…
1.3.1 (mức A) yêu cầu: quan hệ giữa các phần nội dung mà mắt nhìn ra được thì máy cũng phải đọc ra được. Mắt thấy "cột này là tiêu đề của hàng dưới", "bốn ô radio này thuộc chung một câu hỏi" — screen…
2.4.4 Link Purpose (In Context) — mức A — yêu cầu đích đến của link phải suy ra được từ chữ trong link, hoặc từ ngữ cảnh chương trình đọc được (câu chứa nó, ô bảng, mục danh sách). Vấn đề của "Xem thêm" nằm…
"Thay đổi ngữ cảnh" (change of context) theo WCAG là một trong bốn thứ: đổi user agent, đổi viewport, đổi focus, hoặc thay đổi nội dung làm đứt mạch trang. Đổi nội dung bình thường — mở accordion, lọc danh sách tại chỗ — không…
