Học cách sử dụng các thẻ ngữ nghĩa để xây dựng các trang có thể truy cập, dễ bảo trì và thân thiện với SEO. Hướng dẫn này bao gồm các thẻ cốt lõi, ví dụ thực tế, lỗi thường gặp và các bước di chuyển thực tế.
HTML Ngữ nghĩa sử dụng các phần tử có ý nghĩa để mô tả cấu trúc và mục đích. Thay vì sử dụng các container chung chung ở mọi nơi, hãy sử dụng các thẻ như <header>, <nav>, <main> và <footer> để truyền đạt vai trò tài liệu cho trình duyệt, công cụ tìm kiếm và công nghệ hỗ trợ.
<header>...</header>
<main>...</main>
<footer>...</footer> > Cấu trúc ngữ nghĩa là yếu tố nhân lên cho chất lượng sản phẩm: khả năng sử dụng tốt hơn, khả năng hiển thị tìm kiếm tốt hơn và chi phí bảo trì thấp hơn.
Trình đọc màn hình và người dùng bàn phím dựa vào các mốc và hệ thống phân cấp tiêu đề. Các thẻ ngữ nghĩa cải thiện điều hướng và ngữ cảnh.
Công cụ tìm kiếm có thể hiểu rõ hơn về hệ thống phân cấp nội dung và mục đích trang, cải thiện chất lượng chỉ mục và mức độ liên quan.
Cấu trúc rõ ràng giảm thời gian làm quen, ma sát khi xem xét và các hồi quy ngẫu nhiên trong các cơ sở mã lớn.
Những thẻ này bao phủ hầu hết các bố cục sản xuất. Hãy sử dụng chúng một cách có chủ ý trước khi sử dụng các container chung chung.
Phần trên cùng để giới thiệu trang hoặc khối: logo, tiêu đề, tóm tắt, các hành động tiện ích.
Chỉ các liên kết điều hướng chính. Tránh bao bọc mọi danh sách liên kết nhỏ bằng nav.
Nội dung chính của trang. Sử dụng một phần tử main cho mỗi tài liệu.
Nội dung được nhóm với một chủ đề chung, thường được giới thiệu bằng một tiêu đề.
Nội dung tự chứa có thể được tái sử dụng hoặc phân phối độc lập.
Nội dung liên quan nhưng phụ: thanh bên, liên kết liên quan, chú thích.
Siêu dữ liệu và liên kết tiện ích cho trang hoặc phần.
Hình minh họa, biểu đồ, ảnh chụp màn hình mã đi kèm với figcaption.
Chuyển từ các trình bao bọc div lộn xộn sang cấu trúc ngữ nghĩa trong ba bước đáng tin cậy.
Đưa mã đánh dấu Vue/React/HTML của bạn vào nguyên trạng.
Ánh xạ các container cấu trúc sang các thẻ ngữ nghĩa trong khi vẫn giữ nguyên tính toàn vẹn của mã.
Xác thực các mốc và tiêu đề, sau đó hợp nhất vào cơ sở mã của bạn.
Sử dụng Công cụ Làm sạch HTML Ngữ nghĩa để nâng cấp mã đánh dấu cũ một cách nhanh chóng và an toàn. Giữ cho mã của bạn rõ ràng, có thể mở rộng và thân thiện với công cụ tìm kiếm.
Bắt đầu Làm sạch HTML