Tạo tài liệu HTML tiếng Việt; hiểu doctype, head, body, title, metadata và UTF-8; thử ba biến thể trong trình duyệt để nhận diện lỗi cấu trúc, thuộc tính.
Một trang hướng dẫn lưu dòng “Tiếng Việt: máy in đã sẵn sàng.” Người viết mở bằng trình duyệt và thấy ký tự méo, dù editor vẫn hiển thị đúng. Thay font nhiều lần không sửa được nguyên nhân: byte trong tệp và cách trình duyệt giải mã có thể không khớp. Cấu trúc tài liệu HTML giúp khai báo rõ những điều đó trước khi thêm bố cục hay tương tác.
Bài thuộc 032.1, tham chiếu PDF 030-100-vi, trang in 50–64, tương ứng trang vật lý 58–72. Bạn cần biết tạo tệp văn bản và phân biệt URL với đường dẫn máy. Sau bài, bạn nên tạo một tài liệu hoàn chỉnh, giải thích tag, element, attribute, comment và kiểm tra title, ngôn ngữ, encoding trong trình duyệt.
Nội dung được viết độc lập, cập nhật nguồn ngày 23/10/2026. Lab kiểm chứng bằng Chromium 151.0.7922.34 trong context tạm, server chỉ nghe loopback và không dùng tài khoản thật. Các hình trong bài là minh họa khái niệm, không phải ảnh chụp kết quả.
HTML là ngôn ngữ đánh dấu. Bạn dùng phần tử để nói một đoạn là heading, paragraph, liên kết hoặc thành phần khác. CSS có thể đổi cách chúng trông như thế nào; JavaScript có thể thêm hành vi. Việc một chữ xuất hiện lớn chưa chứng minh nó là heading trong cấu trúc tài liệu.
Nguồn chuẩn hiện hành là HTML Living Standard của WHATWG, được duy trì liên tục. Không coi HTML là một phiên bản “5.0 phát hành năm 2012” đã đứng yên. Tên HTML5 vẫn có thể gặp trong tài liệu, nhưng khi tra quy tắc nên đối chiếu đặc tả và khả năng hỗ trợ cụ thể.
Giới thiệu cú pháp HTML của MDN giúp nhận diện cấu trúc cơ bản. Trình duyệt thường cố phục hồi khi mã có lỗi, vì vậy “mở được” chưa phải tiêu chí đủ cho tính hợp lệ hoặc khả năng tiếp cận. Bạn cần xem cả mã nguồn và cây DOM được tạo ra.
<!doctype html> là khai báo, không phải một phần tử có cặp thẻ. Quy tắc cú pháp HTML giải thích vị trí và hình thức của nó. Trong tài liệu thông thường của lab, khai báo giúp trình duyệt dùng chế độ tiêu chuẩn thay vì quirks mode mô phỏng một số hành vi cũ.
Phần tử html là gốc của tài liệu. head chứa metadata như title và khai báo encoding. body chứa nội dung chính để người đọc sử dụng. Đừng nhầm head với một banner đầu trang; banner nhìn thấy thuộc cấu trúc nội dung trong body.
Ở bài nhập môn, viết rõ các thẻ mở và đóng giúp dễ kiểm tra. HTML có quy tắc cho phép bỏ một số thẻ trong những điều kiện nhất định, nhưng điều đó không có nghĩa tài liệu chỉ cần một title là luôn hợp lệ. Trình phân tích có thể tự tạo phần tử còn thiếu; kết quả DOM khác với những gì bạn đã gõ.
Trong <p>Hướng dẫn DEMO</p>, <p> là thẻ mở, </p> là thẻ đóng, còn toàn bộ là một phần tử paragraph. Nội dung được đặt trong phần tử phù hợp và lồng đúng quy tắc. Thụt dòng giúp con người đọc nhưng không tự sửa việc lồng sai.
Một số phần tử là void elements, chẳng hạn meta, img và br. Chúng không có thẻ kết thúc và không chứa phần tử con. Trong HTML, dấu / cuối <meta ... /> không tạo cơ chế “tự đóng” như XML; không áp dụng suy luận đó cho <div />.
Khi cần hiện ký tự đặc biệt như dấu < trong văn bản, dùng character reference phù hợp, ví dụ <. Nếu đặt ký tự đó trực tiếp vào vị trí làm trình phân tích hiểu thành markup, trang có thể không hiển thị như dự định. Việc escape cũng phải theo ngữ cảnh khi nội dung được sinh từ dữ liệu.
Attribute thường nằm trong thẻ mở, ví dụ lang="vi" hoặc id="status". Dùng dấu nháy nhất quán giúp tránh lỗi khi giá trị có khoảng trắng. Không ghép dấu mở là nháy đơn và dấu đóng là nháy kép cho cùng một giá trị.
id cần duy nhất trong tài liệu, giúp định danh hoặc làm đích liên kết. class có thể chứa nhiều tên lớp để nhóm phần tử. data-* lưu dữ liệu tùy chỉnh cho mã client; giá trị trong đó không phải bí mật vì người đọc có thể kiểm tra tài liệu. style chứa CSS nội tuyến, không thay ý nghĩa của phần tử.
Thuộc tính boolean có quy tắc riêng: sự hiện diện biểu thị trạng thái true. Chẳng hạn disabled="false" vẫn làm một nút bị vô hiệu hóa. Chuỗi false không phải giá trị boolean hợp lệ trong cú pháp này; ví dụ dùng để nhận diện lỗi, không phải mẫu nên viết. Muốn trạng thái false, bỏ thuộc tính đó theo đúng ngữ cảnh; không suy mọi attribute đều được hiểu bằng chuỗi chữ “true” hoặc “false”.
Thuộc tính lang dùng language tag theo BCP 47. lang="vi" phù hợp với trang tiếng Việt; tag không bị giới hạn thành mã hai chữ trong mọi trường hợp. Một phần nội dung ngôn ngữ khác có thể cần khai báo riêng để công cụ hỗ trợ xử lý phù hợp.
Ngôn ngữ và encoding trả lời hai câu hỏi khác nhau. lang nói nội dung dùng ngôn ngữ nào; charset nói cách diễn giải byte thành ký tự. Đổi lang không sửa byte bị lưu sai, và khai báo UTF-8 không tự dịch nội dung sang tiếng Việt.
Người dùng trình đọc màn hình có thể hưởng lợi từ việc khai báo ngôn ngữ đúng. Tuy nhiên, bài này chỉ kiểm tra thuộc tính trong DOM, chưa thử một trình đọc màn hình hay công bố đạt toàn bộ WCAG. Một khai báo đúng là một phần của tài liệu có thể sử dụng được, không phải chứng nhận tổng thể.
title đặt tên cho tài liệu, thường được dùng trên tab hoặc lịch sử trình duyệt. Heading trong body mô tả nội dung tại chỗ. Chúng có thể liên quan nhưng không phải cùng một phần tử; thay h1 không tự đổi title.
Quy tắc meta trong HTML phân biệt khai báo encoding với metadata dùng name và content. Ví dụ, meta name="description" chứa mô tả tài liệu. Nó không hiện như một đoạn văn trong body và không thay nội dung hữu ích cho người đọc.
Google nêu rõ meta keywords không được dùng cho lập chỉ mục hoặc xếp hạng. Đừng nhồi từ khóa vào ví dụ để mong có thứ hạng. Title link trong tìm kiếm cũng có thể được Google tạo từ nhiều nguồn, nên không cam kết title sẽ luôn được hiển thị nguyên văn ngoài trình duyệt.
http-equiv chỉ có các giá trị và hành vi được hỗ trợ, không phải cách tạo tùy ý mọi HTTP header. Không dùng meta để đặt cookie theo hướng dẫn cũ. Meta refresh có thể gây chuyển trang hoặc làm mới, nhưng cần cân nhắc việc người đọc bị mất ngữ cảnh; lab này không tự điều hướng ra website ngoài.
Lưu tệp bằng UTF-8 và đặt <meta charset="utf-8"> sớm trong head. Đặc tả yêu cầu khai báo meta encoding nằm trọn trong 1024 byte đầu. Đặt nó sau một khối chú thích dài có thể làm mất điều kiện cần cho cách phát hiện encoding đó.
HTTP Content-Type có thể cung cấp charset; BOM và quy tắc phân tích cũng ảnh hưởng việc chọn encoding. Vì vậy, khi chữ sai, kiểm tra cách lưu file lẫn header phản hồi. Chỉ sửa một dòng meta chưa chắc có tác dụng nếu server đang khai báo khác hoặc byte đã bị chuyển đổi sai trước đó.
Viewport metadata giúp trình duyệt di động xử lý vùng hiển thị. Ví dụ dùng width=device-width, initial-scale=1; chưa có CSS responsive nên không nhận rằng thêm meta này đã hoàn thành bố cục mọi thiết bị. Tránh vô hiệu hóa khả năng zoom của người đọc.
Tạo index.html, lưu bằng UTF-8 trong thư mục lab riêng:
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Trang DEMO để kiểm tra cấu trúc HTML và tiếng Việt.">
<title>Kiểm tra HTML | Lab LPI</title>
</head>
<body>
<!-- Ghi chú DEMO công khai, không chứa bí mật. -->
<main>
<h1>Trang hỗ trợ DEMO</h1>
<p id="status" class="note" data-case="demo">Tiếng Việt: máy in đã sẵn sàng.</p>
<button type="button" id="continue">Tiếp tục</button>
</main>
</body>
</html>
Mở tệp trong trình duyệt hoặc phục vụ bằng server lab chỉ nghe 127.0.0.1. Chưa dùng server production. Quan sát title trên tab khác heading trong trang, câu tiếng Việt đúng và chú thích không xuất hiện như nội dung đọc. Sau đó mở công cụ phát triển và kiểm tra:
({
mode: document.compatMode,
charset: document.characterSet,
lang: document.documentElement.lang,
title: document.title,
status: document.querySelector('#status').textContent,
disabled: document.querySelector('#continue').disabled
})
Mong đợi CSS1Compat, UTF-8, vi, title như trong mã, câu tiếng Việt nguyên vẹn và disabled: false. Đối chiếu source với Elements để thấy head/body và nơi đặt metadata. Một phần tử có trong DOM chưa chứng minh tài liệu vượt qua mọi kiểm tra hợp chuẩn.
Thử ba biến thể riêng, giữ bản gốc để phục hồi. Bỏ doctype và quan sát chế độ; đổi charset thành windows-1252 trong khi vẫn lưu byte UTF-8; thêm disabled="false" vào nút. Với server thử không khai báo charset qua HTTP, kiểm chứng Chromium đã ghi nhận lần lượt BackCompat, giải mã không còn khớp câu gốc và nút vẫn disabled. Phục hồi bản đúng rồi kiểm tra lại.
Lab tự động phục vụ bản HTML đúng cùng ba biến thể trên loopback, dùng context Chromium mới và chặn request ngoài origin lab. Bản đúng đạt các trường vừa nêu; mỗi biến thể thể hiện khác biệt dự kiến. Không cài extension, thử mọi browser, chạy validator chuẩn hoặc trình đọc màn hình trong phép thử này.
Nếu title không đổi, kiểm tra tệp đã lưu và URL đang mở trước. Nếu chữ méo, ghi encoding quan sát được cùng header, không đổi font hàng loạt. Nếu nút vẫn vô hiệu, xem attribute thật trong DOM. Comment vẫn có thể được xem trong source; tuyệt đối không dùng comment để cất mật khẩu hoặc dữ liệu chưa công bố.
Bạn đạt mục tiêu khi giải thích được tag và element, head và heading, lang và charset bằng chính trang vừa tạo. Giữ bản đúng, ghi phiên bản cùng kết quả; bài tiếp theo sẽ tổ chức heading, danh sách và vùng nội dung theo ý nghĩa.
Chạy JavaScript trong HTML và Console; hiểu script, defer, async, module, comment và ASI; phân biệt lỗi tải, cú pháp và thực thi qua lab DEMO cục bộ.
Tính content-box và border-box, hiểu luồng, position, float, Flexbox và Grid; thực hành bố cục responsive, kiểm tra chuỗi dài, tràn ngang và focus bàn phím.
Chọn màu, alpha, nền và phông chữ CSS dễ đọc; phân biệt px, em, rem, phần trăm, viewport; kiểm chứng cỡ chữ, khoảng dòng và shorthand bằng lab cục bộ.
Đọc bộ chọn CSS theo phần tử, class, id và quan hệ; giải thích cascade, specificity, kế thừa, important và kiểm tra focus, hover trong lab có hoàn tác.