Semantic HTML

Semantic HTML là gì?

Semantic HTML là cách viết mã HTML dùng các thẻ có ý nghĩa rõ ràng về chức năng và vai trò của nội dung — thay vì chỉ tập trung vào hình thức hiển thị. Ví dụ: thay vì dùng <div class="header"> hay <div class="menu">, ta dùng <header> và <nav>. Các thẻ như <article>, <section>, <aside>, <footer>, <main> đều thuộc nhóm thẻ ngữ nghĩa được W3C chuẩn hóa trong HTML5.

Tại sao quan trọng trong SEO?

Công cụ tìm kiếm như Google không chỉ đọc văn bản — chúng phân tích cấu trúc trang để hiểu bối cảnh, mức độ liên quan và mức độ tin cậy của nội dung. Khi bạn dùng thẻ ngữ nghĩa đúng, bạn đang gửi tín hiệu rõ ràng về:

• Vai trò từng khối nội dung (ví dụ: <article> chứa nội dung độc lập, có thể chia sẻ riêng);
• Mối quan hệ giữa các phần (ví dụ: <nav> nằm ngoài <main> → đây là điều hướng, không phải nội dung chính);
• Độ ưu tiên và trọng tâm (ví dụ: nội dung trong <main> thường được đánh giá cao hơn so với <aside>).

Theo tài liệu chính thức từ Google (2023), việc sử dụng thẻ ngữ nghĩa không trực tiếp là yếu tố xếp hạng, nhưng nó hỗ trợ quá trình lập chỉ mục và hiểu nội dung — từ đó ảnh hưởng gián tiếp đến khả năng hiển thị đúng cho từ khóa phù hợp. Ngoài ra, thẻ ngữ nghĩa còn cải thiện khả năng truy cập (accessibility), giúp người dùng dùng phần mềm đọc màn hình tiếp cận nội dung dễ dàng hơn — một yếu tố Google công khai coi trọng trong đánh giá trải nghiệm người dùng (UX).

Cách hoạt động

Khi Googlebot quét một trang, nó xây dựng cây DOM (Document Object Model) và phân tích các thẻ theo hai lớp:

1. Lớp cú pháp: Nhận diện tên thẻ (<header>, <article>…), thuộc tính (role, aria-label), và vị trí lồng ghép (ví dụ: <article> bên trong <main> → nội dung chính);
2. Lớp ngữ nghĩa: Gắn nhãn chức năng dựa trên tiêu chuẩn HTML5 — ví dụ: <time datetime="2024-04-15"> được hiểu là ngày xuất bản, không phải chuỗi ký tự thông thường.

Thẻ ngữ nghĩa giúp thuật toán phân biệt giữa “nội dung gốc” và “nội dung phụ”, từ đó xác định phần nào nên ưu tiên khi trích xuất đoạn mô tả (snippet), tạo rich result hoặc trả lời câu hỏi trong tìm kiếm bằng giọng nói.

Hướng dẫn thực hiện

Dưới đây là 5 bước áp dụng Semantic HTML hiệu quả cho On-Page SEO:

1. Thay thế <div> không cần thiết: Chỉ dùng <div> khi không có thẻ ngữ nghĩa nào phù hợp. Kiểm tra danh sách thẻ HTML5 tại WHATWG Sections để chọn đúng.
2. Dùng đúng cấu trúc bố cục: Một trang chuẩn nên có tối đa một <header> và một <footer> cấp trang; <nav> dành riêng cho menu điều hướng; <main> bao toàn bộ nội dung chính (không lặp lại trong các thành phần con).
3. Phân cấp <section> và <article> hợp lý: Dùng <section> khi nhóm nội dung cùng chủ đề (ví dụ: “Ưu điểm”, “Đánh giá”, “Hướng dẫn sử dụng”); dùng <article> khi nội dung có tính độc lập (bài blog, tin tức, sản phẩm).
4. Kết hợp với ARIA khi cần: Nếu thẻ ngữ nghĩa chưa đủ (ví dụ: tab điều khiển phức tạp), bổ sung role hoặc aria-labelledby — nhưng chỉ khi thật sự cần, vì thẻ chuẩn luôn ưu tiên hơn.
5. Kiểm tra bằng công cụ: Dùng trình kiểm tra cấu trúc (Google Rich Results Test, axe DevTools, hoặc Lighthouse) để xác nhận thẻ được nhận diện đúng — không bị thiếu, lồng sai hoặc trùng lặp.

Lỗi thường gặp

Dưới đây là những sai lầm phổ biến và cách sửa:

• Dùng <section> thay cho <div> chỉ để “đẹp mã nguồn”: <section> yêu cầu có tiêu đề (<h2>–<h6>) theo tiêu chuẩn WCAG. Nếu không có, hãy dùng <div> hoặc xem xét thẻ khác như <article>.
• Lồng <main> trong <article>: Sai cấu trúc — <main> phải là phần duy nhất ở cấp trang, không được lồng trong bất kỳ thẻ nào khác.
• Dùng nhiều <header> cho cùng một mục đích: Mỗi trang chỉ nên có một <header> đại diện cho tiêu đề trang. Các tiêu đề con trong bài viết dùng <h2>–<h6>, không dùng thêm <header>.
• Bỏ qua <time> và <address>: Đây là thẻ ngữ nghĩa ít được dùng nhưng rất hữu ích — <time> giúp Google xác định ngày xuất bản; <address> xác định thông tin liên hệ của tác giả/trang (không phải địa chỉ vật lý).

Ví dụ thực tế

Dưới đây là so sánh giữa mã HTML không ngữ nghĩa và mã chuẩn Semantic HTML cho một bài viết tin tức:

Mục đích	Không ngữ nghĩa	Ngữ nghĩa đúng
Khối tiêu đề trang	<div class="top-bar"><h1>Tin công nghệ</h1></div>	<header><h1>Tin công nghệ</h1></header>
Menu điều hướng	<div class="menu"><ul>...</ul></div>	<nav aria-label="Menu chính"><ul>...</ul></nav>
Nội dung bài viết	<div class="post"><p>Nội dung...</p></div>	<main><article><header><h2>AI mới ra mắt</h2><time datetime="2024-04-15">15/04/2024</time></header><p>Nội dung...</p></article></main>
Khối liên quan	<div class="sidebar"><h3>Bài viết liên quan</h3></div>	<aside aria-label="Bài viết liên quan"><h3>Bài viết liên quan</h3></aside>

Câu hỏi thường gặp

Thẻ ngữ nghĩa có thay đổi thứ hạng trực tiếp không?

Không. Theo tuyên bố chính thức từ Google (2022–2024), thẻ ngữ nghĩa không phải yếu tố xếp hạng độc lập. Tuy nhiên, nó cải thiện khả năng hiểu nội dung và hỗ trợ hiển thị rich result — từ đó tăng CTR và giữ chân người dùng, hai yếu tố gián tiếp ảnh hưởng đến thứ hạng.

Có cần dùng tất cả thẻ ngữ nghĩa trong mỗi trang?

Không. Chỉ dùng thẻ phù hợp với cấu trúc và chức năng thực tế. Ví dụ: trang chủ có thể cần <header>, <nav>, <main>, <footer>; nhưng trang “Liên hệ” có thể không cần <article> hay <aside>. Việc gượng ép dùng thẻ không cần thiết có thể gây nhiễu tín hiệu.

Thẻ <section> và <div> khác nhau thế nào?

<section> mang ý nghĩa: một phần nội dung có chủ đề riêng, bắt buộc có tiêu đề (theo tiêu chuẩn WCAG). <div> là thẻ “vô nghĩa” — chỉ dùng để nhóm phần tử vì mục đích CSS hoặc JS. Nếu không có tiêu đề hoặc không thể đặt tiêu đề hợp lý, hãy dùng <div>.