Khi xây dựng một trang web chuẩn SEO và thân thiện với người dùng, việc cấu trúc nội dung rõ ràng là yếu tố sống còn. Trong đó, thẻ <main> đóng vai trò như "trái tim" của trang, giúp các công cụ tìm kiếm và trình đọc màn hình hiểu được đâu là nội dung cốt lõi nhất. Tuy nhiên, không ít lập trình viên và chuyên gia SEO vẫn đang sử dụng thẻ này sai cách, dẫn đến việc lãng phí tiềm năng tối ưu hóa on-page.
Tại V4SEO, trong quá trình audit kỹ thuật cho hàng trăm dự án, chúng tôi nhận thấy việc áp dụng đúng chuẩn Semantic HTML5 ngay từ đầu sẽ giúp website tăng trưởng bền vững hơn rất nhiều. Việc hiểu rõ bản chất của thẻ này không chỉ là nhiệm vụ của lập trình viên mà còn là kiến thức bắt buộc đối với một người làm chiến lược nội dung.
Bài viết này sẽ cung cấp cho bạn một cái nhìn toàn diện về định nghĩa, quy tắc đặt thẻ, cách tối ưu Accessibility cho Screen readers và những lỗi sai phổ biến cần tránh.
Thẻ là gì?
Thẻ <main> là một phần tử HTML5 Semantic được sử dụng để xác định nội dung chính của phần thân trong một tài liệu hoặc ứng dụng web. Nội dung bên trong thẻ này phải là duy nhất đối với tài liệu, loại trừ các phần tử được lặp lại trên nhiều trang như thanh điều hướng, logo trang web, biểu mẫu tìm kiếm toàn cục hay phần chân trang.
Sự ra đời của thẻ này giúp giải quyết bài toán phân định nội dung trọng tâm. Thay vì sử dụng các thẻ div vô nghĩa với class như "content" hay "main-wrapper", việc dùng thẻ chuẩn giúp trình duyệt và các bot tìm kiếm lập chỉ mục chính xác hơn. Theo tài liệu từ MDN Web Docs và tiêu chuẩn W3C, thẻ này mang lại giá trị ngữ nghĩa cao, trực tiếp chỉ điểm cho máy học biết đâu là giá trị cốt lõi mà trang web muốn truyền tải đến người dùng.
Quy tắc sử dụng thẻ chuẩn W3C
Để đảm bảo tính hợp lệ của mã nguồn và tối ưu hóa tốt nhất, bạn cần tuân thủ các quy tắc nghiêm ngặt khi triển khai thẻ này trên trang.
Thứ nhất, mỗi trang web chỉ nên có một thẻ <main> hiển thị và không bị ẩn bởi thuộc tính hidden. Nếu bạn có nhiều thẻ này trong mã nguồn, tất cả các thẻ ngoại trừ một thẻ duy nhất phải được ẩn đi. Điều này giúp trình đọc màn hình không bị nhầm lẫn khi điều hướng người dùng khiếm thị.
Thứ hai, thẻ này không được phép đặt bên trong các thẻ như article, aside, footer, header, hoặc nav. Nó phải là con trực tiếp của thẻ body hoặc nằm trong một thẻ div bao ngoài cùng cấp độ với header và footer. Việc lồng ghép sai vị trí sẽ phá vỡ cấu trúc ngữ nghĩa của HTML5, làm giảm hiệu quả thu thập dữ liệu của bot tìm kiếm.
Ví dụ thực tế về cấu trúc HTML5
Để hình dung rõ hơn về cách đặt thẻ, bạn có thể tham khảo cấu trúc mã nguồn cơ bản dưới đây. Cấu trúc này phân tách rõ ràng phần đầu trang, nội dung chính và chân trang.
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<header>
<!– Logo và thanh điều hướng –>
</header>
<main>
<h1>Tiêu đề bài viết chính</h1>
<p>Nội dung chi tiết của bài viết nằm ở đây…</p>
</main>
<footer>
<!– Thông tin bản quyền, liên hệ –>
</footer>
</body>
</html>
Đoạn mã trên là một template chuẩn mực. Khi bot của Google truy cập, nó sẽ bỏ qua phần header và footer để tập trung phân tích từ khóa và ngữ nghĩa bên trong phần nội dung chính, từ đó đánh giá mức độ liên quan của trang với truy vấn tìm kiếm.
Thẻ ảnh hưởng đến SEO và Accessibility như thế nào?
Về mặt tối ưu hóa, thẻ này đóng vai trò như một biển báo chỉ đường cho các công cụ tìm kiếm. Khi bạn kết hợp nó với các chiến lược tối ưu hóa công cụ tìm kiếm SEO tổng thể, bot Google sẽ dễ dàng bóc tách nội dung cốt lõi khỏi các thành phần lặp lại. Điều này giúp cải thiện điểm số đánh giá chất lượng nội dung và tăng khả năng xếp hạng cho các từ khóa mục tiêu.
Đối với Accessibility, thẻ này mang lại lợi ích to lớn cho những người sử dụng trình đọc màn hình. Các phần mềm như JAWS hay NVDA hỗ trợ phím tắt cho phép người dùng nhảy trực tiếp đến nội dung chính của trang mà không cần phải nghe lại toàn bộ menu điều hướng. Trong trường hợp trình duyệt cũ không hỗ trợ đầy đủ HTML5, bạn có thể bổ sung thuộc tính ARIA role="main" để đảm bảo tính tương thích ngược, giúp trải nghiệm người dùng luôn được thông suốt.
So sánh thẻ với các thẻ Semantic khác
Nhiều người mới làm quen với HTML5 thường nhầm lẫn giữa các thẻ ngữ nghĩa. Bảng dưới đây sẽ giúp bạn phân biệt rõ ràng chức năng của từng thẻ để áp dụng chính xác.
|
Thẻ HTML |
Chức năng chính |
Quy tắc sử dụng cơ bản |
|
<main> |
Xác định nội dung trọng tâm, duy nhất của toàn bộ trang web. |
Chỉ dùng 1 thẻ hiển thị trên mỗi trang, không lồng vào các thẻ semantic khác. |
|
<article> |
Chứa một nội dung độc lập, có thể tự phân phối. |
Có thể sử dụng nhiều lần trên một trang, có thể lồng nhau. |
|
<section> |
Nhóm các nội dung có liên quan lại với nhau theo một chủ đề cụ thể. |
Nên đi kèm với một thẻ tiêu đề để xác định chủ đề của nhóm. |
|
<nav> |
Chứa các liên kết điều hướng chính của trang web. |
Dùng cho menu chính, mục lục, không dùng cho mọi nhóm liên kết. |
Việc hiểu rõ cách sử dụng thẻ article trong HTML5 sẽ giúp bạn biết cách đặt các bài viết độc lập vào bên trong phần nội dung chính. Tương tự, khi bạn nắm vững Ý nghĩa và vai trò của thẻ nav, bạn sẽ không bao giờ mắc lỗi đặt thanh menu vào nhầm khu vực dành riêng cho nội dung cốt lõi.
Những sai lầm phổ biến khi dùng thẻ
Dù quy tắc khá đơn giản, nhưng trong quá trình triển khai thực tế, lập trình viên vẫn thường xuyên mắc phải một số lỗi kỹ thuật. Dưới đây là những sai lầm cần tránh để không làm ảnh hưởng đến cấu trúc trang.
- Lồng thẻ sai nguyên tắc: Đặt thẻ này bên trong một thẻ article hoặc header. Đây là lỗi nghiêm trọng nhất phá vỡ cấu trúc W3C.
- Sử dụng nhiều thẻ hiển thị cùng lúc: Một số trang web dạng Single Page Application thường quên ẩn các thẻ của các trang cũ khi render trang mới, dẫn đến việc tồn tại nhiều thẻ chính hiển thị đồng thời.
- Bao gồm nội dung lặp lại: Đưa sidebar, thanh điều hướng toàn cục hoặc footer vào bên trong khu vực nội dung chính.
- Bỏ qua thuộc tính ARIA trên các hệ thống cũ: Không thêm role="main" khi website phục vụ một lượng lớn người dùng sử dụng các trình duyệt hoặc thiết bị đọc màn hình phiên bản cũ.
Để khắc phục, bạn nên thường xuyên kiểm tra mã nguồn bằng công cụ W3C Markup Validation Service. Công cụ này sẽ quét và chỉ ra chính xác dòng code nào đang vi phạm quy tắc lồng thẻ HTML5.
Câu hỏi thường gặp (FAQ)
Thẻ section là gì và có thể thay thế thẻ main không?
Thẻ section dùng để nhóm các nội dung có cùng chủ đề trong một trang, nhưng nó không thể thay thế thẻ main. Thẻ main mang ý nghĩa bao trùm toàn bộ nội dung cốt lõi của trang, trong khi section chỉ là các phần nhỏ cấu thành nên nội dung đó.
Có thể sử dụng nhiều thẻ main trên một trang không?
Theo tiêu chuẩn HTML5, bạn có thể có nhiều thẻ main trong mã nguồn, nhưng tại một thời điểm chỉ được phép có duy nhất một thẻ hiển thị. Các thẻ còn lại bắt buộc phải được thêm thuộc tính hidden.
Thẻ main có bắt buộc trong cấu trúc HTML5 cơ bản không?
Mặc dù không bắt buộc về mặt kỹ thuật để trang web có thể hiển thị, nhưng nó là tiêu chuẩn bắt buộc nếu bạn muốn tối ưu hóa SEO và Accessibility. Việc thiếu thẻ này sẽ làm giảm khả năng đọc hiểu cấu trúc trang của các công cụ tìm kiếm.
Làm thế nào để kiểm tra trang web đã có thẻ main hay chưa?
Bạn có thể nhấp chuột phải vào trang web, chọn kiểm tra phần tử để mở Developer Tools. Sau đó, sử dụng công cụ tìm kiếm và gõ từ khóa thẻ main. Nếu cấu trúc trang chuẩn, bạn sẽ thấy thẻ này bao bọc toàn bộ nội dung bài viết hoặc sản phẩm.
Kết luận
Thẻ <main> không chỉ là một đoạn mã HTML đơn thuần mà còn là cầu nối quan trọng giúp công cụ tìm kiếm và người dùng tiếp cận nội dung cốt lõi một cách nhanh chóng. Việc tuân thủ các quy tắc W3C, tránh lồng ghép sai vị trí và kết hợp tốt với các thẻ Semantic khác sẽ tạo ra một nền tảng vững chắc cho website. Hãy kiểm tra lại mã nguồn của bạn ngay hôm nay để đảm bảo rằng cấu trúc của trang web đang hoạt động đúng cách và mang lại hiệu quả tối đa cho chiến lược phát triển nội dung.
Bài viết liên quan
https://ourdate.online/pbn-la-gi/
