HTML ngữ nghĩa

Với hơn 100 phần tử HTML và khả năng tạo các phần tử tuỳ chỉnh, bạn có vô số cách để đánh dấu nội dung của mình; nhưng có một số cách—đặc biệt là về mặt ngữ nghĩa—sẽ tốt hơn những cách khác.

Ngữ nghĩa có nghĩa là "liên quan đến ý nghĩa". Viết HTML ngữ nghĩa có nghĩa là sử dụng các phần tử HTML để cấu trúc nội dung của bạn dựa trên ý nghĩa của từng phần tử chứ không phải hình thức của phần tử đó.

Loạt mã này chưa đề cập đến nhiều phần tử HTML, nhưng ngay cả khi không biết về HTML, hai đoạn mã sau đây sẽ cho thấy cách đánh dấu ngữ nghĩa có thể cung cấp ngữ cảnh của nội dung. Cả hai đều sử dụng số từ thay vì ipsum lorem để tiết kiệm thời gian cuộn. Hãy vận dụng trí tưởng tượng của bạn để mở rộng "ba0 từ" thành 30 từ:

Đoạn mã đầu tiên sử dụng

và , hai phần tử không có giá trị ngữ nghĩa.




  

    
five words

  

  

    
three words

    
forty-six words

    
forty-four words

  

  

    
seven words

    
sixty-eight words

    
forty-four words

  





   five words

Bạn có hiểu những từ đó mở rộng nội dung gì không? Thực ra là không.

Hãy viết lại mã này với các phần tử ngữ nghĩa:


  
Three words

  




  

    
five words

  

  

    
three words

    
forty-six words

    
forty-four words

  

  

    
seven words

    
sixty-eight words

    
forty-four words

  





  
five words

Khối mã nào thể hiện được ý nghĩa? Nếu chỉ sử dụng các phần tử phi ngữ nghĩa của

và , bạn thực sự không thể biết được nội dung trong khối mã đầu tiên thể hiện nội dung gì. Ví dụ về mã thứ hai, với các phần tử ngữ nghĩa, cung cấp đủ ngữ cảnh để một người không phải lập trình viên giải mã mục đích và ý nghĩa mà không cần gặp phải thẻ HTML. Cách viết này chắc chắn cung cấp đủ bối cảnh để nhà phát triển hiểu được đường viền của trang, ngay cả khi họ không hiểu nội dung, chẳng hạn như nội dung bằng tiếng nước ngoài.

Trong khối mã thứ hai, chúng ta có thể hiểu được cấu trúc mà không cần hiểu nội dung, vì các phần tử ngữ nghĩa đưa ra ý nghĩa và cấu trúc. Bạn có thể nhận biết tiêu đề đầu tiên là biểu ngữ của trang web, trong đó

có thể là tên trang web. Chân trang là chân trang của trang web: năm từ có thể là tuyên bố bản quyền hoặc địa chỉ doanh nghiệp.

Đánh dấu ngữ nghĩa không chỉ để giúp nhà phát triển dễ đọc mã đánh dấu hơn; nó đóng vai trò rất quan trọng trong việc giúp các công cụ tự động giải mã mã đánh dấu. Các công cụ cho nhà phát triển cũng minh hoạ cách các phần tử ngữ nghĩa cung cấp cấu trúc mà máy có thể đọc được.

Mô hình đối tượng hỗ trợ tiếp cận (AOM)

Khi phân tích cú pháp của nội dung nhận được, trình duyệt sẽ tạo mô hình đối tượng tài liệu (DOM) và mô hình đối tượng CSS (CSSOM). Sau đó, Google Analytics 4 cũng xây dựng cây hỗ trợ tiếp cận. Các thiết bị hỗ trợ, chẳng hạn như trình đọc màn hình, sử dụng AOM để phân tích cú pháp và diễn giải nội dung. DOM là một cây của tất cả các nút trong tài liệu. AOM giống như một phiên bản ngữ nghĩa của DOM.

Hãy so sánh cách hiển thị cả hai cấu trúc tài liệu này trong bảng điều khiển hỗ trợ tiếp cận của Firefox:

Cây hỗ trợ tiếp cận DOM không có HTML ngữ nghĩa.
Hình 1. Danh sách các nút là tất cả đường liên kết hoặc văn bản.
Cây hỗ trợ tiếp cận DOM với HTML ngữ nghĩa.
Hình 2. Danh sách các nút có các mốc rõ ràng.

Trong hình 2, có 4 vai trò điểm mốc trong khối mã thứ hai. Tính năng này sử dụng các mốc ngữ nghĩa được đặt tên thuận tiện là

,
,
và
Sai.
Chính xác! Phần tử
Đúng.
Hãy thử lại.