51 câu hỏi phỏng vấn HTML có đáp án

#1DOCTYPE là gì? Tại sao cần khai báo DOCTYPE?

Cơ Bản

DOCTYPE (Document Type Declaration) khai báo phiên bản HTML đang sử dụng, đặt ở dòng đầu tiên.

HTML5 chỉ cần <!DOCTYPE html>.
Giúp trình duyệt render đúng chuẩn (standards mode).
Không có DOCTYPE → quirks mode: box model, CSS parsing khác nhau giữa các browsers, gây lỗi hiển thị.

#2Cấu trúc cơ bản của một tài liệu HTML bao gồm những gì?

Cơ Bản

Cấu trúc cơ bản của tài liệu HTML bao gồm các phần chính sau:

<!DOCTYPE html>: Khai báo loại tài liệu cho trình duyệt
<html>: Phần tử gốc (root element) bọc toàn bộ trang
<head>: Chứa siêu dữ liệu (metadata) như <title>, <meta>, <link>, <style>
<body>: Chứa toàn bộ nội dung sẽ hiển thị trên trang web.

#3Element block và element inline khác nhau như thế nào?

Cơ Bản

Block element chiếm toàn bộ chiều rộng, bắt đầu dòng mới (<div>, <p>, <h1>).

Inline element chỉ chiếm chiều rộng cần thiết (<span>, <a>, <strong>).
Block chứa được inline, nhưng thường không ngược lại.
Ngoại lệ HTML5: <a> có thể bọc block elements.

#4Attribute là gì? Cho ví dụ?

Cơ Bản

Attribute cung cấp thông tin bổ sung cho HTML element, viết trong thẻ mở theo cú pháp name="value".

Ví dụ: <a href="https://example.com" target="_blank">Link</a>. Các attribute phổ biến: href, src, class, id, style, alt, type, placeholder. Một số attribute không cần giá trị (boolean): disabled, checked, required.

Lưu ý: attribute name không phân biệt hoa thường nhưng giá trị thì có.

#5Boolean attribute là gì? Cho ví dụ?

Cơ Bản

Boolean attribute là loại attribute trong HTML chỉ có hai trạng thái: có mặt trong thẻ nghĩa là true, vắng mặt nghĩa là false — giá trị gán cho nó không quan trọng. Ví dụ, viết <input disabled> hoặc <input disabled=""> hoặc <input disabled="disabled"> đều cho kết quả giống nhau là input bị vô hiệu hóa.

Các boolean attribute phổ biến bao gồm disabled, checked, selected, required, readonly, autofocus, hidden, multiple. Một lỗi rất hay gặp là viết disabled="false" với ý định bật lại — nhưng thực tế element vẫn bị disable vì browser chỉ kiểm tra attribute có tồn tại hay không, không quan tâm giá trị.

#6Custom attribute (data-*) là gì?

Cơ Bản

Cho phép lưu trữ dữ liệu tùy chỉnh trên HTML element mà không vi phạm HTML spec.

Cú pháp: data-user-id="123".
Truy cập qua JS bằng element.dataset.userId (tự convert kebab-case sang camelCase). Ứng dụng: truyền data từ HTML sang JS, CSS selectors ([data-active]), testing (data-testid).
React dùng data attributes để pass info cho DOM.

#7Semantic HTML là gì? Tại sao quan trọng?

Cơ Bản

Semantic HTML dùng thẻ có ý nghĩa mô tả nội dung (<article>, <nav>, <header>, <main>, <aside>) thay vì thẻ chung (<div>, <span>).

Quan trọng vì:

SEO — search engines hiểu cấu trúc trang tốt hơn.
Accessibility — screen readers navigate bằng semantic landmarks.
Maintainability — code tự mô tả, đọc hiểu nhanh hơn.
Consistency — team dùng cùng conventions

#8Sự khác biệt giữa <div> và <section> là gì?

Cơ Bản

<div> là container chung không có ý nghĩa ngữ nghĩa — dùng khi chỉ cần nhóm để style hoặc layout. <section> đại diện cho phần nội dung có chủ đề liên quan, thường có <h2> hoặc heading đi kèm.

Screen readers nhận diện <section> là landmark region.

Ví dụ thực tế: một trang product dùng <section> cho phần mô tả, reviews, specs — không dùng <div> cho các khối nội dung có ý nghĩa riêng biệt.

#9<article> và <section> khác nhau thế nào?

Cơ Bản

<article> là nội dung độc lập, có thể đứng riêng và vẫn có nghĩa (bài blog, comment, card sản phẩm, tweet). <section> là nhóm nội dung liên quan trong cùng tài liệu, cần context của trang.

Test nhanh: nếu có thể syndicate nội dung đó ra site khác mà vẫn hiểu được → dùng <article>.
Article thường có <header>, <footer>, byline riêng.
Article có thể chứa nhiều <section> và <section> có thể chứa nhiều <article>.

#10<header>, <footer>, <nav>, <main>, <aside> dùng khi nào?

Cơ Bản

<header>: phần giới thiệu/navigation của trang hoặc section (có thể dùng nhiều lần). <footer>: thông tin cuối trang (copyright, liên hệ, links). <nav>: navigation links chính — screen readers cho phép nhảy thẳng đến đây. <main>: nội dung chính, duy nhất 1 per page, screen readers có thể nhảy thẳng đến <main> (skip navigation). <aside>: nội dung liên quan gián tiếp (sidebar, related posts, ads).

Lưu ý: <header> và <footer> không nhất thiết chỉ dùng ở top/bottom trang — mỗi <article> cũng có thể có header riêng.

#11<figure> và <figcaption> dùng để làm gì?

Cơ Bản

<figure> nhóm nội dung minh họa có thể tách ra mà không ảnh hưởng luồng văn bản chính: ảnh, biểu đồ, code snippet, video. <figcaption> là chú thích mô tả, đặt đầu hoặc cuối <figure>.

Ví dụ: <figure><img src="chart.png" alt="Biểu đồ doanh thu Q1 2024"><figcaption>Biểu đồ doanh thu Q1</figcaption></figure>. <figcaption> bổ sung thêm cho alt, không thay thế nó — alt vẫn cần mô tả nội dung ảnh cho screen readers; figcaption là caption hiển thị cho tất cả users. Nếu figcaption đã mô tả đầy đủ, alt có thể để rỗng (alt=""). Khác với chỉ dùng <img>: figure semantically đóng gói ảnh kèm caption.

#12HTML5 có những tính năng mới nào so với HTML4?

Cơ Bản

HTML5 mang đến nhiều cải tiến lớn so với HTML4 trên 3 nhóm chính:

Semantic & Media: thẻ semantic (<header>, <nav>, <article>, <section>), <audio>/<video> native không cần Flash, Canvas/SVG cho đồ họa.

Storage & APIs: Web Storage (localStorage, sessionStorage), IndexedDB cho dữ liệu lớn, Geolocation API, Web Workers, WebSocket, Drag & Drop.

Forms: form validation tích hợp, các input types mới (email, date, number, range, color).

#13Canvas và SVG khác nhau thế nào?

Cơ Bản

Canvas là pixel-based (raster), vẽ bằng JavaScript, tốt cho game/animation phức tạp.

SVG là vector-based (XML), scale không mất chất lượng, tốt cho icon/chart/logo.
SVG accessible hơn vì là DOM elements.

#14Method GET và POST khác nhau thế nào?

Cơ Bản

GET gửi dữ liệu qua URL (query string), giới hạn kích thước, có thể bookmark. POST gửi trong body request, không giới hạn kích thước.

Lưu ý: POST không tự bảo mật hơn GET — cần HTTPS để bảo vệ dữ liệu. GET cho truy vấn, POST cho dữ liệu lớn/thay đổi state.

#15Các input types trong HTML5 có những gì?

Cơ Bản

HTML5 cung cấp nhiều input types với validation và UI riêng theo nhóm:

Text/Data: text, password, email, number, tel, url, search.

Date/Time: date, time, datetime-local, month, week.

Interactive/Media: color, range, file, checkbox, radio, hidden, submit, reset, button.

#16<label> element quan trọng thế nào?

Cơ Bản

<label> liên kết mô tả với form control theo 2 cách: dùng for khớp với id của input (<label for="email">Email</label><input id="email">), hoặc wrapping trực tiếp.

Click vào label = focus/check input — tăng click area đáng kể trên mobile.
Screen readers đọc label khi user focus vào input.
Lỗi phổ biến: chỉ dùng placeholder thay label — placeholder biến mất khi gõ, không accessible.
Placeholder nên là gợi ý, không phải label.

#17<select> và <datalist> khác nhau thế nào?

Cơ Bản

<select> là dropdown cho phép chọn từ danh sách cố định — user không thể nhập giá trị ngoài list. <datalist> gắn vào <input> qua list attribute, cung cấp gợi ý tự động điền nhưng user vẫn gõ giá trị tùy ý.

Ví dụ datalist: ô tìm kiếm gợi ý nhưng cho phép search từ khóa mới.

#18<fieldset> và <legend> dùng để làm gì?

Cơ Bản

<fieldset> nhóm các form controls có liên quan nhau, tạo border visual và semantic grouping. <legend> là tiêu đề mô tả cho nhóm đó.

Đặc biệt quan trọng cho nhóm radio/checkbox: screen readers đọc legend trước mỗi option (ví dụ: 'Giới tính: Nam / Nữ').
Có thể dùng disabled trên <fieldset> để disable toàn bộ group inputs bên trong. Ứng dụng: form đăng ký nhiều section (Thông tin cá nhân, Địa chỉ, Thanh toán).

#19Accessibility (a11y) là gì? Tại sao quan trọng?

Cơ Bản

Accessibility (a11y — viết tắt 11 chữ cái giữa) là khả năng web được dùng bởi mọi người, kể cả người khuyết tật (thị giác, thính giác, vận động, nhận thức).

Quan trọng vì:

Đạo đức — ~15% dân số thế giới có dạng khuyết tật nào đó.
Luật pháp — ADA (Mỹ), WCAG 2.1 AA là yêu cầu pháp lý ở nhiều nơi.
Business — site accessible rank SEO tốt hơn, reach rộng hơn.
UX — closed captions giúp cả người xem không tiếng ồn; good contrast giúp mọi người dưới nắng

#20ARIA là gì?

Cơ Bản

ARIA (Accessible Rich Internet Applications) là tập hợp attributes bổ sung accessibility cho HTML khi semantic không đủ. 3 loại:

Roles — xác định vai trò (role="button", role="dialog").
States — trạng thái (aria-expanded="true", aria-disabled).
Properties — thuộc tính (aria-label, aria-describedby)

Nguyên tắc: dùng native HTML trước, ARIA là giải pháp cuối cùng.

#21Alt text quan trọng thế nào?

Cơ Bản

Alt text mô tả hình ảnh cho screen readers và hiện khi ảnh không load được. 3 trường hợp: ảnh mang thông tin — mô tả ngắn gọn nội dung/mục đích (không bắt đầu bằng 'Hình ảnh của...'); ảnh là link — mô tả đích đến; ảnh decorative thuần túy — alt="" để screen reader bỏ qua.

Quan trọng cho SEO: Google Images index dựa vào alt text.
Lỗi phổ biến: alt="image123.jpg" (filename), alt="logo" quá chung chung, hoặc bỏ qua alt hoàn toàn.

#22Thuộc tính id và class khác nhau như thế nào?

Trung Bình

id phải duy nhất trên toàn trang, chỉ gán cho 1 element duy nhất — dùng cho anchor links (#section) và getElementById(). class dùng lại được, nhiều element chia sẻ cùng class, 1 element có thể có nhiều class.

CSS specificity: id (0,1,0,0) cao hơn class (0,0,1,0), nên tránh dùng id để style vì khó override.
Trong React, dùng htmlFor thay for và className thay class.

#23<mark>, <strong>, <em> khác nhau thế nào?

Trung Bình

<mark> highlight text có liên quan đến context hiện tại — ví dụ kết quả tìm kiếm (nền vàng mặc định). <strong> biểu thị tầm quan trọng cao (in đậm) — screen readers có thể đọc mạnh hơn. <em> nhấn mạnh ngữ điệu như nói chuyện (in nghiêng).

Cả ba có ý nghĩa ngữ nghĩa.
Ngược lại, <b> và <i> chỉ là visual styling không có semantic meaning.

Ví dụ đúng: <strong>Cảnh báo:</strong> không tắt máy khi đang cập nhật.

#24Thẻ <time> được sử dụng để làm gì?

Trung Bình

Đánh dấu ngày/giờ theo format machine-readable giúp search engines và screen readers hiểu đúng.

Attribute datetime chứa giá trị ISO 8601: <time datetime="2024-03-15T09:00">Thứ Sáu, 15/3/2024</time>.
Quan trọng cho SEO (Google hiểu publication date), calendar events, và tính 'thời gian trước' (3 giờ trước).
Nếu không có datetime, nội dung text bên trong phải là ngày hợp lệ.
Dùng trong blog posts, events, changelogs.

#25Semantic HTML ảnh hưởng SEO như thế nào?

Trung Bình

Semantic HTML giúp search engine crawlers hiểu cấu trúc và nội dung trang chính xác hơn. <article> đánh dấu nội dung chính, <h1> là keyword chính, <nav> thể hiện cấu trúc site.

Google dùng structured data từ semantic markup cho rich snippets.
Ngoài ra, <img alt="..."> đóng góp vào image search.
Trang semantic thường có bounce rate thấp hơn vì UX tốt hơn — Google tính đây là quality signal.
Kết hợp semantic HTML với Schema.org JSON-LD cho kết quả tốt nhất.

#26Khi nào dùng <dl>, <dt>, <dd>?

Trung Bình

Description list dùng cho cặp thuật ngữ-định nghĩa hoặc key-value pairs. <dl> bọc toàn bộ, <dt> (term) là thuật ngữ, <dd> (description) là giải thích.

Một <dt> có thể có nhiều <dd>.
Phù hợp nhất cho: FAQ (câu hỏi là dt, câu trả lời là dd), glossary, metadata (Tác giả: ..., Ngày: ..., Thể loại: ...).
Lỗi hay gặp: dùng <ul> + <li> cho danh sách key-value vì tiện hơn, nhưng <dl> semantic và accessible hơn.

#27Thẻ <details> và <summary> hoạt động thế nào?

Trung Bình

<details> tạo widget accordion/disclosure native không cần JS. <summary> là tiêu đề luôn hiển thị, click vào toggle nội dung bên trong. Thêm attribute open để mặc định mở. Trình duyệt tự thêm mũi tên toggle, style bằng details > summary { list-style: none } để xóa.

Ứng dụng thực tế: FAQ sections, spoiler tags, filter panels. Hữu ích khi muốn accordion đơn giản mà không import thư viện JS. CSS details[open] để style khi đang mở.

#28Progressive Web App (PWA) là gì?

Trung Bình

Ứng dụng web có trải nghiệm gần native app: offline, installable, push notifications.

Yêu cầu: HTTPS, Service Worker, Web App Manifest.
Dùng manifest.json khai báo icon, theme, start_url.

#29HTML5 form validation có những attribute nào?

Trung Bình

required (bắt buộc), pattern (regex), min/max (số/ngày), minlength/maxlength (chuỗi), step (bước nhảy).

Input type email/url tự validate format.
Dùng :valid/:invalid CSS pseudo-classes.

#30readonly và disabled khác nhau thế nào?

Trung Bình

readonly: user không thể chỉnh sửa nhưng vẫn focus, copy, và giá trị vẫn được submit cùng form. disabled: không tương tác được, không focusable, giá trị KHÔNG submit (bị loại khỏi form data). Visual: disabled làm mờ element, readonly giữ nguyên appearance. Dùng readonly khi muốn hiển thị giá trị nhưng vẫn cần submit (số tham chiếu tự động). Dùng disabled khi field không áp dụng và không cần gửi lên server.

Lưu ý: readonly chỉ hoạt động với input/textarea, không với select.

#31Enctype attribute có những giá trị nào?

Trung Bình

application/x-www-form-urlencoded (mặc định, encode key=value). multipart/form-data (bắt buộc khi upload file). text/plain (không encode, dùng cho debug).

Upload file phải dùng multipart.

#32Autocomplete attribute hoạt động thế nào?

Trung Bình

Gợi ý trình duyệt tự điền form.
Values: on/off, hoặc cụ thể: name, email, tel, address-line1, cc-number.
Cải thiện UX, giảm nhập liệu.
Có thể set trên form hoặc từng input.

#33Constraint Validation API là gì?

Trung Bình

API JavaScript kiểm tra và tùy chỉnh form validation.

Methods: checkValidity(), reportValidity(), setCustomValidity()
Properties: validity.valueMissing, validity.typeMismatch
Override message lỗi mặc định của browser.

#34FormData API dùng để làm gì?

Trung Bình

Thu thập dữ liệu form dạng key-value pairs. new FormData(formElement) tự động lấy tất cả fields.

Hỗ trợ file upload.
Dùng với fetch() để submit form bằng JavaScript.
Methods: append(), get(), entries().

#35WCAG là gì? Có bao nhiêu cấp độ?

Trung Bình

Web Content Accessibility Guidelines - tiêu chuẩn quốc tế về accessibility. 3 cấp: A (cơ bản), AA (khuyến nghị, yêu cầu pháp lý), AAA (cao nhất). 4 nguyên tắc: Perceivable, Operable, Understandable, Robust.

#36aria-label, aria-labelledby, aria-describedby khác nhau?

Trung Bình

aria-label gán label trực tiếp bằng string — dùng khi không có visible label. aria-labelledby reference đến id của element chứa label (có thể reference nhiều id cách nhau bởi space: aria-labelledby="title desc"). aria-describedby thêm mô tả bổ sung (hint text, error message). Thứ tự ưu tiên: aria-labelledby override aria-label. aria-describedby là thông tin phụ, đọc sau label.

Ví dụ kết hợp: <input aria-labelledby="field-label" aria-describedby="field-hint"> — screen reader sẽ đọc cả label lẫn hint.

#37Keyboard navigation quan trọng thế nào?

Trung Bình

Hàng triệu users chỉ dùng keyboard: người khuyết tật vận động, người dùng screen readers, power users.

Mọi interactive element phải focusable và operable bằng keyboard.
Phím chuẩn: Tab/Shift+Tab navigate, Enter/Space activate buttons, Escape đóng modals, mũi tên trong widget (menu, slider).
Focus indicator (outline) phải luôn hiển thị — đừng outline: none mà không có alternative.
Test nhanh: unplug chuột và thử dùng toàn bộ tính năng chỉ bằng keyboard.

#38tabindex attribute hoạt động thế nào?

Trung Bình

tabindex="0": thêm element vào tab order tự nhiên. tabindex="-1": focusable bằng JS nhưng không tab được. tabindex > 0: đặt thứ tự ưu tiên (tránh dùng, gây confuse).

Mặc định: links, buttons, inputs đã focusable.

#39Color contrast yêu cầu gì theo WCAG?

Trung Bình

WCAG AA (tiêu chuẩn khuyến nghị): text thường cần tỷ lệ contrast tối thiểu 4.5:1, text lớn (18px+ hoặc 14px+ bold) cần 3:1. WCAG AAA: 7:1 và 4.5:1. Contrast ratio tính giữa màu text và màu nền.

Ví dụ: chữ xám nhạt #999 trên nền trắng chỉ đạt ~2.85:1 — fail AA. Tools kiểm tra: Lighthouse DevTools, WebAIM Contrast Checker, axe DevTools extension.

Lưu ý: không dùng màu là cách duy nhất truyền thông tin (ví dụ: chỉ dùng màu đỏ/xanh cho lỗi/thành công).

#40History API dùng để làm gì?

Nâng Cao

#41WebSocket khác HTTP thế nào?

Nâng Cao

HTTP hoạt động theo mô hình request-response, nghĩa là client phải gửi yêu cầu trước thì server mới trả về dữ liệu, và mỗi request tạo một connection mới. WebSocket ngược lại, sau khi handshake ban đầu qua HTTP và upgrade lên giao thức WebSocket, nó duy trì một persistent connection full-duplex — cả client và server đều có thể gửi dữ liệu bất cứ lúc nào mà không cần chờ request.

WebSocket phù hợp cho các ứng dụng cần real-time như chat, live notifications, collaborative editing, multiplayer games, và live data feeds (giá cổ phiếu, sports scores).

#42Intersection Observer API là gì?

Nâng Cao

#43MutationObserver là gì?

Nâng Cao

#44Web Components gồm những công nghệ nào?

Nâng Cao

#45<input type='file'> có những tính năng gì?

Nâng Cao

#46Làm thế nào để tạo custom form validation?

Nâng Cao

#47Làm sao tối ưu form cho mobile?

Nâng Cao

#48aria-live dùng khi nào?

Nâng Cao

#49Skip links là gì và tại sao cần?

Nâng Cao

Skip link là <a> ẩn ở đầu trang, hiện ra khi nhận focus bằng Tab đầu tiên, cho phép nhảy thẳng đến #main-content.

Giúp keyboard/screen reader users không phải tab qua toàn bộ navigation (có thể 30+ links) ở mỗi trang.
Implement: <a class="skip-link" href="#main">Bỏ qua navigation</a> + CSS .skip-link { position: absolute; top: -40px } .skip-link:focus { top: 0 }.
WCAG 2.4.1 yêu cầu bypass mechanism.
Test: nhấn Tab ngay sau khi load trang, link phải hiện ra.

#50Focus management trong SPA quan trọng thế nào?

Nâng Cao

Khi route thay đổi trong SPA, focus phải chuyển đến nội dung mới (thường là <h1> hoặc <main>). Không có page reload tự nhiên nên screen readers không nhận biết nội dung đã đổi.

Các approach: React Router/Next.js dùng useEffect + ref.focus() trên heading sau khi navigation; Next.js App Router tự quản lý một phần nhưng nên kiểm tra lại. Lỗi phổ biến: focus container div thay vì heading bên trong — screen reader cần heading để announce trang mới. Kết hợp aria-live region để announce page title change.

#51Heading hierarchy (h1-h6) tại sao quan trọng?

Nâng Cao

Screen reader users dùng shortcut để nhảy qua headings (phím H trong NVDA/JAWS) — heading là cách chính để navigate page.

Thứ tự phải liên tục (h1 → h2 → h3), không được nhảy cấp (h1 → h3).
Mỗi page nên có đúng 1 <h1> là tiêu đề chính.
Google coi heading hierarchy là SEO signal.
Lỗi phổ biến: dùng <h3> vì thích cỡ chữ — hãy dùng CSS để style kích thước, không dùng heading sai cấp. <h1> không cần là element đầu tiên nhìn thấy nhưng phải là quan trọng nhất về nội dung.

#1DOCTYPE là gì? Tại sao cần khai báo DOCTYPE?

Cơ Bản

DOCTYPE (Document Type Declaration) khai báo phiên bản HTML đang sử dụng, đặt ở dòng đầu tiên.

HTML5 chỉ cần <!DOCTYPE html>.
Giúp trình duyệt render đúng chuẩn (standards mode).
Không có DOCTYPE → quirks mode: box model, CSS parsing khác nhau giữa các browsers, gây lỗi hiển thị.

#2Cấu trúc cơ bản của một tài liệu HTML bao gồm những gì?

Cơ Bản

Cấu trúc cơ bản của tài liệu HTML bao gồm các phần chính sau:

<!DOCTYPE html>: Khai báo loại tài liệu cho trình duyệt
<html>: Phần tử gốc (root element) bọc toàn bộ trang
<head>: Chứa siêu dữ liệu (metadata) như <title>, <meta>, <link>, <style>
<body>: Chứa toàn bộ nội dung sẽ hiển thị trên trang web.

#3Element block và element inline khác nhau như thế nào?

Cơ Bản

Block element chiếm toàn bộ chiều rộng, bắt đầu dòng mới (<div>, <p>, <h1>).

Inline element chỉ chiếm chiều rộng cần thiết (<span>, <a>, <strong>).
Block chứa được inline, nhưng thường không ngược lại.
Ngoại lệ HTML5: <a> có thể bọc block elements.

#4Attribute là gì? Cho ví dụ?

Cơ Bản

Attribute cung cấp thông tin bổ sung cho HTML element, viết trong thẻ mở theo cú pháp name="value".

Lưu ý: attribute name không phân biệt hoa thường nhưng giá trị thì có.

#5Boolean attribute là gì? Cho ví dụ?

Cơ Bản

#6Custom attribute (data-*) là gì?

Cơ Bản

Cho phép lưu trữ dữ liệu tùy chỉnh trên HTML element mà không vi phạm HTML spec.

Cú pháp: data-user-id="123".
Truy cập qua JS bằng element.dataset.userId (tự convert kebab-case sang camelCase). Ứng dụng: truyền data từ HTML sang JS, CSS selectors ([data-active]), testing (data-testid).
React dùng data attributes để pass info cho DOM.

#7Semantic HTML là gì? Tại sao quan trọng?

Cơ Bản

Semantic HTML dùng thẻ có ý nghĩa mô tả nội dung (<article>, <nav>, <header>, <main>, <aside>) thay vì thẻ chung (<div>, <span>).

Quan trọng vì:

SEO — search engines hiểu cấu trúc trang tốt hơn.
Accessibility — screen readers navigate bằng semantic landmarks.
Maintainability — code tự mô tả, đọc hiểu nhanh hơn.
Consistency — team dùng cùng conventions

#8Sự khác biệt giữa <div> và <section> là gì?

Cơ Bản

Screen readers nhận diện <section> là landmark region.

Ví dụ thực tế: một trang product dùng <section> cho phần mô tả, reviews, specs — không dùng <div> cho các khối nội dung có ý nghĩa riêng biệt.

#9<article> và <section> khác nhau thế nào?

Cơ Bản

Test nhanh: nếu có thể syndicate nội dung đó ra site khác mà vẫn hiểu được → dùng <article>.
Article thường có <header>, <footer>, byline riêng.
Article có thể chứa nhiều <section> và <section> có thể chứa nhiều <article>.

#10<header>, <footer>, <nav>, <main>, <aside> dùng khi nào?

Cơ Bản

Lưu ý: <header> và <footer> không nhất thiết chỉ dùng ở top/bottom trang — mỗi <article> cũng có thể có header riêng.

#11<figure> và <figcaption> dùng để làm gì?

Cơ Bản

#12HTML5 có những tính năng mới nào so với HTML4?

Cơ Bản

HTML5 mang đến nhiều cải tiến lớn so với HTML4 trên 3 nhóm chính:

Semantic & Media: thẻ semantic (<header>, <nav>, <article>, <section>), <audio>/<video> native không cần Flash, Canvas/SVG cho đồ họa.

Storage & APIs: Web Storage (localStorage, sessionStorage), IndexedDB cho dữ liệu lớn, Geolocation API, Web Workers, WebSocket, Drag & Drop.

Forms: form validation tích hợp, các input types mới (email, date, number, range, color).

#13Canvas và SVG khác nhau thế nào?

Cơ Bản

Canvas là pixel-based (raster), vẽ bằng JavaScript, tốt cho game/animation phức tạp.

SVG là vector-based (XML), scale không mất chất lượng, tốt cho icon/chart/logo.
SVG accessible hơn vì là DOM elements.

#14Method GET và POST khác nhau thế nào?

Cơ Bản

GET gửi dữ liệu qua URL (query string), giới hạn kích thước, có thể bookmark. POST gửi trong body request, không giới hạn kích thước.

Lưu ý: POST không tự bảo mật hơn GET — cần HTTPS để bảo vệ dữ liệu. GET cho truy vấn, POST cho dữ liệu lớn/thay đổi state.

#15Các input types trong HTML5 có những gì?

Cơ Bản

HTML5 cung cấp nhiều input types với validation và UI riêng theo nhóm:

Text/Data: text, password, email, number, tel, url, search.

Date/Time: date, time, datetime-local, month, week.

Interactive/Media: color, range, file, checkbox, radio, hidden, submit, reset, button.

#16<label> element quan trọng thế nào?

Cơ Bản

<label> liên kết mô tả với form control theo 2 cách: dùng for khớp với id của input (<label for="email">Email</label><input id="email">), hoặc wrapping trực tiếp.

Click vào label = focus/check input — tăng click area đáng kể trên mobile.
Screen readers đọc label khi user focus vào input.
Lỗi phổ biến: chỉ dùng placeholder thay label — placeholder biến mất khi gõ, không accessible.
Placeholder nên là gợi ý, không phải label.

#17<select> và <datalist> khác nhau thế nào?

Cơ Bản

Ví dụ datalist: ô tìm kiếm gợi ý nhưng cho phép search từ khóa mới.

#18<fieldset> và <legend> dùng để làm gì?

Cơ Bản

<fieldset> nhóm các form controls có liên quan nhau, tạo border visual và semantic grouping. <legend> là tiêu đề mô tả cho nhóm đó.

Đặc biệt quan trọng cho nhóm radio/checkbox: screen readers đọc legend trước mỗi option (ví dụ: 'Giới tính: Nam / Nữ').
Có thể dùng disabled trên <fieldset> để disable toàn bộ group inputs bên trong. Ứng dụng: form đăng ký nhiều section (Thông tin cá nhân, Địa chỉ, Thanh toán).

#19Accessibility (a11y) là gì? Tại sao quan trọng?

Cơ Bản

Quan trọng vì:

Đạo đức — ~15% dân số thế giới có dạng khuyết tật nào đó.
Luật pháp — ADA (Mỹ), WCAG 2.1 AA là yêu cầu pháp lý ở nhiều nơi.
Business — site accessible rank SEO tốt hơn, reach rộng hơn.
UX — closed captions giúp cả người xem không tiếng ồn; good contrast giúp mọi người dưới nắng

#20ARIA là gì?

Cơ Bản

ARIA (Accessible Rich Internet Applications) là tập hợp attributes bổ sung accessibility cho HTML khi semantic không đủ. 3 loại:

Roles — xác định vai trò (role="button", role="dialog").
States — trạng thái (aria-expanded="true", aria-disabled).
Properties — thuộc tính (aria-label, aria-describedby)

Nguyên tắc: dùng native HTML trước, ARIA là giải pháp cuối cùng.

#21Alt text quan trọng thế nào?

Cơ Bản

Quan trọng cho SEO: Google Images index dựa vào alt text.
Lỗi phổ biến: alt="image123.jpg" (filename), alt="logo" quá chung chung, hoặc bỏ qua alt hoàn toàn.

#22Thuộc tính id và class khác nhau như thế nào?

Trung Bình

CSS specificity: id (0,1,0,0) cao hơn class (0,0,1,0), nên tránh dùng id để style vì khó override.
Trong React, dùng htmlFor thay for và className thay class.

#23<mark>, <strong>, <em> khác nhau thế nào?

Trung Bình

Cả ba có ý nghĩa ngữ nghĩa.
Ngược lại, <b> và <i> chỉ là visual styling không có semantic meaning.

Ví dụ đúng: <strong>Cảnh báo:</strong> không tắt máy khi đang cập nhật.

#24Thẻ <time> được sử dụng để làm gì?

Trung Bình

Đánh dấu ngày/giờ theo format machine-readable giúp search engines và screen readers hiểu đúng.

Attribute datetime chứa giá trị ISO 8601: <time datetime="2024-03-15T09:00">Thứ Sáu, 15/3/2024</time>.
Quan trọng cho SEO (Google hiểu publication date), calendar events, và tính 'thời gian trước' (3 giờ trước).
Nếu không có datetime, nội dung text bên trong phải là ngày hợp lệ.
Dùng trong blog posts, events, changelogs.

#25Semantic HTML ảnh hưởng SEO như thế nào?

Trung Bình

Google dùng structured data từ semantic markup cho rich snippets.
Ngoài ra, <img alt="..."> đóng góp vào image search.
Trang semantic thường có bounce rate thấp hơn vì UX tốt hơn — Google tính đây là quality signal.
Kết hợp semantic HTML với Schema.org JSON-LD cho kết quả tốt nhất.

#26Khi nào dùng <dl>, <dt>, <dd>?

Trung Bình

Description list dùng cho cặp thuật ngữ-định nghĩa hoặc key-value pairs. <dl> bọc toàn bộ, <dt> (term) là thuật ngữ, <dd> (description) là giải thích.

Một <dt> có thể có nhiều <dd>.
Phù hợp nhất cho: FAQ (câu hỏi là dt, câu trả lời là dd), glossary, metadata (Tác giả: ..., Ngày: ..., Thể loại: ...).
Lỗi hay gặp: dùng <ul> + <li> cho danh sách key-value vì tiện hơn, nhưng <dl> semantic và accessible hơn.

#27Thẻ <details> và <summary> hoạt động thế nào?

Trung Bình

Ứng dụng thực tế: FAQ sections, spoiler tags, filter panels. Hữu ích khi muốn accordion đơn giản mà không import thư viện JS. CSS details[open] để style khi đang mở.

#28Progressive Web App (PWA) là gì?

Trung Bình

Ứng dụng web có trải nghiệm gần native app: offline, installable, push notifications.

Yêu cầu: HTTPS, Service Worker, Web App Manifest.
Dùng manifest.json khai báo icon, theme, start_url.

#29HTML5 form validation có những attribute nào?

Trung Bình

required (bắt buộc), pattern (regex), min/max (số/ngày), minlength/maxlength (chuỗi), step (bước nhảy).

Input type email/url tự validate format.
Dùng :valid/:invalid CSS pseudo-classes.

#30readonly và disabled khác nhau thế nào?

Trung Bình

Lưu ý: readonly chỉ hoạt động với input/textarea, không với select.

#31Enctype attribute có những giá trị nào?

Trung Bình

application/x-www-form-urlencoded (mặc định, encode key=value). multipart/form-data (bắt buộc khi upload file). text/plain (không encode, dùng cho debug).

Upload file phải dùng multipart.

#32Autocomplete attribute hoạt động thế nào?

Trung Bình

Gợi ý trình duyệt tự điền form.
Values: on/off, hoặc cụ thể: name, email, tel, address-line1, cc-number.
Cải thiện UX, giảm nhập liệu.
Có thể set trên form hoặc từng input.

#33Constraint Validation API là gì?

Trung Bình

API JavaScript kiểm tra và tùy chỉnh form validation.

Methods: checkValidity(), reportValidity(), setCustomValidity()
Properties: validity.valueMissing, validity.typeMismatch
Override message lỗi mặc định của browser.

#34FormData API dùng để làm gì?

Trung Bình

Thu thập dữ liệu form dạng key-value pairs. new FormData(formElement) tự động lấy tất cả fields.

Hỗ trợ file upload.
Dùng với fetch() để submit form bằng JavaScript.
Methods: append(), get(), entries().

#35WCAG là gì? Có bao nhiêu cấp độ?

Trung Bình

#36aria-label, aria-labelledby, aria-describedby khác nhau?

Trung Bình

Ví dụ kết hợp: <input aria-labelledby="field-label" aria-describedby="field-hint"> — screen reader sẽ đọc cả label lẫn hint.

#37Keyboard navigation quan trọng thế nào?

Trung Bình

Hàng triệu users chỉ dùng keyboard: người khuyết tật vận động, người dùng screen readers, power users.

Mọi interactive element phải focusable và operable bằng keyboard.
Phím chuẩn: Tab/Shift+Tab navigate, Enter/Space activate buttons, Escape đóng modals, mũi tên trong widget (menu, slider).
Focus indicator (outline) phải luôn hiển thị — đừng outline: none mà không có alternative.
Test nhanh: unplug chuột và thử dùng toàn bộ tính năng chỉ bằng keyboard.

#38tabindex attribute hoạt động thế nào?

Trung Bình

tabindex="0": thêm element vào tab order tự nhiên. tabindex="-1": focusable bằng JS nhưng không tab được. tabindex > 0: đặt thứ tự ưu tiên (tránh dùng, gây confuse).

Mặc định: links, buttons, inputs đã focusable.

#39Color contrast yêu cầu gì theo WCAG?

Trung Bình

Ví dụ: chữ xám nhạt #999 trên nền trắng chỉ đạt ~2.85:1 — fail AA. Tools kiểm tra: Lighthouse DevTools, WebAIM Contrast Checker, axe DevTools extension.

Lưu ý: không dùng màu là cách duy nhất truyền thông tin (ví dụ: chỉ dùng màu đỏ/xanh cho lỗi/thành công).

#40History API dùng để làm gì?

Nâng Cao

#41WebSocket khác HTTP thế nào?

Nâng Cao

WebSocket phù hợp cho các ứng dụng cần real-time như chat, live notifications, collaborative editing, multiplayer games, và live data feeds (giá cổ phiếu, sports scores).

#42Intersection Observer API là gì?

Nâng Cao

#43MutationObserver là gì?

Nâng Cao

#44Web Components gồm những công nghệ nào?

Nâng Cao

#45<input type='file'> có những tính năng gì?

Nâng Cao

#46Làm thế nào để tạo custom form validation?

Nâng Cao

#47Làm sao tối ưu form cho mobile?

Nâng Cao

#48aria-live dùng khi nào?

Nâng Cao

#49Skip links là gì và tại sao cần?

Nâng Cao

Skip link là <a> ẩn ở đầu trang, hiện ra khi nhận focus bằng Tab đầu tiên, cho phép nhảy thẳng đến #main-content.

Giúp keyboard/screen reader users không phải tab qua toàn bộ navigation (có thể 30+ links) ở mỗi trang.
Implement: <a class="skip-link" href="#main">Bỏ qua navigation</a> + CSS .skip-link { position: absolute; top: -40px } .skip-link:focus { top: 0 }.
WCAG 2.4.1 yêu cầu bypass mechanism.
Test: nhấn Tab ngay sau khi load trang, link phải hiện ra.

#50Focus management trong SPA quan trọng thế nào?

Nâng Cao

#51Heading hierarchy (h1-h6) tại sao quan trọng?

Nâng Cao

Screen reader users dùng shortcut để nhảy qua headings (phím H trong NVDA/JAWS) — heading là cách chính để navigate page.

Thứ tự phải liên tục (h1 → h2 → h3), không được nhảy cấp (h1 → h3).
Mỗi page nên có đúng 1 <h1> là tiêu đề chính.
Google coi heading hierarchy là SEO signal.
Lỗi phổ biến: dùng <h3> vì thích cỡ chữ — hãy dùng CSS để style kích thước, không dùng heading sai cấp. <h1> không cần là element đầu tiên nhìn thấy nhưng phải là quan trọng nhất về nội dung.

Luyện Phỏng Vấn IT — 2000+ Câu Hỏi Phỏng Vấn IT Có Đáp Án 2026

HTML

Luyện Phỏng Vấn IT — 2000+ Câu Hỏi Phỏng Vấn IT Có Đáp Án 2026

HTML