Tại sao một người bận tâm đánh dấu đúng và ngữ nghĩa?

_{Lưu ý rằng tôi (cố gắng) đánh dấu theo ngữ nghĩa nhất có thể bởi vì tôi thích chúng theo cách nhìn và cảm nhận, nhưng không phải vì tôi biết về bất kỳ lợi thế tuyệt vời nào khác. Quan điểm của câu hỏi của tôi là có thể giáo dục người khác}

Chà, tôi đã thấy rất nhiều bài báo và hướng dẫn thường nói rằng "Hãy đánh dấu điều này theo cách ngữ nghĩa nhất có thể".

Nhưng một ý nghĩ kỳ lạ đã đến với tôi, tại sao?

Tại sao người ta cần (hoặc muốn) bận tâm với các yếu tố cụ thể truyền đạt ý nghĩa ngữ nghĩa chính xác? Cụ thể, tôi đề cập đến các yếu tố HTML5 mới, chẳng hạn như <time>, <output>hoặc <address>. Đặc biệt, nếu trang "hoạt động" (nó hiển thị độc đáo trong tất cả các trình duyệt).

Tại sao tôi muốn sử dụng các yếu tố như <time>hoặc <address>, trong đó không có gì cả (hoặc trong trường hợp xấu nhất, chung chung <span>) hoạt động tốt như vậy?

Tôi đang hỏi điều này bởi vì tôi đang thấy vô số trang web (rất phổ biến) (bao gồm cả trang web này) không tuân theo những thực tiễn tốt nhất được gọi là này.

Chức năng miễn phí

Sử dụng đúng cách <label>có nghĩa là bạn có thể nhấp vào nhãn để nhập trường văn bản. Nhiều trình duyệt sẽ thêm chức năng mặc định logic vào nhiều thẻ theo thông số chính thức, nghĩa là bạn có thể sử dụng ít plugin JavaScript hơn và viết ít mã hơn so với một trang web được tạo hoàn toàn từ <div>s và <span>s.

Khả năng tiếp cận

Liên quan đến chức năng miễn phí, ngữ nghĩa có ý nghĩa rất lớn đối với phần mềm đọc màn hình. Văn bản trước trường nhập liệu sẽ không được đọc theo cách tương tự như <label>ý muốn. Trình đọc màn hình sẽ bỏ qua hầu hết CSS của bạn, do đó, phần lớn tùy thuộc vào cấu trúc HTML của bạn.

CSS hợp lý

Tại sao sử dụng một div #headerkhi bạn có thể sử dụng một <header>và phong cách trực tiếp? Thẻ ngữ nghĩa giúp dễ dàng đánh dấu mọi thứ và làm cho phong cách của bạn dễ mang theo hơn nhiều; Nếu bạn có một phong cách nhất định để tấn công và luôn sử dụng <del>các yếu tố thì phong cách đó dễ mang theo hơn nhiều. <del>có nghĩa là điều tương tự với mọi người, nhưng mọi người sẽ đặt tên .deletedTextlớp khác nhau.

Nó cũng giúp giữ tất cả mọi người trên cùng một trang trong các dự án lớn; không ai thích học các quy ước đặt tên lớp bí truyền của người khác.

SEO

Các công cụ tìm kiếm như Google đã tăng cường sử dụng HTML và siêu dữ liệu ngữ nghĩa . Đoạn trích phong phú của Google cũng sử dụng siêu dữ liệu đặc biệt có nghĩa là để truyền đạt nội dung ngữ nghĩa.

Tại sao nó không phổ biến

Nó đòi hỏi công việc và mọi người đã quen với việc đánh giá một trang web bằng cách nó trông và hoạt động . Thường thì không có kế toán cho ngữ nghĩa bởi vì những người viết trường hợp kinh doanh cho các ứng dụng không hiểu nó hoặc tại sao nó quan trọng.

Rất khó để những người không có kỹ thuật hiểu hoặc đánh giá ngữ nghĩa HTML.

Nếu một trang web có vẻ tốt và nó xuất hiện để làm việc, tại sao phải băn khoăn? Nhiều người thậm chí có thể không biết là bất cứ điều gì nhiều đến nó. Tương tự như khả năng tiếp cận, điều này có xu hướng bị bỏ qua cho đến khi ai đó trong nhóm của bạn thực sự hiểu điều này.

Nếu bạn muốn HTML ngữ nghĩa là ưu tiên cho dự án của bạn, bạn cần trình bày trường hợp cho nó. Hiển thị nhóm / sếp của bạn cách trang web của bạn hoạt động trong trình đọc màn hình cũng là một công cụ hữu ích.

Câu trả lời cho điều đó chỉ đơn giản là truyền đạt thông tin và cấu trúc tài liệu của bạn .

Khi bạn sử dụng nhịp và div, tài liệu của bạn không có cấu trúc. Không có danh sách, không có đoạn văn, không có bảng, không có siêu liên kết. Không có gì. Thực sự không có lý do nào để chọn HTML làm ngôn ngữ đánh dấu và sau đó bỏ qua từ vựng mà nó cung cấp để diễn đạt và cấu trúc nội dung của bạn. Cấu trúc là từ quan trọng ở đây btw. HTML là để cấu trúc không hiển thị. Đó là những gì CSS dành cho.

Nếu bạn đánh dấu mã của bạn về mặt ngữ nghĩa, bạn đang cho người đọc cũng như máy móc có cơ hội hiểu dữ liệu bên trong các yếu tố của bạn. Nếu bạn sử dụng tất cả các phần tử span và div, bạn sẽ không có thông tin bổ sung này và việc suy ra chúng từ các giá trị có thể là không thể.

Tương tự như vậy, nếu tôi muốn cạo các trang web và chỉ trích xuất các tiêu đề để tạo Mục lục cho chúng, con nhện của tôi sẽ cần phải biết tiêu đề là gì. Nó không thể làm điều đó mà không có các yếu tố thích hợp.

Cuối cùng nhưng không kém phần quan trọng, nếu bạn chỉ sử dụng div và spans, bạn sẽ gặp khó khăn khi tạo kiểu cho chúng bằng CSS. Bộ chọn CSS hoạt động trên cấu trúc tài liệu của bạn và nếu đó chủ yếu là cấu trúc mơ hồ, các quy tắc CSS sẽ khiến iffy áp dụng. Làm thế nào để bạn quyết định liệu div div divthực sự đề cập đến table tr tdhoặc body ul li? Bạn sẽ phải thêm các lớp và id sau đó, nhưng sau đó bạn đang phát minh lại bánh xe.

Cũng xem khuyến nghị của W3C

Sử dụng các yếu tố ngữ nghĩa phù hợp sẽ đảm bảo cấu trúc có sẵn cho tác nhân người dùng. Điều này liên quan đến việc chỉ ra rõ ràng vai trò của các đơn vị khác nhau trong việc hiểu ý nghĩa của nội dung. Bản chất của một phần nội dung như một đoạn văn, tiêu đề, văn bản nhấn mạnh, bảng, v.v ... đều có thể được chỉ định theo cách này. Trong một số trường hợp, mối quan hệ giữa các đơn vị nội dung cũng cần được chỉ định, chẳng hạn như giữa các tiêu đề và các tiêu đề phụ hoặc giữa các ô của một bảng. Tác nhân người dùng sau đó có thể làm cho cấu trúc có thể nhận biết được đối với người dùng, ví dụ như sử dụng một bản trình bày trực quan khác cho các loại cấu trúc khác nhau hoặc bằng cách sử dụng giọng nói hoặc cao độ khác nhau trong bản trình bày thính giác.

Để thêm vào các câu trả lời đã có ở đây, một điều tôi chưa thấy đề cập đến là khả năng tương thích về phía trước . Khi thông số kỹ thuật phát triển, có thể chức năng bổ sung được chỉ định cho các yếu tố ngữ nghĩa nhất định. Nếu mã của bạn đúng về mặt ngữ nghĩa, nó sẽ có thể tận dụng chức năng này mà không cần hoặc bảo trì tối thiểu.

Một lý do bạn không thấy nhiều trang web theo ngữ nghĩa một cách hoàn hảo là không có trường hợp kinh doanh cho nó nhiều thời gian. Nếu nó thúc đẩy doanh số (hoặc một danh mục có liên quan như tiếp xúc) thì đáng để họ viết HTML ngữ nghĩa.

Trường hợp tốt nhất tôi có thể thực hiện để sử dụng ngữ nghĩa các thẻ là khi bạn tiêu thụ hoặc sử dụng HTML với một công cụ. Chẳng hạn, sử dụng thẻ ngữ nghĩa cho phép bạn trực tiếp tạo kiểu cho các thành phần mà không sợ thêm hoặc xóa kiểu khỏi thứ khác. Ngoài ra, nếu bạn phải phân tích HTML bằng cách sử dụng một công cụ quét hoặc bất cứ thứ gì tương tự thì bạn chắc chắn sẽ đánh giá cao HTML được định dạng tốt và có ngữ nghĩa vì việc viết các truy vấn XPath và DOM để tìm thấy những gì bạn cần trở nên dễ dàng hơn.

Tôi nên lưu ý rằng các lớp không phải là sự thay thế trực tiếp cho các thẻ ngữ nghĩa. Tôi có một lớp có thể tái sử dụng [error, information, warning]truyền đạt các ý nghĩa khác nhau và do đó các kiểu dựa trên thẻ mà chúng được gắn vào.

Bởi vì nó có thể hữu ích hoặc cần thiết cho trình thu thập thông tin và dịch vụ web (máy tính AKA giao tiếp với máy tính). Nếu bạn viết:

<span class="time">Sep 16 at 2:17</span>

... Trình thu thập dữ liệu web sẽ không cần thiết phải hiểu đó là một ngày, một công cụ thời gian. Hoặc sẽ khó khăn hơn nhiều để xác định vị trí của nó như là một thông tin ngày.

Nếu bạn dùng:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... Sẽ dễ dàng hơn nhiều cho bất kỳ trình thu thập thông tin nào để tìm và phân tích nội dung.

Khi tôi nói trình thu thập thông tin, tôi không có nghĩa là công cụ tìm kiếm nhất thiết :)

Tôi điều hành một công ty tư vấn web nhỏ và cách tiếp cận hiện tại của chúng tôi là không sử dụng các thẻ HTML5 mới vì chúng tôi đang cố gắng cân bằng nhiều yếu tố. Trong trường hợp này, sự cân bằng là giữa khả năng sử dụng, khả năng sử dụng và SEO:

• SEO: Những câu trả lời khác ở đây đã nói - nó có thể giúp ích một chút cho SEO, mặc dù dựa trên kinh nghiệm của tôi, chiến lược SEO càng rõ ràng thì càng ít khả năng giúp đỡ.

• Tính khả dụng # 1: Thật hợp lý khi cho rằng các thẻ HTML5 mang lại một số lợi thế về khả năng sử dụng. Đối với người dùng mù, chắc chắn rằng bất kỳ dự phòng nào trình duyệt có thể truy cập của họ cung cấp cho họ sẽ tốt hơn bất cứ thứ gì tôi có thể cung cấp. Đối với người dùng thông thường của bạn, nó còn nhiều tranh cãi. Có thể sử dụng trình phát đa phương tiện không có trình duyệt mà trình duyệt của bạn cung cấp sẽ dễ sử dụng hơn so với tiện ích ít quen thuộc mà tôi thường đặt ở đó. Hoặc có thể mặc định của trình duyệt của bạn là tào lao (như cách trình phát MP3 mặc định của Chrome Windows chỉ dừng hoạt động định kỳ).

• Khả năng sử dụng # 2: IE cũ. IE cũ yêu cầu một loạt các miếng chêm HTML5 làm mờ trang để bất kỳ thẻ nào trong số này hoạt động. Bạn phải thêm một số tập lệnh vào các thẻ đầu gọi là CreatEuity () trong một vòng lặp trên tất cả các thẻ HTML5 bạn đang sử dụng. Nếu bạn không đi xung quanh việc chải từng trang cho các thẻ bạn đang sử dụng, điều đó có nghĩa là mọi thẻ HTML5. Điều này cần phải chạy trên mỗi trang, nội tuyến, có nghĩa là không có bộ đệm. Và tin xấu: IE cũ là chậm nhất để thực thi Javascript, vì vậy nó tạo ra một chút chậm chạp trong khi tải. Sau đó, bạn phải tập trung vào một loạt Javascript và CSS cũ, và thường là Flash, để làm cho tất cả các yếu tố không được hỗ trợ mới hơn hiển thị chính xác. Bạn có thể phát hiện tính năng trước khi quyết định tải mã IE cũ, nhưng sau đó bạn ' Đang làm cho người dùng IE cũ đợi cho đến khi đủ tập lệnh được tải để thực hiện tính năng đó trước khi bắt đầu yêu cầu tất cả nội dung làm cho các thẻ đó hoạt động. Bạn có thể phát hiện trình duyệt và chỉ gửi nội dung IE cũ cho người dùng với các trình duyệt đó, nhưng điều đó có thể khiến bộ nhớ đệm trở nên khó khăn hoặc không thể tùy thuộc vào nền tảng của bạn. Việc cung cấp mã khác nhau cho những người dùng khác nhau cũng có nghĩa là việc kiểm tra phức tạp hơn - bao giờ có lỗi không đồng bộ? Làm thế nào về một điều chỉ xảy ra trên một trình duyệt cụ thể? Và chỉ trong sản xuất? Đăng ký cho tôi. Vì vậy, có lẽ bạn sẽ gửi sự phình to đó cho mọi người. Việc cung cấp mã khác nhau cho những người dùng khác nhau cũng có nghĩa là việc kiểm tra phức tạp hơn - bao giờ có lỗi không đồng bộ? Làm thế nào về một điều chỉ xảy ra trên một trình duyệt cụ thể? Và chỉ trong sản xuất? Đăng ký cho tôi. Vì vậy, có lẽ bạn sẽ gửi sự phình to đó cho mọi người. Việc cung cấp mã khác nhau cho những người dùng khác nhau cũng có nghĩa là việc kiểm tra phức tạp hơn - bao giờ có lỗi không đồng bộ? Làm thế nào về một điều chỉ xảy ra trên một trình duyệt cụ thể? Và chỉ trong sản xuất? Đăng ký cho tôi. Vì vậy, có lẽ bạn sẽ gửi sự phình to đó cho mọi người.

Cho đến khi IE8 chết, giá trị trong các thẻ HTML5 mới hơn này không đủ cao cho các vấn đề về hiệu suất mà chúng mang lại. Chúng tôi vẫn chưa làm việc với khán giả, nơi thậm chí gần chết *, nhưng một ngày nào đó.

* Số liệu gần đây nhất của chúng tôi cho thấy IE8 ở mức 6% cho trang web có ít khách truy cập IE8 nhất và 24% với nhiều khách truy cập IE8 nhất. Xa, xa chết.

Câu trả lời ngắn gọn là không có lý do chính đáng trong thực tế. Hầu như tất cả các lập luận ủng hộ đánh dấu sem semantic chỉ là những suy nghĩ về những gì có thể hoặc nên xảy ra, chứ không phải là một điều gì đó hữu hình. Ví dụ, công cụ tìm kiếm thường được gọi, nhưng không có bằng chứng nào về việc chăm sóc của họ ít nhất về timehay outputhay address.

Một cách gián tiếp, chúng ta có thể suy luận rằng họ sẽ không quan tâm trong tương lai gần. Các schema.org trang web, bởi một số công cụ tìm kiếm hàng đầu, ưu tiên rõ ràng là một cách tiếp cận cụ thể để “đánh dấu ngữ nghĩa” dựa trên một cái gì đó hoàn toàn khác nhau, cụ thể là dữ liệu vĩ mô ( itemscopevà các thuộc tính liên quan). Và họ thực sự làm điều này chủ yếu cho các trang web thương mại hoặc cộng đồng lớn.

Sử dụng spanhoặc divhoạt động độc đáo hơn so với các tính mới của HTML5, vì phiên bản sau này không được các phiên bản IE cũ nhận ra ngay cả cho mục đích tạo kiểu. Vì vậy, bạn cần một số mánh khóe để làm cho chúng hoạt động ngay cả các phần tử container.

Tuy nhiên, có một số yếu tố ngữ nghĩa tiếng Việt có ý nghĩa thực sự được gán cho chúng bởi các trình duyệt, phần mềm hỗ trợ hoặc công cụ tìm kiếm. Sử dụng h1cho tiêu đề chính luôn luôn được thực hành tốt vì những lý do như vậy. Sử dụng labelcho nhãn trường mẫu có tác động thực sự đến khả năng sử dụng và khả năng truy cập. Và như vậy; xem Hướng dẫn thực dụng về HTML: Nguyên tắc .

HTML không chỉ là ngôn ngữ UI, nó còn là ngôn ngữ cấu trúc dữ liệu. Nó được thiết kế để giúp các máy không đồng nhất có một cách phổ biến để xác định loại thông tin sắp tới cho máy chủ. Do đó rất nhiều thẻ khác nhau. Các trang HTML nên được coi là cấu trúc dữ liệu.