, <meta>, <link>, <style>\n<body>: Chứa toàn bộ nội dung sẽ hiển thị trên trang web.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-3","number":3,"title":"Element block và element inline khác nhau như thế nào?","answer":"Block element chiếm toàn bộ chiều rộng, bắt đầu dòng mới (<div>, <p>, <h1>).\n\nInline element chỉ chiếm chiều rộng cần thiết (<span>, <a>, <strong>).\nBlock chứa được inline, nhưng thường không ngược lại.\nNgoại lệ HTML5: <a> có thể bọc block elements.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-4","number":4,"title":"Attribute là gì? Cho ví dụ?","answer":"Attribute cung cấp thông tin bổ sung cho HTML element, viết trong thẻ mở theo cú pháp name=\"value\".\n\nVí 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.\n\nLưu ý: attribute name không phân biệt hoa thường nhưng giá trị thì có.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-5","number":5,"title":"Boolean attribute là gì? Cho ví dụ?","answer":"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.\n\nCá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ị.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-6","number":6,"title":"Custom attribute (data-*) là gì?","answer":"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.\n\nCú pháp: data-user-id=\"123\".\nTruy 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).\nReact dùng data attributes để pass info cho DOM.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-7","number":7,"title":"Semantic HTML là gì? Tại sao quan trọng?","answer":"Semantic HTML dùng thẻ có ý nghĩa mô tả nội dung (<article>, <nav>, <header>, <main>, <aside>) thay vì thẻ chung (<div>, <span>).\n\nQuan trọng vì:\n\nSEO — search engines hiểu cấu trúc trang tốt hơn.\nAccessibility — screen readers navigate bằng semantic landmarks.\nMaintainability — code tự mô tả, đọc hiểu nhanh hơn.\nConsistency — team dùng cùng conventions","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-8","number":8,"title":"Sự khác biệt giữa <div> và <section> là gì?","answer":"<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.\n\nScreen readers nhận diện <section> là landmark region.\n\nVí 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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-9","number":9,"title":"<article> và <section> khác nhau thế nào?","answer":"<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.\n\nTest nhanh: nếu có thể syndicate nội dung đó ra site khác mà vẫn hiểu được → dùng <article>.\nArticle thường có <header>, <footer>, byline riêng.\nArticle có thể chứa nhiều <section> và <section> có thể chứa nhiều <article>.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-10","number":10,"title":"<header>, <footer>, <nav>, <main>, <aside> dùng khi nào?","answer":"<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).\n\nLư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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-11","number":11,"title":"<figure> và <figcaption> dùng để làm gì?","answer":"<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>.\n\nVí 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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-12","number":12,"title":"HTML5 có những tính năng mới nào so với HTML4?","answer":"HTML5 mang đến nhiều cải tiến lớn so với HTML4 trên 3 nhóm chính:\n\nSemantic & Media: thẻ semantic (<header>, <nav>, <article>, <section>), <audio>/<video> native không cần Flash, Canvas/SVG cho đồ họa.\n\nStorage & APIs: Web Storage (localStorage, sessionStorage), IndexedDB cho dữ liệu lớn, Geolocation API, Web Workers, WebSocket, Drag & Drop.\n\nForms: form validation tích hợp, các input types mới (email, date, number, range, color).","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-13","number":13,"title":"Canvas và SVG khác nhau thế nào?","answer":"Canvas là pixel-based (raster), vẽ bằng JavaScript, tốt cho game/animation phức tạp.\n\nSVG là vector-based (XML), scale không mất chất lượng, tốt cho icon/chart/logo.\nSVG accessible hơn vì là DOM elements.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-14","number":14,"title":"Method GET và POST khác nhau thế nào?","answer":"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.\n\nLư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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-15","number":15,"title":"Các input types trong HTML5 có những gì?","answer":"HTML5 cung cấp nhiều input types với validation và UI riêng theo nhóm:\n\nText/Data: text, password, email, number, tel, url, search.\n\nDate/Time: date, time, datetime-local, month, week.\n\nInteractive/Media: color, range, file, checkbox, radio, hidden, submit, reset, button.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-16","number":16,"title":"<label> element quan trọng thế nào?","answer":"<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.\n\nClick vào label = focus/check input — tăng click area đáng kể trên mobile.\nScreen readers đọc label khi user focus vào input.\nLỗi phổ biến: chỉ dùng placeholder thay label — placeholder biến mất khi gõ, không accessible.\nPlaceholder nên là gợi ý, không phải label.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-17","number":17,"title":"<select> và <datalist> khác nhau thế nào?","answer":"<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 ý.\n\nVí dụ datalist: ô tìm kiếm gợi ý nhưng cho phép search từ khóa mới.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-18","number":18,"title":"<fieldset> và <legend> dùng để làm gì?","answer":"<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 đó.\n\nĐặ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ữ').\nCó 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).","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-19","number":19,"title":"Accessibility (a11y) là gì? Tại sao quan trọng?","answer":"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).\n\nQuan trọng vì:\n\nĐạo đức — ~15% dân số thế giới có dạng khuyết tật nào đó.\nLuật pháp — ADA (Mỹ), WCAG 2.1 AA là yêu cầu pháp lý ở nhiều nơi.\nBusiness — site accessible rank SEO tốt hơn, reach rộng hơn.\nUX — 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","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-20","number":20,"title":"ARIA là gì?","answer":"ARIA (Accessible Rich Internet Applications) là tập hợp attributes bổ sung accessibility cho HTML khi semantic không đủ. 3 loại:\n\nRoles — xác định vai trò (role=\"button\", role=\"dialog\").\nStates — trạng thái (aria-expanded=\"true\", aria-disabled).\nProperties — thuộc tính (aria-label, aria-describedby)\n\nNguyên tắc: dùng native HTML trước, ARIA là giải pháp cuối cùng.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-21","number":21,"title":"Alt text quan trọng thế nào?","answer":"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.\n\nQuan trọng cho SEO: Google Images index dựa vào alt text.\nLỗi phổ biến: alt=\"image123.jpg\" (filename), alt=\"logo\" quá chung chung, hoặc bỏ qua alt hoàn toàn.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-22","number":22,"title":"Thuộc tính id và class khác nhau như thế nào?","answer":"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.\n\nCSS 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.\nTrong React, dùng htmlFor thay for và className thay class.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-23","number":23,"title":"<mark>, <strong>, <em> khác nhau thế nào?","answer":"<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).\n\nCả ba có ý nghĩa ngữ nghĩa.\nNgược lại, <b> và <i> chỉ là visual styling không có semantic meaning.\n\nVí dụ đúng: <strong>Cảnh báo:</strong> không tắt máy khi đang cập nhật.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-24","number":24,"title":"Thẻ <time> được sử dụng để làm gì?","answer":"Đánh dấu ngày/giờ theo format machine-readable giúp search engines và screen readers hiểu đúng.\n\nAttribute datetime chứa giá trị ISO 8601: <time datetime=\"2024-03-15T09:00\">Thứ Sáu, 15/3/2024</time>.\nQuan trọng cho SEO (Google hiểu publication date), calendar events, và tính 'thời gian trước' (3 giờ trước).\nNếu không có datetime, nội dung text bên trong phải là ngày hợp lệ.\nDùng trong blog posts, events, changelogs.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-25","number":25,"title":"Semantic HTML ảnh hưởng SEO như thế nào?","answer":"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.\n\nGoogle dùng structured data từ semantic markup cho rich snippets.\nNgoài ra, <img alt=\"...\"> đóng góp vào image search.\nTrang semantic thường có bounce rate thấp hơn vì UX tốt hơn — Google tính đây là quality signal.\nKết hợp semantic HTML với Schema.org JSON-LD cho kết quả tốt nhất.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-26","number":26,"title":"Khi nào dùng <dl>, <dt>, <dd>?","answer":"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.\n\nMột <dt> có thể có nhiều <dd>.\nPhù 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: ...).\nLỗ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.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-27","number":27,"title":"Thẻ <details> và <summary> hoạt động thế nào?","answer":"<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.\n\nỨ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ở.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-28","number":28,"title":"Progressive Web App (PWA) là gì?","answer":"Ứng dụng web có trải nghiệm gần native app: offline, installable, push notifications.\n\nYêu cầu: HTTPS, Service Worker, Web App Manifest.\nDùng manifest.json khai báo icon, theme, start_url.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-29","number":29,"title":"HTML5 form validation có những attribute nào?","answer":"required (bắt buộc), pattern (regex), min/max (số/ngày), minlength/maxlength (chuỗi), step (bước nhảy).\n\nInput type email/url tự validate format.\nDùng :valid/:invalid CSS pseudo-classes.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-30","number":30,"title":"readonly và disabled khác nhau thế nào?","answer":"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.\n\nLưu ý: readonly chỉ hoạt động với input/textarea, không với select.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-31","number":31,"title":"Enctype attribute có những giá trị nào?","answer":"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).\n\nUpload file phải dùng multipart.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-32","number":32,"title":"Autocomplete attribute hoạt động thế nào?","answer":"Gợi ý trình duyệt tự điền form.\nValues: on/off, hoặc cụ thể: name, email, tel, address-line1, cc-number.\nCải thiện UX, giảm nhập liệu.\nCó thể set trên form hoặc từng input.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-33","number":33,"title":"Constraint Validation API là gì?","answer":"API JavaScript kiểm tra và tùy chỉnh form validation.\n\nMethods: checkValidity(), reportValidity(), setCustomValidity()\nProperties: validity.valueMissing, validity.typeMismatch\nOverride message lỗi mặc định của browser.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-34","number":34,"title":"FormData API dùng để làm gì?","answer":"Thu thập dữ liệu form dạng key-value pairs. new FormData(formElement) tự động lấy tất cả fields.\n\nHỗ trợ file upload.\nDùng với fetch() để submit form bằng JavaScript.\nMethods: append(), get(), entries().","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-35","number":35,"title":"WCAG là gì? Có bao nhiêu cấp độ?","answer":"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.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-36","number":36,"title":"aria-label, aria-labelledby, aria-describedby khác nhau?","answer":"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.\n\nVí dụ kết hợp: <input aria-labelledby=\"field-label\" aria-describedby=\"field-hint\"> — screen reader sẽ đọc cả label lẫn hint.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-37","number":37,"title":"Keyboard navigation quan trọng thế nào?","answer":"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.\n\nMọi interactive element phải focusable và operable bằng keyboard.\nPhím chuẩn: Tab/Shift+Tab navigate, Enter/Space activate buttons, Escape đóng modals, mũi tên trong widget (menu, slider).\nFocus indicator (outline) phải luôn hiển thị — đừng outline: none mà không có alternative.\nTest nhanh: unplug chuột và thử dùng toàn bộ tính năng chỉ bằng keyboard.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-38","number":38,"title":"tabindex attribute hoạt động thế nào?","answer":"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).\n\nMặc định: links, buttons, inputs đã focusable.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-39","number":39,"title":"Color contrast yêu cầu gì theo WCAG?","answer":"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.\n\nVí 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.\n\nLư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).","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-40","number":40,"title":"History API dùng để làm gì?","answer":"Cho phép thao tác browser history mà không reload trang. pushState() thêm entry mới, replaceState() thay entry hiện tại, popstate event lắng nghe back/forward.\n\nNền tảng cho SPA routing.","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-41","number":41,"title":"WebSocket khác HTTP thế nào?","answer":"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.\n\nWebSocket 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).","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-42","number":42,"title":"Intersection Observer API là gì?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-43","number":43,"title":"Web Components gồm những công nghệ nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-44","number":44,"title":"<input type='file'> có những tính năng gì?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-45","number":45,"title":"Làm thế nào để tạo custom form validation?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-46","number":46,"title":"Làm sao tối ưu form cho mobile?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-47","number":47,"title":"aria-live dùng khi nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-48","number":48,"title":"Skip links là gì và tại sao cần?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-49","number":49,"title":"Focus management trong SPA quan trọng thế nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-50","number":50,"title":"Heading hierarchy (h1-h6) tại sao quan trọng?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"}]}]}]]}] </article></body></html>

5:["$","div",null,{"className":"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10","children":[["$","$L10",null,{"href":"/","className":"inline-flex items-center gap-2 text-sm text-slate-500 hover:text-white transition-colors mb-8 group","children":[["$","svg",null,{"className":"w-4 h-4 group-hover:-translate-x-0.5 transition-transform","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":2,"d":"M15 19l-7-7 7-7"}]}],"Trang chủ"]}],["$","div",null,{"className":"mb-8","children":[["$","div",null,{"className":"flex items-start gap-4 mb-4","children":[["$","div",null,{"className":"text-4xl sm:text-5xl leading-none","children":"🌐"}],["$","div",null,{"className":"flex-1 min-w-0","children":[["$","h1",null,{"className":"text-2xl sm:text-3xl font-bold text-white mb-2","children":"HTML"}],["$","div",null,{"className":"flex flex-wrap items-center gap-2 sm:gap-4 text-sm","children":[["$","span",null,{"className":"text-slate-400","children":[["$","span",null,{"className":"text-white font-semibold","children":50}]," câu hỏi"]}],["$","span",null,{"className":"hidden sm:block text-slate-600","children":"·"}],["$","span",null,{"className":"flex items-center gap-1.5","children":[["$","span",null,{"className":"w-2 h-2 rounded-full bg-emerald-400"}],["$","span",null,{"className":"text-emerald-400","children":[21," Cơ Bản"]}]]}],["$","span",null,{"className":"hidden sm:block text-slate-600","children":"·"}],["$","span",null,{"className":"flex items-center gap-1.5","children":[["$","span",null,{"className":"w-2 h-2 rounded-full bg-amber-400"}],["$","span",null,{"className":"text-amber-400","children":[11," Nâng Cao"]}]]}]]}]]}]]}],["$","$L10",null,{"href":"/interview?categories=html","className":"inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors","children":[["$","svg",null,{"className":"w-4 h-4","fill":"none","viewBox":"0 0 24 24","stroke":"currentColor","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":2,"d":"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"}]}],"Luyện tập chủ đề này"]}]]}],["$","$7",null,{"fallback":["$","div",null,{"className":"text-slate-500 text-sm","children":"Đang tải..."}],"children":["$","$L11",null,{"questions":[{"id":"html-1","number":1,"title":"DOCTYPE là gì? Tại sao cần khai báo DOCTYPE?","answer":"DOCTYPE (Document Type Declaration) khai báo phiên bản HTML đang sử dụng, đặt ở dòng đầu tiên.\n\nHTML5 chỉ cần .\nGiúp trình duyệt render đúng chuẩn (standards mode).\nKhông có DOCTYPE → quirks mode: box model, CSS parsing khác nhau giữa các browsers, gây lỗi hiển thị.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-2","number":2,"title":"Cấu trúc cơ bản của một tài liệu HTML bao gồm những gì?","answer":"Cấu trúc cơ bản của tài liệu HTML bao gồm các phần chính sau:\n\n: Khai báo loại tài liệu cho trình duyệt\n: Phần tử gốc (root element) bọc toàn bộ trang\n: Chứa siêu dữ liệu (metadata) như , <meta>, <link>, <style>\n<body>: Chứa toàn bộ nội dung sẽ hiển thị trên trang web.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-3","number":3,"title":"Element block và element inline khác nhau như thế nào?","answer":"Block element chiếm toàn bộ chiều rộng, bắt đầu dòng mới (<div>, <p>, <h1>).\n\nInline element chỉ chiếm chiều rộng cần thiết (<span>, <a>, <strong>).\nBlock chứa được inline, nhưng thường không ngược lại.\nNgoại lệ HTML5: <a> có thể bọc block elements.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-4","number":4,"title":"Attribute là gì? Cho ví dụ?","answer":"Attribute cung cấp thông tin bổ sung cho HTML element, viết trong thẻ mở theo cú pháp name=\"value\".\n\nVí 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.\n\nLưu ý: attribute name không phân biệt hoa thường nhưng giá trị thì có.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-5","number":5,"title":"Boolean attribute là gì? Cho ví dụ?","answer":"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.\n\nCá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ị.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-6","number":6,"title":"Custom attribute (data-*) là gì?","answer":"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.\n\nCú pháp: data-user-id=\"123\".\nTruy 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).\nReact dùng data attributes để pass info cho DOM.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-7","number":7,"title":"Semantic HTML là gì? Tại sao quan trọng?","answer":"Semantic HTML dùng thẻ có ý nghĩa mô tả nội dung (<article>, <nav>, <header>, <main>, <aside>) thay vì thẻ chung (<div>, <span>).\n\nQuan trọng vì:\n\nSEO — search engines hiểu cấu trúc trang tốt hơn.\nAccessibility — screen readers navigate bằng semantic landmarks.\nMaintainability — code tự mô tả, đọc hiểu nhanh hơn.\nConsistency — team dùng cùng conventions","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-8","number":8,"title":"Sự khác biệt giữa <div> và <section> là gì?","answer":"<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.\n\nScreen readers nhận diện <section> là landmark region.\n\nVí 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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-9","number":9,"title":"<article> và <section> khác nhau thế nào?","answer":"<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.\n\nTest nhanh: nếu có thể syndicate nội dung đó ra site khác mà vẫn hiểu được → dùng <article>.\nArticle thường có <header>, <footer>, byline riêng.\nArticle có thể chứa nhiều <section> và <section> có thể chứa nhiều <article>.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-10","number":10,"title":"<header>, <footer>, <nav>, <main>, <aside> dùng khi nào?","answer":"<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).\n\nLư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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-11","number":11,"title":"<figure> và <figcaption> dùng để làm gì?","answer":"<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>.\n\nVí 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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-12","number":12,"title":"HTML5 có những tính năng mới nào so với HTML4?","answer":"HTML5 mang đến nhiều cải tiến lớn so với HTML4 trên 3 nhóm chính:\n\nSemantic & Media: thẻ semantic (<header>, <nav>, <article>, <section>), <audio>/<video> native không cần Flash, Canvas/SVG cho đồ họa.\n\nStorage & APIs: Web Storage (localStorage, sessionStorage), IndexedDB cho dữ liệu lớn, Geolocation API, Web Workers, WebSocket, Drag & Drop.\n\nForms: form validation tích hợp, các input types mới (email, date, number, range, color).","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-13","number":13,"title":"Canvas và SVG khác nhau thế nào?","answer":"Canvas là pixel-based (raster), vẽ bằng JavaScript, tốt cho game/animation phức tạp.\n\nSVG là vector-based (XML), scale không mất chất lượng, tốt cho icon/chart/logo.\nSVG accessible hơn vì là DOM elements.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-14","number":14,"title":"Method GET và POST khác nhau thế nào?","answer":"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.\n\nLư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.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-15","number":15,"title":"Các input types trong HTML5 có những gì?","answer":"HTML5 cung cấp nhiều input types với validation và UI riêng theo nhóm:\n\nText/Data: text, password, email, number, tel, url, search.\n\nDate/Time: date, time, datetime-local, month, week.\n\nInteractive/Media: color, range, file, checkbox, radio, hidden, submit, reset, button.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-16","number":16,"title":"<label> element quan trọng thế nào?","answer":"<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.\n\nClick vào label = focus/check input — tăng click area đáng kể trên mobile.\nScreen readers đọc label khi user focus vào input.\nLỗi phổ biến: chỉ dùng placeholder thay label — placeholder biến mất khi gõ, không accessible.\nPlaceholder nên là gợi ý, không phải label.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-17","number":17,"title":"<select> và <datalist> khác nhau thế nào?","answer":"<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 ý.\n\nVí dụ datalist: ô tìm kiếm gợi ý nhưng cho phép search từ khóa mới.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-18","number":18,"title":"<fieldset> và <legend> dùng để làm gì?","answer":"<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 đó.\n\nĐặ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ữ').\nCó 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).","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-19","number":19,"title":"Accessibility (a11y) là gì? Tại sao quan trọng?","answer":"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).\n\nQuan trọng vì:\n\nĐạo đức — ~15% dân số thế giới có dạng khuyết tật nào đó.\nLuật pháp — ADA (Mỹ), WCAG 2.1 AA là yêu cầu pháp lý ở nhiều nơi.\nBusiness — site accessible rank SEO tốt hơn, reach rộng hơn.\nUX — 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","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-20","number":20,"title":"ARIA là gì?","answer":"ARIA (Accessible Rich Internet Applications) là tập hợp attributes bổ sung accessibility cho HTML khi semantic không đủ. 3 loại:\n\nRoles — xác định vai trò (role=\"button\", role=\"dialog\").\nStates — trạng thái (aria-expanded=\"true\", aria-disabled).\nProperties — thuộc tính (aria-label, aria-describedby)\n\nNguyên tắc: dùng native HTML trước, ARIA là giải pháp cuối cùng.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-21","number":21,"title":"Alt text quan trọng thế nào?","answer":"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.\n\nQuan trọng cho SEO: Google Images index dựa vào alt text.\nLỗi phổ biến: alt=\"image123.jpg\" (filename), alt=\"logo\" quá chung chung, hoặc bỏ qua alt hoàn toàn.","difficulty":"Cơ Bản","category":"html","categoryName":"HTML"},{"id":"html-22","number":22,"title":"Thuộc tính id và class khác nhau như thế nào?","answer":"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.\n\nCSS 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.\nTrong React, dùng htmlFor thay for và className thay class.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-23","number":23,"title":"<mark>, <strong>, <em> khác nhau thế nào?","answer":"<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).\n\nCả ba có ý nghĩa ngữ nghĩa.\nNgược lại, <b> và <i> chỉ là visual styling không có semantic meaning.\n\nVí dụ đúng: <strong>Cảnh báo:</strong> không tắt máy khi đang cập nhật.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-24","number":24,"title":"Thẻ <time> được sử dụng để làm gì?","answer":"Đánh dấu ngày/giờ theo format machine-readable giúp search engines và screen readers hiểu đúng.\n\nAttribute datetime chứa giá trị ISO 8601: <time datetime=\"2024-03-15T09:00\">Thứ Sáu, 15/3/2024</time>.\nQuan trọng cho SEO (Google hiểu publication date), calendar events, và tính 'thời gian trước' (3 giờ trước).\nNếu không có datetime, nội dung text bên trong phải là ngày hợp lệ.\nDùng trong blog posts, events, changelogs.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-25","number":25,"title":"Semantic HTML ảnh hưởng SEO như thế nào?","answer":"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.\n\nGoogle dùng structured data từ semantic markup cho rich snippets.\nNgoài ra, <img alt=\"...\"> đóng góp vào image search.\nTrang semantic thường có bounce rate thấp hơn vì UX tốt hơn — Google tính đây là quality signal.\nKết hợp semantic HTML với Schema.org JSON-LD cho kết quả tốt nhất.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-26","number":26,"title":"Khi nào dùng <dl>, <dt>, <dd>?","answer":"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.\n\nMột <dt> có thể có nhiều <dd>.\nPhù 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: ...).\nLỗ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.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-27","number":27,"title":"Thẻ <details> và <summary> hoạt động thế nào?","answer":"<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.\n\nỨ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ở.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-28","number":28,"title":"Progressive Web App (PWA) là gì?","answer":"Ứng dụng web có trải nghiệm gần native app: offline, installable, push notifications.\n\nYêu cầu: HTTPS, Service Worker, Web App Manifest.\nDùng manifest.json khai báo icon, theme, start_url.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-29","number":29,"title":"HTML5 form validation có những attribute nào?","answer":"required (bắt buộc), pattern (regex), min/max (số/ngày), minlength/maxlength (chuỗi), step (bước nhảy).\n\nInput type email/url tự validate format.\nDùng :valid/:invalid CSS pseudo-classes.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-30","number":30,"title":"readonly và disabled khác nhau thế nào?","answer":"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.\n\nLưu ý: readonly chỉ hoạt động với input/textarea, không với select.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-31","number":31,"title":"Enctype attribute có những giá trị nào?","answer":"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).\n\nUpload file phải dùng multipart.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-32","number":32,"title":"Autocomplete attribute hoạt động thế nào?","answer":"Gợi ý trình duyệt tự điền form.\nValues: on/off, hoặc cụ thể: name, email, tel, address-line1, cc-number.\nCải thiện UX, giảm nhập liệu.\nCó thể set trên form hoặc từng input.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-33","number":33,"title":"Constraint Validation API là gì?","answer":"API JavaScript kiểm tra và tùy chỉnh form validation.\n\nMethods: checkValidity(), reportValidity(), setCustomValidity()\nProperties: validity.valueMissing, validity.typeMismatch\nOverride message lỗi mặc định của browser.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-34","number":34,"title":"FormData API dùng để làm gì?","answer":"Thu thập dữ liệu form dạng key-value pairs. new FormData(formElement) tự động lấy tất cả fields.\n\nHỗ trợ file upload.\nDùng với fetch() để submit form bằng JavaScript.\nMethods: append(), get(), entries().","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-35","number":35,"title":"WCAG là gì? Có bao nhiêu cấp độ?","answer":"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.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-36","number":36,"title":"aria-label, aria-labelledby, aria-describedby khác nhau?","answer":"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.\n\nVí dụ kết hợp: <input aria-labelledby=\"field-label\" aria-describedby=\"field-hint\"> — screen reader sẽ đọc cả label lẫn hint.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-37","number":37,"title":"Keyboard navigation quan trọng thế nào?","answer":"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.\n\nMọi interactive element phải focusable và operable bằng keyboard.\nPhím chuẩn: Tab/Shift+Tab navigate, Enter/Space activate buttons, Escape đóng modals, mũi tên trong widget (menu, slider).\nFocus indicator (outline) phải luôn hiển thị — đừng outline: none mà không có alternative.\nTest nhanh: unplug chuột và thử dùng toàn bộ tính năng chỉ bằng keyboard.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-38","number":38,"title":"tabindex attribute hoạt động thế nào?","answer":"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).\n\nMặc định: links, buttons, inputs đã focusable.","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-39","number":39,"title":"Color contrast yêu cầu gì theo WCAG?","answer":"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.\n\nVí 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.\n\nLư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).","difficulty":"Trung Bình","category":"html","categoryName":"HTML"},{"id":"html-40","number":40,"title":"History API dùng để làm gì?","answer":"Cho phép thao tác browser history mà không reload trang. pushState() thêm entry mới, replaceState() thay entry hiện tại, popstate event lắng nghe back/forward.\n\nNền tảng cho SPA routing.","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-41","number":41,"title":"WebSocket khác HTTP thế nào?","answer":"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.\n\nWebSocket 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).","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-42","number":42,"title":"Intersection Observer API là gì?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-43","number":43,"title":"Web Components gồm những công nghệ nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-44","number":44,"title":"<input type='file'> có những tính năng gì?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-45","number":45,"title":"Làm thế nào để tạo custom form validation?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-46","number":46,"title":"Làm sao tối ưu form cho mobile?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-47","number":47,"title":"aria-live dùng khi nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-48","number":48,"title":"Skip links là gì và tại sao cần?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-49","number":49,"title":"Focus management trong SPA quan trọng thế nào?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"},{"id":"html-50","number":50,"title":"Heading hierarchy (h1-h6) tại sao quan trọng?","answer":"Đăng nhập để xem đáp án\nĐăng nhập","difficulty":"Nâng Cao","category":"html","categoryName":"HTML"}]}]}]]}] </article></body></html>