Tôi có nên sử dụng các thẻ không chuẩn trong trang HTML để làm nổi bật các từ không?

Tôi muốn biết liệu đó có phải là một thông lệ hay pháp lý để sử dụng các thẻ không chuẩn trong một trang HTML cho các mục đích tùy chỉnh nhất định.

Ví dụ:

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Nullam resultat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.

Tôi muốn làm nổi bật "elit adipiscing elit" là quan trọng và "nisi arcu accumsan arcu" như được nhấn mạnh.

Vì vậy, trong HTML tôi sẽ đặt:

Lorem ipsum dolor ngồi amet, <quan trọng> liên kết giới thượng lưu </ quan trọng>. Nullam resultat, felis sit amet suscipit laoreet, <highlight> nisi arcu accumsan arcu </ highlight>, vel pulvinar odio magna suscipit mi.

và trong CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Tuy nhiên, vì đây không phải là các thẻ HTML hợp lệ, điều này có ổn không?

Không, đây không phải là một thực hành tốt. Bạn nên sử dụng các thẻ có ý nghĩa, ngữ nghĩa - có lẽ <em>trong trường hợp này - và áp dụng các kiểu CSS để đạt được yêu cầu thiết kế của bạn.

Câu hỏi của bạn hỏi nếu đó là " thực hành tốt hoặc hợp pháp ".

Thứ nhất: đó là loại hợp pháp - ít nhất, nó được dung thứ. Các trình duyệt luôn được lập trình để đối phó với các thẻ mà họ không hiểu, ngay cả khi điều đó có nghĩa là họ chỉ bỏ qua chúng. Mã HTML này:

Some <b>bold</b> and some <slanted>italic</slanted>.

Sẽ xuất hiện như thế này là mỗi trình duyệt duy nhất:

Một số in đậm và một số in nghiêng.

Hơn nữa, hầu hết các trình duyệt sẽ cho phép bạn định kiểu phần tử đó trong CSS. Vì vậy, nếu bạn thêm định nghĩa CSS sau:

slanted { font-style: italic; }

bây giờ hầu hết các trình duyệt sẽ hiển thị như sau:

Một số in đậm và một số in nghiêng .

Thực sự: hãy thử nó cho chính mình . Ngẫu nhiên, đây là một mẹo mà các nhà phát triển web sử dụng để thử và đảm bảo rằng các thẻ HTML5 mới hiển thị chính xác trong các trình duyệt cũ hơn.

Tuy nhiên, đó không hoàn toàn là bức tranh hoàn chỉnh. Câu trả lời đầy đủ là không, nó không phải là thực hành tốt . Bạn có thể nhận thấy việc tôi sử dụng cụm từ " hầu hết các trình duyệt". Thật không may, tất cả các phiên bản Internet Explorer trước IE9 đều không thực hiện được hành vi này. Trong IE8 trở về trước, đoạn mã trên sẽ vẫn như thế này:

Một số in đậm và một số in nghiêng.

Có một mô tả chi tiết xuất sắc về vấn đề tại Lặn vào HTML5 , nơi bạn cũng sẽ tìm thấy chi tiết về cách giải quyết. Tuy nhiên, cách giải quyết yêu cầu JavaScript để nó không phải là một giải pháp HTML thuần túy và sẽ không hoạt động trong tất cả các tình huống.

Vì vậy, câu trả lời ngắn gọn: chỉ tuân theo các yếu tố HTML tiêu chuẩn và định kiểu chúng theo cách bạn thích trong CSS của mình.

Nếu bạn cần giữ ngữ nghĩa <important/>vì những lý do cụ thể, bạn có thể sử dụng XSL để chuyển đổi các thẻ tùy chỉnh của mình thành HTML hợp lệ. Bạn có thể đọc thêm về chủ đề này ở đây:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/l Library / x-ththtml / index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-USE-xsl.html

Bạn vẫn không thể có <important/>đầu ra HTML cuối cùng, nhưng bạn có thể tự động chuyển nó thành thứ gì đó như thế <span class="important"....

Có khá nhiều câu trả lời ở đây giải thích lý do tại sao bạn không bao giờ nên tạo thẻ tùy chỉnh của riêng mình. Có thể cho rằng, tất cả chúng đều không chính xác.

Phân tích các thẻ tùy chỉnh của WHATWG kết luận rằng chúng có thể chấp nhận được, tuân thủ tiêu chuẩn (vì việc xử lý các thẻ không được nhận dạng được xác định rõ) và dễ truy cập hơn, ví dụ, tạo kiểu cho một div chung.

<x-accordion> </ x-accordion> không tệ hơn <div class = "accordion"> </ div> theo mọi nghĩa cơ học. Trong trường hợp không có định nghĩa cho "x-accordion" (hoặc hỗ trợ mô hình thành phần), cả hai đều có nghĩa giống nhau, cả hai đều có thể được tạo kiểu theo cùng một cách. Một là HTMLUn UnknownEuity, hai là HTMLDivE bổ sung và bề mặt API của chúng giống hệt nhau.

Những gì bạn nên làm, điều mà OP không làm, là tiền tố tất cả các thẻ tùy chỉnh với 'x-' theo quy ước. Điều này chỉ rõ rằng bạn dự định thẻ này là cục bộ trong tài liệu của bạn và tránh xung đột với các yếu tố thông số kỹ thuật trong tương lai.

Một số ý kiến ​​cho rằng vì một số trình duyệt phổ biến nhất định không xử lý các thẻ tùy chỉnh theo cách tuân thủ tiêu chuẩn, bạn không nên sử dụng chúng. Tuy nhiên, hành vi của các trình duyệt không tuân thủ là vấn đề của riêng nó và tốt nhất là sẽ không ép buộc bạn viết đánh dấu phi ngữ nghĩa. Có cả giải pháp Javascript và không Javascript cho vấn đề đó, chỉ nên áp dụng cho những trình duyệt không tuân thủ mà bạn muốn hỗ trợ cụ thể.

Tất cả những gì đã nói, nếu một thẻ tồn tại trong thông số kỹ thuật (<mark>) bao gồm rõ ràng ý nghĩa ngữ nghĩa của thẻ bạn đã tạo (<highlight>), thì chắc chắn nên sử dụng thẻ hiện có.

Bạn có thể sử dụng <em />và <strong />với CSS tùy chỉnh để thay đổi cách hiển thị.

Mạnh mẽ, đề cập đến tầm quan trọng mạnh mẽ hơn.

Nhấn mạnh, đề cập đến tăng cường nhấn mạnh.

Về mặt thực tế, không cần thiết phải sử dụng các thẻ mới để làm nổi bật. Bạn có thể sử dụng emhoặc igắn thẻ nếu bạn thích in nghiêng làm kết xuất mặc định (không phải CSS) và stronghoặc bnếu bạn thích tô đậm như mặc định. Nếu, vì một số lý do, bạn thích kết xuất mặc định như văn bản bình thường, tức là không làm nổi bật, sử dụng span. Trong mỗi trường hợp, bạn có thể sử dụng một classthuộc tính để phân biệt cách sử dụng này với cách sử dụng khác mà bạn có thể có để đánh dấu.

Các đặc tả HTML và các bản nháp (HTML5) không rõ ràng về ngữ nghĩa của các yếu tố này, nhưng điều này không gây ra bất kỳ vấn đề đau đầu nào.

Không, mặc dù được phép thêm các thẻ mới từ một không gian tên khác trong XHTML, việc xử lý các thẻ HTML không được chỉ định sẽ không được khuyến khích.

Chà, thật hợp pháp khi bạn sẽ không bị bắt vì làm việc đó. Nhưng nếu những kẻ ám sát từ W3C xuất hiện trước cửa nhà bạn, đừng ngạc nhiên.

Trước hết, các nhà phát triển khác sẽ không biết ý nghĩa của chúng. Trong trường hợp <important>và <highlight>chúng là như vậy, nhưng nếu bạn sử dụng một cái gì đó như, giả sử, <set>bạn có thể biết bạn đang đề cập đến một bộ toán học, nhưng người khác đọc mã của bạn có thể nhầm nó với thứ khác. Không có thông số kỹ thuật để đưa ra câu trả lời, có thể có rất nhiều nhầm lẫn.

Thứ hai, điều gì sẽ xảy ra nếu W3C quyết định rằng một <important>yếu tố là một ý tưởng tốt, nhưng nghĩ rằng nó có nghĩa là một thông báo khẩn cấp, như

<important>This site is going to be down for maintenance 2/29/2012.</important>

Sau đó, bạn đang say sưa. Trình duyệt và các nhà phát triển đồng nghiệp của bạn sẽ khá bối rối. Họ có thể sẽ buộc bạn phân tích mã của bạn bằng các biểu thức cho đến khi bạn phát điên. Và tất cả chúng ta đều biết làm thế nào mà hóa ra.

Thứ ba, IE <9 không cho phép bạn tạo kiểu cho các phần tử không xác định mà không cần một chút hack. Không phải là một điều lớn, nhưng gây phiền nhiễu.

Cuối cùng, trong trường hợp này, <important>và <highlight>đã tồn tại! <strong>và <mark>là những gì bạn đang tìm kiếm. Theo thông số HTML5

Các yếu tố mạnh mẽ thể hiện tầm quan trọng mạnh mẽ cho nội dung của nó.

và

Phần tử đánh dấu thể hiện một dòng văn bản trong một tài liệu được đánh dấu hoặc tô sáng cho mục đích tham khảo ...

Nếu bạn không sử dụng nó cho "mục đích tham khảo", thì <span>với một lớp sẽ ổn.

http://www.w3.org/TR/html5/elements.html

Đây là bản sửa đổi 1.5612.

Tác giả không được sử dụng các yếu tố, thuộc tính hoặc giá trị thuộc tính không được phép của đặc điểm kỹ thuật này hoặc các thông số kỹ thuật áp dụng khác, vì làm như vậy sẽ khiến ngôn ngữ khó mở rộng hơn trong tương lai.

Bỏ qua mọi người elses ý kiến ​​ở đây.

Đó không phải là thực hành tốt vì hai lý do rất quan trọng:

Đầu tiên, hoàn toàn có thể vào một lúc nào đó, ủy ban tiêu chuẩn quyết định đưa vào một thẻ có tên <important>là kết thúc việc sử dụng nó cho bạn. Chắc chắn, nó có thể mất một lúc .. Nhưng có thể bạn sẽ lãng phí thời gian để xé nó ra sau đó.

Thứ hai, (đây là lý do thực sự), lập trình viên kế thừa mã của bạn sẽ liên tục nói "wtf" theo cách tiếp cận không chuẩn của bạn trong khi rút ra tất cả những điều đó, hoặc, cũng có thể, hoàn toàn bị nhầm lẫn bởi chính bạn là gì Đã làm xong và đơn giản là bỏ cuộc trong thất vọng.

Vì vậy, hãy tốt đẹp. Bạn không bao giờ biết, cuối cùng bạn có thể yêu cầu một trong số họ cho một công việc một ngày nào đó.

Không, bạn không thể tạo thẻ HTML của riêng mình, vì sau đó bạn sẽ phải có tất cả các trình duyệt chính để triển khai chúng, hiện tại khi các trình duyệt tìm thấy thẻ không được nhận dạng, chúng sẽ bỏ qua mọi thứ trong đó, vì vậy trừ khi bạn muốn tạo trình duyệt của riêng mình tạo mới Thẻ là vô nghĩa, và thậm chí sau đó chúng sẽ chỉ hoạt động trong trình duyệt của bạn.

Bạn có thể thử gửi trường hợp sử dụng cho họ đến w3c, nhưng tôi nghi ngờ nó sẽ đi đến bất cứ đâu.

Không, đó không phải là cách thực hành tốt cho tất cả các lý do được cung cấp bởi tất cả các câu trả lời khác. Thay vì nhắc lại những điểm đó, tôi muốn trình bày một lựa chọn mà tôi chưa từng thấy trong những câu trả lời đó!

Trong trường hợp không có thẻ hiện có ý nghĩa ngữ nghĩa phù hợp với mục tiêu của bạn, bạn có thể sử dụng kết hợp CSS và data-*thuộc tính mới trong thông số HTML 5. Tất nhiên, điều này sẽ hoạt động với hầu hết các thẻ bạn chọn.

Thí dụ:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Mặc dù đây không phải là một giải pháp hoàn hảo, vì không có ý nghĩa ngữ nghĩa được xác định rõ ràng cho data-*các thuộc tính, nhưng điều này ít nhất sẽ cho phép bạn cung cấp thông tin bổ sung cho những người biết ý nghĩa của data-typethuộc tính của bạn .