Semantic HTML
Sử dụng các phần tử HTML truyền đạt rõ ràng ý nghĩa và cấu trúc nội dung. Sử dụng đúng các phần tử như header, nav, main, article và section.
HTML ngữ nghĩa là thực hành sử dụng các phần tử HTML truyền đạt ý nghĩa của nội dung, không chỉ giao diện. Thay vì sử dụng <div> cho mọi thứ, HTML ngữ nghĩa sử dụng các phần tử như <header>, <nav>, <main>, <article>, <section>, <aside> và <footer> để mô tả vai trò của nội dung. Điều này giúp trình duyệt, trình đọc màn hình và công cụ tìm kiếm hiểu cấu trúc trang.
Các phần tử ngữ nghĩa chính của HTML5 bao gồm: <header> (phần đầu trang hoặc phần), <nav> (điều hướng), <main> (nội dung chính, một lần mỗi trang), <article> (nội dung độc lập), <section> (nhóm nội dung theo chủ đề), <aside> (nội dung phụ), <footer> (phần cuối trang). Ngoài ra, <figure> và <figcaption> cho hình ảnh có chú thích, <time> cho ngày giờ, <mark> cho văn bản được đánh dấu. Bạn có thể tham khảo sách hướng dẫn ngữ nghĩa HTML5 về cách sử dụng đúng.
HTML ngữ nghĩa mang lại lợi ích đáng kể cho SEO. Công cụ tìm kiếm sử dụng cấu trúc ngữ nghĩa để hiểu phân cấp nội dung và xác định nội dung chính. Phần tử <article> giúp Google xác định nội dung có thể xuất hiện trong Featured Snippets. Phân cấp tiêu đề đúng (<h1> đến <h6>) truyền đạt tầm quan trọng tương đối của các phần. Breadcrumb sử dụng <nav> cải thiện hiểu biết về cấu trúc trang web.
Đối với khả năng truy cập, HTML ngữ nghĩa là nền tảng. Trình đọc màn hình sử dụng các phần tử ngữ nghĩa làm landmark để điều hướng - người dùng có thể nhảy trực tiếp đến <main>, <nav> hoặc <footer>. Nếu không có HTML ngữ nghĩa, trình đọc màn hình phải đọc tuần tự qua các <div> không có ý nghĩa, khiến điều hướng cực kỳ khó khăn.
Một quan niệm sai lầm phổ biến là HTML ngữ nghĩa chỉ là thay thế <div> bằng <section>. Trên thực tế, mỗi phần tử có ngữ nghĩa cụ thể: <section> nhóm nội dung theo chủ đề (nên có tiêu đề), <article> là nội dung độc lập có thể tái phân phối, <div> không có ý nghĩa ngữ nghĩa và vẫn phù hợp cho nhóm thuần túy về bố cục. Sử dụng sai phần tử ngữ nghĩa có thể gây nhầm lẫn hơn là giúp ích. Bạn có thể tham khảo sách thiết kế tiêu chuẩn web để tìm hiểu thêm.
Từ góc độ đếm ký tự, HTML ngữ nghĩa ảnh hưởng đến cách đếm ký tự nội dung. Khi đếm ký tự "nội dung thực" của trang web, cần loại trừ thẻ HTML, thuộc tính và phần tử điều hướng. HTML ngữ nghĩa giúp xác định rõ ràng đâu là nội dung chính (<article>) và đâu là điều hướng (<nav>), cho phép đếm ký tự chính xác hơn.