Mình không phải là một web dev xịn mà chỉ là một SEOer bình dân, nhưng khi đọc mã nguồn của nhiều trang web hiện nay thấy họ không hề sử dụng Semantic HTML thì cảm thấy vô cùng “sai sai”.
Nội dung trong bài viết
Semantic HTML là gì?
Semantic HTML (HTML ngữ nghĩa) là việc sử dụng các thẻ HTML có ý nghĩa ngữ nghĩa và mô tả được nội dung mà nó chứa đựng bên trong. Các thẻ HTML ngữ nghĩa giúp cho mã nguồn trang web dễ hiểu hơn với web developer và công cụ tìm kiếm (tối ưu SEO).
Các thẻ Semantic HTML thường gặp
Dưới đây là một số thẻ semantic HTML phổ biến:
<header>: Được sử dụng để định nghĩa phần đầu của trang web hoặc một phần tử đặc biệt.<nav>: Được sử dụng để định nghĩa một khu vực chứa các liên kết để điều hướng đến các trang web khác. Thường dùng cho phần menu<main>: Được sử dụng để định nghĩa phần chính của trang web.<article>: Được sử dụng để định nghĩa một bài viết độc lập hoặc một phần của trang web.<section>: Được sử dụng để định nghĩa một phần của trang web, ví dụ như một chương trong một sách.<aside>: Được sử dụng để định nghĩa một khu vực phụ, ví dụ: phần sidebar.<footer>: Được sử dụng để định nghĩa phần chân trang web hoặc một phần tử đặc biệt.<figure>: Được sử dụng để định nghĩa một hình ảnh, đồ họa hoặc bảng dữ liệu cùng với chú thích.<figcaption>: Được sử dụng để định nghĩa một chú thích cho các yếu tố được định nghĩa bởi thẻ<figure>.<time>: Được sử dụng để định nghĩa một ngày hoặc thời gian.
Còn nhiều lắm, mấy thẻ trên này mình thấy nó quan trọng như kiểu khung xương lớn thôi. Danh sách thẻ và mô tả đầy đủ bạn có thể xem tại đây.
Semantic HTML trong SEO
Sử dụng HTML ngữ nghĩa đối với SEO có nhiều ưu điểm quan trọng:
- Khả năng thu thập dữ liệu: Các công cụ tìm kiếm như Google, Bing sử dụng các thẻ semantic để hiểu cấu trúc và nội dung của trang. Ví dụ,
<h1>được ưu tiên cao hơn<div>trong việc xác định tiêu đề chính. - Hỗ trợ dữ liệu có cấu trúc: Các thẻ như
<article>,<section>kết hợp với dữ liệu có cấu trúc giúp công cụ tìm kiếm hiểu rõ nội dung, cải thiện khả năng đạt Top 0. - Cải thiện thứ hạng: Trang sử dụng semantic HTML thường được đánh giá cao hơn về mặt kỹ thuật (tất nhiên là bạn vẫn cần nội dung chất lượng).
Nhược điểm:
- Web developer cần biết sử dụng các thẻ đúng ngữ cảnh.
Tài liệu hướng dẫn của Google cũng có nói đến việc sử dụng HTML ngữ nghĩa. (Xem tại đây)
Sử dụng Semantic HTML hay CHỈ sử dụng các div, span
Rõ ràng là web vẫn chạy, nhìn vẫn thế thì tội gì tôi phải sửa lại nhỉ?
Bảng so sánh giữa việc sử dụng Semantic HTML và CHỈ sử dụng các thẻ <div>, <span>…
| Tiêu chí | Semantic HTML | CHỈ dùng <div>, <span>… |
| Ý nghĩa ngữ nghĩa | Thẻ có ý nghĩa rõ ràng (VD: <header>, <article>…) | Không có ý nghĩa ngữ nghĩa, chỉ là container chung |
| SEO | Tối ưu, công cụ tìm kiếm hiểu cấu trúc dễ dàng | Kém hơn, cần thêm schema markup để hỗ trợ |
| Khả năng tiếp cận (accessibility) | Tích hợp ARIA mặc định, thân thiện với trình đọc màn hình | Yêu cầu thêm ARIA thủ công, dễ gây lỗi |
| Bảo trì, nâng cấp, chuyển giao | Dễ đọc, dễ bảo trì, ít phụ thuộc vào class tùy chỉnh. Dễ chuyển giao | Dễ rối (div-soup), khó bảo trì và chuyển giao khi dự án lớn |
| Hiệu suất | Mã gọn, giảm kích thước tệp HTML/CSS | Mã có thể phình to do nhiều class và thuộc tính |
| Tương thích trình duyệt | Hỗ trợ tốt trên trình duyệt hiện đại, cần polyfill cho trình duyệt cũ (nhưng hiện nay thì phải 99.99% đã hỗ trợ) | Tương thích mọi trình duyệt, nhưng không tận dụng tính năng HTML5 |
Vậy theo mình là nên ưu tiên Semantic HTML cho SEO, accessibility và bảo trì. Sử dụng các thẻ <div>, <span>… chỉ cho các thành phần không cần ngữ nghĩa.
Kết luận
Sử dụng Semantic HTML là lựa chọn ưu tiên hàng đầu. Nó không chỉ cải thiện SEO, khả năng tiếp cận, và hiệu suất mà còn giúp mã nguồn dễ đọc, dễ bảo trì, và phù hợp với các tiêu chuẩn web hiện đại. Đặc biệt là website chuyên nghiệp, cần ưu tiên về SEO, accessibility và khả năng bảo trì – nâng cấp – chuyển giao.
Ở đây mình muốn nói đến việc lựa chọn giữa một cái tốt và một cái tốt hơn. Còn lại do bạn quyết định
Nhanism
