Nhìn vào ngữ nghĩa HTML5 thích hợp
Nếu bạn lập kế hoạch cẩn thận về cấu trúc tài liệu HTML của mình, bạn có thể giúp máy tính hiểu ý nghĩa của nội dung của bạn. Cú pháp đúng là rất quan trọng, nhưng về cơ bản, nó chỉ cung cấp các trình phân tích cú pháp, công cụ tìm kiếm và công nghệ hỗ trợ với một loạt dữ liệu vô nghĩa.
Nếu bạn cải thiện quy trình làm việc của bạn bằng cách chú ý đến ngữ nghĩa, bạn có thể tạo một nội dung chất lượng cao hơn để thu hút nhiều khách truy cập hơn. Ngữ nghĩa là nghiên cứu về ý nghĩa, trong một bối cảnh rộng lớn hơn một nhánh của logic và ngôn ngữ học.
Trong thế giới phát triển web, chúng ta nói về nội dung ngữ nghĩa khi máy tính hiểu cấu trúc của tài liệu và vai trò của các yếu tố bên trong nó. Nếu chúng ta muốn tạo ra ngữ nghĩa phù hợp, chúng ta cần phải sâu sắc hiểu cấu trúc nội dung của chúng tôi và khả năng công nghệ frontend.
Vậy những lợi ích hữu hình là gì? Đúng ngữ nghĩa có nghĩa là một nội dung dễ tìm kiếm hơn dẫn đến một xếp hạng công cụ tìm kiếm tốt hơn. Chúng tôi cũng tăng khả năng tiếp cận, như các công nghệ hỗ trợ như trình đọc màn hình có thể diễn giải tốt hơn ý nghĩa của nội dung của chúng tôi.
Có nhiều kỹ thuật phát triển front-end khác nhau cho phép các nhà phát triển đạt được cấu trúc trang ngữ nghĩa. Bài đăng này sẽ cung cấp cho bạn một đoạn giới thiệu ngắn gọn về các thẻ HTML ngữ nghĩa và khái niệm về phác thảo tài liệu.
Thẻ HTML ngữ nghĩa và phi ngữ nghĩa
Khái niệm ngữ nghĩa không mới như vẻ ngoài của nó, nó tồn tại tốt trước thời đại của HTML5. Thuật ngữ web ngữ nghĩa được đặt ra sớm nhất là vào năm 2001 bởi Sir Tim Berners-Lee. Dưới “web ngữ nghĩa” ý anh là một mạng dữ liệu có thể được xử lý bằng máy.
Điều này chủ yếu có nghĩa là các yếu tố HTML riêng biệt cần có vai trò cấu trúc có thể phân biệt của chúng. Theo định nghĩa của W3C “một yếu tố ngữ nghĩa mô tả rõ ràng ý nghĩa của nó đối với cả trình duyệt và nhà phát triển”.
Các yếu tố ngữ nghĩa trước HTML5
Các yếu tố ngữ nghĩa cũng tồn tại trước HTML5, chỉ trong hầu hết các trường hợp, các nhà phát triển không biết rằng một số thẻ họ sử dụng thực sự là ngữ nghĩa. Chỉ cần nghĩ về hoặc là
Vai trò của họ rõ ràng cho cả chúng tôi và tác nhân người dùng: chỉ đơn giản là chứa một hình thức, giống như
Các
Đặt hàng và danh sách không theo thứ tự, đoạn văn, thẻ tiêu đề h1-h6 là tất cả các yếu tố ngữ nghĩa đi trước HTML5.
Các yếu tố phi ngữ nghĩa
Các yếu tố phi ngữ nghĩa không có bất kỳ ý nghĩa đặc biệt nào, các mối quan hệ chữ tượng hình giữa chúng chỉ là ảo tưởng. Các ví dụ được sử dụng rộng rãi nhất của các thẻ HTML phi ngữ nghĩa là và thẻ.
Nếu trang web của bạn từng mắc phải căn bệnh khủng khiếp của viêm thần kinh, bạn biết những gì tôi đang nói về. Vâng. Divs không nhất thiết sai, nhưng viêm thần kinh cần phải được chiến đấu nếu chúng ta muốn viết mã HTML có thể duy trì, mô đun và có ý nghĩa.
Smashing Magazine giải thích rất hay vấn đề thực sự là gì với việc sử dụng quá mức và không hợp lý Không có mối quan hệ giữa hai người, giống như trong trường hợp Đừng hoảng sợ nếu bạn vẫn cảm thấy gắn bó với HTML5 đã giới thiệu nhiều yếu tố ngữ nghĩa mới giúp tổ chức nội dung dễ dàng. Họ không chỉ giúp bạn sắp xếp nội dung ở cấp độ của toàn bộ tài liệu (xem chi tiết trong phần tiếp theo), mà còn bên trong các khối văn bản, dưới dạng thẻ nội tuyến. Có lẽ các thẻ ngữ nghĩa cấp văn bản phổ biến nhất là Xem danh sách này cho tất cả các yếu tố ngữ nghĩa cấp văn bản hiện đang được sử dụng. Các phác thảo tài liệu là cấu trúc của một tài liệu HTML. Nó cho thấy các yếu tố có liên quan với nhau như thế nào. Phác thảo tài liệu chỉ được tạo bằng các phần tử ánh xạ, chẳng hạn như tiêu đề, tiêu đề bảng, tiêu đề biểu mẫu và các phần khác trong các phiên bản trước của HTML như HTML4.01 và XHTML. Trong HTML5, thuật toán phác thảo đã được tăng cường bởi các phần tử phân đoạn mới, cụ thể là: Có một phần tử phân đoạn thứ năm trong HTML5, nhưng nó không mới, đó là phần tử Nếu chúng ta muốn tạo một phác thảo tài liệu có cấu trúc tốt, chúng ta cần chú ý đến các quy tắc sau: 1. Phần tử cắt ngoài cùng luôn luôn là 2. Các phần trong HTML5 có thể được lồng nhau. 3. Mỗi phần có phân cấp tiêu đề riêng. Mỗi người trong số họ (ngay cả phần lồng trong cùng) có thể có một 4. Mặc dù phác thảo tài liệu chủ yếu được xác định bởi 5 yếu tố phân đoạn, nó cũng cần các tiêu đề phù hợp cho từng phần. 5. Đây luôn là phần tử tiêu đề đầu tiên (đặt nó là h1 hoặc thẻ tiêu đề xếp hạng thấp hơn) xác định tiêu đề của phần đã cho. Các thẻ tiêu đề sau trong cùng một phần cần phải liên quan đến điều này. (Nếu tiêu đề đầu tiên là một h3 bên trong một phần tử phân đoạn, đừng đặt h3 sau đó.) 6. Các phần được xác định bởi 7. Mỗi phần (cơ thể, phần, bài viết, sang một bên, điều hướng) có thể có riêng Chúng ta hãy xem một ví dụ cho một phác thảo tài liệu ngữ nghĩa để thấy rõ hơn cách thức hoạt động của nó. Mã ví dụ của chúng tôi sẽ dẫn đến cấu trúc tài liệu sau: Và đây là đoạn mã với phân chia ngữ nghĩa phù hợp: Đây là logo và slogan của chúng tôi. Đoạn 1 trong phần đầu tiên Đoạn 2 trong phần đầu tiên Đoạn 1 trong phần thứ hai Đoạn 2 trong phần thứ hai Nếu bạn xem đoạn mã ở trên, bạn sẽ thấy các tiêu đề và chân trang là tùy chọn, chúng ta có thể tự do lựa chọn nếu chúng ta muốn sử dụng chúng hay không, nhưng đó là khuyến khích luôn luôn bao gồm một tiêu đề cho mỗi phần, nếu không thì phần sẽ là “Chưa có tiêu đề” trong đề cương tài liệu. May mắn thay, có rất nhiều công cụ tuyệt vời trên internet cho phép chúng tôi kiểm tra phác thảo tài liệu, lần này chúng tôi sẽ sử dụng công cụ Outlan của html5.org. Nếu chúng tôi chèn đoạn mã của mình vào biểu mẫu được cung cấp bởi người đặt ngoài và nhấp vào “Phác thảo này!” nút, chúng ta sẽ thấy kết quả sau: Đây là phác thảo tài liệu của mã mẫu của chúng tôi, đây là cách các công cụ tìm kiếm nhìn thấy nó và trình đọc màn hình đọc nó cho người dùng khiếm thị của họ. Đó là ngữ nghĩa, cấu trúc tốt, và không có khó chịu “Chưa có tiêu đề” các phần trong đó. Nếu bạn muốn xem một phần Chưa có tiêu đề trông như thế nào trong Outlaner, chỉ cần xóa một số thẻ tiêu đề trong mã ví dụ. Thẻ HTML ngữ nghĩa và phác thảo tài liệu chỉ là một phần nhỏ của ngữ nghĩa web. Nội dung của một trang web có thể trở nên có ý nghĩa hơn nữa với sự trợ giúp của giao thức truy cập WAI-ARIA và dữ liệu có cấu trúc có thể được sử dụng cùng với giao thức RDFa, microdata hoặc đánh dấu JSON-LD. thẻ hoạt động theo cùng một cách, chỉ ở cấp độ nội tuyến.-mặc dù, như bạn không cần phải bỏ chúng hoàn toàn. Chúng vẫn là lựa chọn tốt nhất để phân nhóm nội dung chỉ cho mục đích tạo kiểu và trong các trường hợp nghỉ dưỡng cuối cùng khác. Ngữ nghĩa văn bản trong HTML5
và , nhưng chúng cũng tồn tại trước HTML5. Trong số các yếu tố ngữ nghĩa nội tuyến mới, chúng ta có thể tìm thấy, ví dụ như , gắn thẻ cho ngày con người có thể đọc được, và cho văn bản được tô sáng.Đề cương tài liệu trong HTML5
cho các phần được nhóm lại xung quanh một chủ đề cụ thể cho các tác phẩm hoàn chỉnh hoặc khép kín chẳng hạn như một bài đăng trên blog hoặc một widget cho khối điều hướng cho nội dung bổ sung như sidebars. nhãn. Các các thẻ cũng mới, nhưng chúng không tạo ra các phần mới trong tài liệu, chúng phân chia nội dung bên trong các phần. Điều này có nghĩa rằng mọi yếu tố phân chia (cơ thể, bài viết, phần, điều hướng và sang một bên) có thể có tiêu đề và chân trang riêng.Lời khuyên cho nội dung có cấu trúc ngữ nghĩa
nhãn.h1 nhãn., và các thẻ không thuộc về phác thảo chính của tài liệu HTML, chúng thường không được hiển thị ban đầu bởi các công nghệ hỗ trợ. các thẻ xác định tiêu đề (như logo, tên tác giả, ngày tháng, thông tin meta, v.v.) và chân trang (bản quyền, ghi chú, liên kết, v.v.) của phần đó.Ví dụ: Đề cương ngữ nghĩa
Chào mừng bạn trên trang web của chúng tôi!
Tiêu đề của bài viết
Phụ đề của bài viết
Phần logic đầu tiên (ví dụ: "Lý thuyết")
Một số phân nhóm khác trong phần đầu tiên
Phần logic thứ hai (ví dụ: "Thực hành")
Các khía cạnh khác của ngữ nghĩa web
