Semantic HTML là gì & vì sao cần

Ở các bài trước, mèo con dùng đúng thẻ cho từng nội dung: tiêu đề là h1, đoạn văn là p, ảnh là img. Đó chính là tinh thần semantic (ngữ nghĩa): chọn thẻ theo ý nghĩa của nội dung, không theo dáng vẻ.

Phản ví dụ kinh điển là "div soup" - một trang mà gần như mọi thứ đều là <div>. Trên màn hình trông vẫn ổn, nhưng với máy thì cả trang là một mớ hộp giống hệt nhau: đâu là menu, đâu là nội dung chính - không tài nào biết được.

• ▸Semantic HTML = chọn thẻ theo VAI TRÒ/ý nghĩa của nội dung.
• ▸"div soup" là trang toàn div vô nghĩa - máy không hiểu cấu trúc.
• ▸Mắt người vẫn đọc được div soup; nhưng máy (Google, screen reader) thì không.

HTML có sẵn một bộ thẻ đặt tên cho các vùng lớn của trang. Mỗi thẻ tự khai báo vai trò của mình:

• ▸<header>: phần đầu - logo, tựa đề, đôi khi chứa nav.
• ▸<nav>: khu vực điều hướng (menu chính).
• ▸<main>: nội dung CHÍNH của trang - mỗi trang chỉ một main.
• ▸<article>: một mẩu nội dung độc lập (bài viết, sản phẩm, bình luận).
• ▸<section>: một phần có chủ đề riêng bên trong trang/bài.
• ▸<aside>: nội dung phụ bên lề (tin liên quan, quảng cáo).
• ▸<footer>: phần chân trang - bản quyền, liên hệ.

<header>Logo Mèo Ham Học</header>
<nav>Trang chủ · Khoá học · Liên hệ</nav>
<main>
  <article>Nội dung chính của bài…</article>
  <aside>Bài liên quan…</aside>
</main>
<footer>© Mèo Ham Học</footer>

Hãy để ý: ngay cả khi chưa có một dòng CSS, chỉ đọc các thẻ là đã hình dung được bố cục trang. Bài kế sẽ ghép chúng thành một trang hoàn chỉnh.

Vậy có nên xoá sạch div? Không. Khi một khối nội dung không mang vai trò ngữ nghĩa nào - chỉ cần gom nhóm lại để CSS tạo kiểu hay JS xử lý - thì <div> (khối) và <span> (trong dòng) chính là công cụ đúng. Chúng "vô nghĩa" một cách có chủ ý.

<div class="the-gia">
  <span class="tien">39.000đ</span>
  <span class="giam">-10%</span>
</div>

Vì sao đáng công chọn đúng thẻ, khi trang div soup nhìn vẫn y hệt? Vì semantic mang lại bốn lợi ích mà mắt thường không thấy ngay - trong đó lợi ích cho SEO & metadata và cho a11y: web cho mọi người đều sẽ được mổ xẻ kỹ ở bài riêng:

• ▸SEO: Google hiểu đâu là nội dung chính, xếp hạng trang tốt hơn.
• ▸Accessibility: screen reader cho người khiếm thị nhảy thẳng theo các "landmark" (header, nav, main, footer) như mục lục.
• ▸CSS dễ nhắm: viết kiểu theo tên thẻ (main, article…), gọn và rõ hơn là bám vào hàng tá class.
• ▸Dễ đọc - dễ bảo trì: người sau (và chính mèo con vài tháng sau) nhìn code là hiểu bố cục.

Cả bốn lợi ích đều âm thầm: không chọn semantic thì trang không "hỏng", chỉ là kém hơn ở những chỗ không nhìn thấy. Chính vì hậu quả vô hình mà người mới hay xem nhẹ - và cũng vì thế mà đây là bài trung tâm của khoá.

Quay lại sợi chỉ xuyên suốt khoá: cấu trúc đúng trước, đẹp sau. Bài này thêm một tầng nghĩa: "cấu trúc đúng" không chỉ là lồng thẻ hợp lệ, mà còn là chọn thẻ đúng vai trò để máy hiểu được. Một trang semantic tốt là một trang vừa dễ làm đẹp bằng CSS, vừa thân thiện với Google và người khiếm thị.