Chọn heading, danh sách và vùng nội dung theo ý nghĩa; hiểu strong, em, code, div, span; thực hành DOM, vai trò và liên kết chuyển focus bằng bàn phím.
Một trang hướng dẫn nội bộ dùng chữ đậm thật lớn cho mọi tiêu đề, xuống dòng bằng nhiều thẻ br và đánh số bước bằng văn bản tự gõ. Người nhìn thấy có thể đoán được bố cục, nhưng khi cần duyệt danh sách heading hoặc thay đổi cách trình bày, cấu trúc đó không còn rõ. Ngữ nghĩa HTML giúp mô tả nội dung để cả người đọc và công cụ có cơ sở xử lý.
Bài thuộc 032.2, khung PDF 030-100-vi, trang in 65–105, tương ứng trang vật lý 73–113. Nội dung và trang lab được viết mới cho tình huống Help Desk giả lập. Bạn cần biết skeleton HTML, thuộc tính và encoding từ bài trước. Sau bài, bạn nên chọn heading, danh sách, vùng nội dung và phần tử văn bản theo ý nghĩa, rồi kiểm tra chúng trong trình duyệt.
Nguồn được đối chiếu ngày 23/10/2026. Lab dùng Chromium 151.0.7922.34 trên loopback trong context riêng. Bài kiểm tra DOM, vai trò do trình duyệt cung cấp và một thao tác bàn phím; chưa phải đánh giá đầy đủ bằng công nghệ hỗ trợ hoặc xác nhận tuân thủ WCAG.
HTML có h1 đến h6, tương ứng các mức heading. W3C WAI hướng dẫn tổ chức heading theo quan hệ nội dung. Một cách dễ theo dõi cho trang lab là một h1 mô tả chủ đề trang, các h2 chia phần lớn và h3 chia tiếp khi cần. Không cần dùng đủ sáu mức.
Khi mở một nhánh nhỏ hơn, chọn mức phù hợp thay vì nhảy từ h1 sang h4 để lấy cỡ chữ mong muốn. Khi đóng một nhánh, quay từ h3 về h2 có thể hoàn toàn hợp lý. Điều quyết định là dàn ý, không phải quy tắc mỗi heading phải tăng đúng một số so với heading ngay trước.
Đừng thay heading bằng div in đậm. Ngược lại, đừng chọn h1 chỉ để làm một nhãn lớn. Khi nội dung cần đổi kích thước, CSS đảm nhiệm việc đó. Một section được lồng thêm cũng không phải lý do để bỏ qua việc lựa chọn mức heading rõ ràng.
p biểu diễn một đoạn văn. Khi hai ý có vai trò riêng, tách thành hai paragraph thường rõ hơn chèn nhiều br. Phần tử br dùng cho ngắt dòng có ý nghĩa trong nội dung, chẳng hạn địa chỉ; không dùng như công cụ tạo khoảng cách bố cục.
hr biểu thị một chuyển chủ đề, không chỉ một đường trang trí. Nếu chỉ cần đường viền, chọn CSS theo bài trình bày. Các phần tử nhóm nội dung trong HTML có quy tắc chứa nội dung; browser tự đóng một paragraph khi gặp phần tử không phù hợp có thể khiến DOM khác điều bạn nghĩ đã viết.
Khi một trang trông bất thường, xem cây Elements trước khi chồng thêm margin. Lỗi lồng phần tử không thể được giải quyết triệt để chỉ bằng kiểu chữ hoặc khoảng cách. Giữ ví dụ nhỏ và thay một điều kiện sẽ giúp tìm nguyên nhân nhanh hơn.
Dùng ol khi thứ tự quan trọng, như các bước tiếp nhận yêu cầu. Dùng ul khi liệt kê những thông tin cần có mà thứ tự không quyết định ý nghĩa. Các mục thông thường nằm trong li; một danh sách con nên nằm trong li liên quan, không đặt như người anh em tùy tiện của mục đó.
ol có thể dùng start, reversed hoặc type khi ý nghĩa đánh số đòi hỏi. start="3" vẫn dùng số nguyên dù kiểu đánh số là chữ. Đừng gõ số trực tiếp vào từng dòng nếu bạn muốn một danh sách có cấu trúc; số gõ tay dễ lệch sau khi chèn hoặc xóa bước.
dl nhóm tên hoặc thuật ngữ với phần mô tả qua dt và dd. Ví dụ “Mã yêu cầu” đi với “Định danh DEMO để tra cứu”. Có thể có nhóm nhiều tên hoặc mô tả theo quy tắc; không suy rằng mọi phần tử đều được làm con trực tiếp tùy ý. Khi dùng div để nhóm các cặp trong dl, vẫn phải giữ cấu trúc tên và mô tả hợp lệ.
Ngữ nghĩa văn bản trong HTML phân biệt strong cho tính quan trọng và em cho nhấn giọng. Kiểu mặc định thường đậm hoặc nghiêng, nhưng lựa chọn phải dựa trên ý nghĩa. Trong cảnh báo giả lập, “không gửi mật khẩu” có tính quan trọng; bạn có thể nhấn một từ khi muốn thay trọng tâm của câu.
b hướng sự chú ý tới đoạn văn bản mà không thêm cùng ý nghĩa quan trọng của strong; i có thể đánh dấu giọng hoặc thuật ngữ khác với văn bản xung quanh. u dành cho một dạng chú giải không diễn đạt bằng lời. Chúng không phải ba tên CSS cũ có thể hoán đổi với strong hoặc em trong mọi trường hợp.
Tránh gạch chân văn bản thông thường theo cách khiến người đọc tưởng là liên kết. Khi chỉ muốn thay giao diện mà không đổi ý nghĩa, dùng CSS. Cũng không cam kết mọi trình đọc màn hình sẽ đổi giọng giống nhau cho strong và em; hành vi còn phụ thuộc công cụ cùng thiết lập.
code chỉ một đoạn mã máy tính; nó không tự thực thi nội dung. pre giữ cách trình bày khoảng trắng theo kiểu mặc định, thường kết hợp với code cho nhiều dòng. Đừng dùng thẻ tt đã lỗi thời chỉ để lấy font monospace. Nếu đoạn mã chứa <, phải escape để tránh bị hiểu thành markup.
blockquote dùng cho một khối nội dung được trích dẫn từ nguồn khác, không phải công cụ thụt lề. Trong lab, lời nhắn trích dẫn được ghi rõ là dữ liệu giả, không phải lời khách hàng thật. Khi trích nguồn có thật, người đọc cần thấy thông tin nguồn phù hợp; một thuộc tính máy đọc không thay phần dẫn nguồn cần thiết.
div và span là vùng chứa chung khi chưa có phần tử mang ý nghĩa phù hợp. Div thường được hiển thị dạng block, span thường là inline. Thuộc tính CSS display có thể thay cách tạo hộp; đổi display không biến paragraph thành heading hoặc div thành danh sách ngữ nghĩa.
Cách nói “block và inline” trong tài liệu cũ thường mô tả kiểu hiển thị mặc định. Khi xét HTML hợp lệ, cần xem content model của phần tử. Một span được đặt display:block không tự được phép chứa mọi loại nội dung mà trước đó không hợp lệ.
W3C WAI mô tả các vùng trang để hỗ trợ nhận diện và điều hướng. main chứa nội dung chính; trong trang thông thường, duy trì một main đang hiển thị. Không thêm main quanh mỗi đoạn chỉ vì nó quan trọng.
header giới thiệu trang hoặc khu vực mà nó thuộc về; footer chứa thông tin liên quan ở cuối về mặt tổ chức nội dung. Vai trò của chúng phụ thuộc ngữ cảnh, không phải mọi header trong article đều trở thành banner của toàn website. nav dành cho các nhóm điều hướng chính, không bắt buộc bọc mọi liên kết đơn lẻ.
Đặc tả các phần tử sectioning phân biệt section như một nhóm theo chủ đề và article như nội dung có thể đứng độc lập trong ngữ cảnh phù hợp. Section thường cần heading để nhận diện. Không thay mọi div bằng section chỉ để “thêm SEO”.
aside chứa nội dung liên quan gián tiếp, như ghi chú bổ sung. Nó không bắt buộc phải nằm bên phải màn hình; vị trí là lựa chọn trình bày. Một bài hướng dẫn có thể nằm trong article, gồm các section và có phần ghi chú phụ mà vẫn giữ thứ tự đọc hợp lý.
Lưu semantic.html bằng UTF-8. Ví dụ cố tình có một div chữ lớn để so với heading thật; nó không phải tiêu đề phần:
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ngữ nghĩa HTML | Lab LPI</title>
</head>
<body>
<a href="#content">Tới nội dung chính</a>
<header><p>Cổng hỗ trợ DEMO</p></header>
<nav aria-label="Trong bài"><a href="#steps">Các bước</a></nav>
<main id="content" tabindex="-1">
<h1>Tiếp nhận yêu cầu DEMO</h1>
<p><strong>Không gửi mật khẩu.</strong> Chỉ dùng thông tin giả.</p>
<section aria-labelledby="info">
<h2 id="info">Thông tin cần có</h2>
<ul><li>Mã thiết bị DEMO</li><li>Triệu chứng quan sát</li></ul>
</section>
<section aria-labelledby="steps">
<h2 id="steps">Thứ tự xử lý</h2>
<ol>
<li>Ghi triệu chứng.</li>
<li>Thu bằng chứng.
<ul><li>Thời điểm DEMO</li><li>Thông báo DEMO</li></ul>
</li>
<li>Xác nhận kết quả trong phạm vi đã thử.</li>
</ol>
<blockquote><p>Thiết bị DEMO không hiện trong danh sách.</p></blockquote>
<p>Lời nhắn giả lập, do bài học tự biên soạn.</p>
<pre><code>case: DEMO
status: open</code></pre>
</section>
<section aria-labelledby="terms">
<h2 id="terms">Thuật ngữ</h2>
<dl><div><dt>Mã yêu cầu</dt><dd>Định danh DEMO để tra cứu.</dd></div></dl>
<p>Chú ý <em>kết quả quan sát</em>, tách khỏi giả thuyết.</p>
</section>
<div id="visual" style="font-size:2em;font-weight:bold">Chỉ là ví dụ kiểu chữ</div>
</main>
<aside><p>Ghi chú DEMO: chưa thao tác lên thiết bị thật.</p></aside>
<footer><p>Tài liệu thực hành LPI, 23/10/2026.</p></footer>
</body>
</html>
Mở trang qua server lab loopback. Liệt kê heading trong công cụ phát triển và kiểm tra quan hệ h1 với ba h2. Xem ul con có nằm trong li thứ hai của ol, dt/dd có đúng nhóm và code có giữ hai dòng. Không gõ lệnh trong khối code vào máy công việc: đây chỉ là dữ liệu DEMO.
Bấm Tab từ đầu trang tới “Tới nội dung chính”, rồi Enter. Mong đợi focus chuyển tới main có id="content". Sau đó thay display của h1 thành inline trong công cụ phát triển: cách tạo hộp đổi nhưng h1 vẫn là heading cấp 1. Div chữ lớn vẫn không trở thành heading.
Trên Chromium 151.0.7922.34, lab tự động kiểm tra một main, một navigation, một heading cấp 1 và ba heading cấp 2, cùng danh sách lồng và cặp dt/dd. Khối pre/code giữ hai dòng; Tab rồi Enter đưa focus tới main. Đổi display của h1 thành inline vẫn được nhận diện là heading, còn div mẫu không được nhận diện như heading.
Đó là kiểm tra có giới hạn theo DOM, mô hình vai trò của trình duyệt và bàn phím trong fixture. Chưa chạy validator HTML đầy đủ, trình đọc màn hình, mọi thiết bị hoặc bộ tiêu chí WCAG. Cần đánh giá thêm trước khi công bố một website có khả năng tiếp cận toàn diện.
Nếu skip link không chuyển đúng, kiểm tra href, id và nơi nhận focus. Nếu dàn ý khó hiểu, sửa quan hệ heading trước khi chỉnh font. Bạn đạt bài khi giải thích được lý do chọn ol thay vì ul, section thay vì div ở một vị trí và ý nghĩa của strong so với chữ đậm trang trí.
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.