ฉันควรใช้แท็กที่ไม่เป็นมาตรฐานในหน้า HTML เพื่อเน้นคำหรือไม่

ฉันต้องการทราบว่าเป็นวิธีปฏิบัติที่ดีหรือถูกกฎหมายในการใช้แท็กที่ไม่ได้มาตรฐานในหน้า HTML สำหรับวัตถุประสงค์ที่กำหนดเอง

ตัวอย่างเช่น:

Lorem ipsum dolor amet amet, adipiscing elit elet. ผลลัพท์คือ, นั่งอยู่กับคนที่แต่งตัวประหลาด, สิ่งอำนวยความสะดวกด้านล่างโค้ง, หรือ pulvinar odio magna suscipit mi.

ฉันต้องการไฮไลต์ "นักการทูต adipiscing elit" เป็นสิ่งสำคัญและ "nisi arcu accumsan arcu" ตามที่ไฮไลต์

ดังนั้นใน HTML ฉันจะใส่:

Lorem ipsum dolor sit amet, <important> consectetur adipiscing elit </important> ผลที่ตามมา, สิ่งที่ดีที่สุดคือสิ่งที่ต้องทำ, <highlighted> สิ่งที่ต้องทำ> อาร์ค </highlighted>, หรือ pulvinar odio magna suscipit mi

และใน CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

อย่างไรก็ตามเนื่องจากแท็กเหล่านี้ไม่ใช่แท็ก HTML ที่ถูกต้องจึงไม่เป็นไร

ไม่นี่ไม่ใช่วิธีปฏิบัติที่ดี คุณควรใช้แท็กที่มีความหมายและมีความหมายซึ่งอาจเป็น<em>ในกรณีนี้ - และใช้สไตล์ CSS เพื่อให้ได้ตามข้อกำหนดการออกแบบของคุณ

คำถามของคุณถามว่า " การปฏิบัติที่ดีหรือถูกกฎหมาย "

ประการแรก: มันเป็นกฎหมายอย่างน้อยที่สุดก็ยอมรับได้ เบราว์เซอร์ได้รับการตั้งโปรแกรมให้รับมือกับแท็กที่ไม่เข้าใจแม้ว่าจะหมายความว่าพวกเขาไม่สนใจก็ตาม รหัส HTML นี้:

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

จะปรากฏเช่นนี้ทุกเบราว์เซอร์เดียว:

บางตัวหนาและบางตัวเอียง

นอกจากนี้เบราว์เซอร์ส่วนใหญ่จะอนุญาตให้คุณจัดองค์ประกอบใน CSS ดังนั้นหากคุณเพิ่มคำนิยาม CSS ต่อไปนี้:

slanted { font-style: italic; }

เบราว์เซอร์ส่วนใหญ่จะแสดงผลดังนี้:

บางตัวหนาและบางตัวเอียง

จริงๆ: ลองด้วยตัวคุณเอง อนึ่งนี่เป็นเคล็ดลับที่นักพัฒนาเว็บใช้เพื่อลองและให้แน่ใจว่าแท็ก HTML5 ใหม่แสดงอย่างถูกต้องในเบราว์เซอร์รุ่นเก่า

อย่างไรก็ตามนั่นไม่ใช่ภาพที่สมบูรณ์ คำตอบที่เต็มไม่มีก็ไม่ได้เป็นแนวปฏิบัติที่ดี คุณอาจสังเกตเห็นการใช้วลี " เบราว์เซอร์ส่วนใหญ่ " ของฉัน น่าเสียดายที่ Internet Explorer ทุกรุ่นก่อน IE9 ไม่สามารถใช้การทำงานนี้ได้ ใน IE8 และรุ่นก่อนหน้ารหัสข้างต้นจะยังคงมีลักษณะดังนี้:

บางตัวหนาและบางตัวเอียง

มีคำอธิบายโดยละเอียดที่ยอดเยี่ยมเกี่ยวกับปัญหาที่Dive Into HTML5ซึ่งคุณจะพบรายละเอียดของวิธีแก้ปัญหา อย่างไรก็ตามการแก้ปัญหาต้องใช้ JavaScript จึงไม่ใช่วิธีการแก้ปัญหา HTML ที่บริสุทธิ์และจะไม่ทำงานในทุกสถานการณ์

ดังนั้นคำตอบสั้น ๆ : ติดกับองค์ประกอบ HTML มาตรฐานเท่านั้นและกำหนดสไตล์ตามที่คุณต้องการใน CSS

หากคุณต้องการเก็บความหมาย<important/>ด้วยเหตุผลเฉพาะคุณสามารถใช้ XSL เพื่อแปลงแท็กที่กำหนดเองของคุณให้เป็น HTML ที่ถูกต้อง คุณสามารถอ่านเพิ่มเติมเกี่ยวกับหัวข้อนี้ได้ที่นี่:

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

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

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

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

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

คุณยังคงไม่สามารถมี<important/>ในการแสดงผล HTML สุดท้าย <span class="important"...แต่คุณสามารถมีได้เปลี่ยนโดยอัตโนมัติไปยังสิ่งที่ต้องการ

มีคำตอบเล็กน้อยที่นี่อธิบายว่าทำไมคุณไม่ควรสร้างแท็กที่กำหนดเองของคุณเอง พวกเขาทั้งหมดไม่ถูกต้อง

การวิเคราะห์แท็กที่กำหนดเองของ WHATWGสรุปว่าพวกเขาเป็นที่ยอมรับได้มาตรฐานตรงตามมาตรฐาน (เนื่องจากการจัดการแท็กที่ไม่รู้จักถูกกำหนดไว้อย่างดี) และเข้าถึงได้ง่ายกว่าตัวอย่างเช่นการกำหนด div div ทั่วไป

<x-accordion> </x-accordion> นั้นไม่เลวร้ายยิ่งกว่า <div class = "หีบเพลง"> </div> ในทุกแง่มุมทางกล ในกรณีที่ไม่มีคำจำกัดความสำหรับ "x-accordion" (หรือการสนับสนุนแบบจำลองส่วนประกอบ) ทั้งสองหมายถึงสิ่งเดียวกันทั้งสองสามารถจัดรูปแบบในลักษณะเดียวกัน หนึ่งคือ HTMLUnknownElement ส่วนอีกอันคือ HTMLDivElement และพื้นผิว API ของพวกเขาเหมือนกัน

สิ่งที่คุณควรทำซึ่ง OP ไม่ได้นำหน้าแท็กที่กำหนดเองทั้งหมดด้วย 'x-' ต่อการประชุม สิ่งนี้บ่งชี้อย่างชัดเจนว่าคุณต้องการให้แท็กนี้อยู่ในเอกสารของคุณและหลีกเลี่ยงความขัดแย้งกับองค์ประกอบในอนาคต

บางคนโต้แย้งว่าเนื่องจากเบราว์เซอร์ยอดนิยมบางตัวไม่จัดการแท็กที่กำหนดเองด้วยวิธีที่ได้มาตรฐานคุณไม่ควรใช้ อย่างไรก็ตามพฤติกรรมของเบราว์เซอร์ที่ไม่สอดคล้องกันนั้นเป็นปัญหาของตัวเองและโดยเฉพาะอย่างยิ่งจะไม่บีบบังคับให้คุณเขียนมาร์กอัปที่ไม่ใช่ความหมาย มีทั้ง Javascript และไม่ใช่ Javascript ในการแก้ไขปัญหานั้นซึ่งควรนำไปใช้กับเบราว์เซอร์ที่ไม่สอดคล้องกับมาตรฐานที่คุณต้องการให้การสนับสนุนเป็นพิเศษเท่านั้น

ทั้งหมดที่กล่าวว่าหากมีแท็กอยู่ในข้อมูลจำเพาะ (<mark>) ซึ่งครอบคลุมความหมายเชิงความหมายของแท็กที่คุณสร้าง (<ระดับสูง>) อย่างชัดเจนนั่นหมายความว่าคุณควรใช้แท็กที่มีอยู่

คุณสามารถใช้<em />และ<strong />กำหนด CSS เองเพื่อเปลี่ยนวิธีแสดงผล

แข็งแกร่งหมายถึงความสำคัญที่แข็งแกร่ง

เน้นหมายถึงการเน้นที่เพิ่มขึ้น

ในทางปฏิบัติมันไม่จำเป็นต้องใช้แท็กใหม่สำหรับการเน้น คุณสามารถใช้emหรือiแท็กหากคุณต้องการใช้ตัวเอียงเป็นค่าเริ่มต้น (ไม่ใช่ CSS) และstrongหรือbถ้าคุณต้องการให้เป็นตัวหนาเป็นค่าเริ่มต้น spanถ้าด้วยเหตุผลบางอย่างที่คุณต้องการการแสดงผลเริ่มต้นเป็นข้อความปกติคือไม่เน้นการใช้งาน ในแต่ละกรณีคุณสามารถใช้classแอ็ตทริบิวต์เพื่อแยกความแตกต่างการใช้งานนี้จากการใช้งานอื่น ๆ ที่คุณอาจมีสำหรับมาร์กอัป

HTML specicifications และ (HTML5) ร่างไม่ชัดเจนเกี่ยวกับความหมายขององค์ประกอบเหล่านี้ แต่สิ่งนี้ไม่จำเป็นต้องทำให้เกิดอาการปวดหัวที่สำคัญ

ไม่แม้ว่าจะได้รับอนุญาตให้เพิ่มแท็กใหม่จากเนมสเปซอื่นใน XHTML การประมวลผลแท็ก HTML ที่ไม่ได้ระบุไว้ก็ไม่ได้รับการสนับสนุนอย่างมาก

เป็นเรื่องถูกต้องที่คุณจะไม่ถูกจับกุมเพราะทำ แต่ถ้านักฆ่าจาก W3C ปรากฏตัวที่หน้าประตูของคุณอย่าแปลกใจ

ก่อนอื่น devs อื่นจะไม่ทราบว่าพวกเขาหมายถึงอะไร ในกรณีของ<important>และ<highlight>พวกเขามี แต่ถ้าคุณใช้สิ่งที่ต้องการพูด, <set>คุณอาจจะรู้ว่าคุณกำลังหมายถึงชุดคณิตศาสตร์ แต่คนอื่นอ่านรหัสของคุณอาจจะเข้าใจผิดว่ามันเป็นอย่างอื่น หากไม่มีข้อมูลจำเพาะที่จะให้คำตอบอาจมีความสับสนอย่างมาก

ประการที่สองจะเกิดอะไรขึ้นถ้า W3C ตัดสินใจว่า<important>องค์ประกอบเป็นความคิดที่ดี แต่คิดว่ามันควรหมายถึงการแจ้งเตือนเร่งด่วนเช่น

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

ถ้าอย่างนั้นคุณก็เมา เบราว์เซอร์และนักพัฒนาซอฟต์แวร์ของคุณจะค่อนข้างสับสน พวกเขาอาจจะบังคับให้คุณแยกรหัสของคุณด้วย regexes จนกว่าคุณจะเสียสติ และเราทุกคนรู้วิธีที่จะเปิดออก

ประการที่สาม IE <9 ไม่อนุญาตให้คุณจัดองค์ประกอบที่ไม่รู้จักโดยไม่ต้องแฮ็ค ไม่ใช่เรื่องใหญ่ แต่น่ารำคาญ

ในที่สุดในกรณีนี้<important>และ<highlight>มีอยู่แล้ว! <strong>และ<mark>เป็นสิ่งที่คุณกำลังมองหา ตามข้อกำหนดของHTML5

องค์ประกอบที่แข็งแกร่งแสดงถึงความสำคัญสำหรับเนื้อหา

และ

องค์ประกอบเครื่องหมายหมายถึงการทำงานของข้อความในเอกสารหนึ่งที่ทำเครื่องหมายหรือเน้นเพื่อการอ้างอิง ...

หากคุณไม่ได้ใช้เพื่อวัตถุประสงค์ในการอ้างอิง<span>คลาสที่มีคลาสจะใช้ได้

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

นี่คือการแก้ไข 1.5612

ผู้เขียนจะต้องไม่ใช้องค์ประกอบคุณลักษณะหรือค่าคุณลักษณะที่ไม่ได้รับอนุญาตจากข้อกำหนดนี้หรือข้อกำหนดอื่น ๆ ที่เกี่ยวข้องเนื่องจากการทำเช่นนี้ทำให้ยากขึ้นสำหรับภาษาที่จะขยายในอนาคต

ละเว้นความคิดเห็นของทุกคนที่นี่

ไม่ใช่วิธีปฏิบัติที่ดีด้วยเหตุผลสำคัญสองประการ:

ประการแรกเป็นไปได้อย่างสิ้นเชิงที่ในบางครั้งคณะกรรมการมาตรฐานตัดสินใจที่จะใส่แท็กชื่อ<important>ที่จะทำให้การใช้งานของคุณแย่ลง แน่นอนว่าอาจใช้เวลาสักครู่ .. แต่เป็นไปได้ที่คุณจะเสียเวลาในการริพออกมาหลังจากนั้น

ประการที่สอง (นี่คือเหตุผลที่แท้จริง) โปรแกรมเมอร์ที่สืบทอดรหัสของคุณอาจจะพูดว่า "wtf" ตามวิธีที่ไม่ได้มาตรฐานของคุณตลอดเวลาในขณะที่ดึงเอาสิ่งนั้นออกมาทั้งหมดหรือเท่าที่จะทำได้ เสร็จแล้วและออกไปอย่างหงุดหงิด

ดังนั้นจะดี คุณไม่เคยรู้เลยว่าคุณอาจขอให้พวกเขาทำงานสักวันหนึ่ง

ไม่คุณไม่สามารถสร้างแท็ก HTML ของคุณเองได้เพราะคุณจะต้องใช้เบราว์เซอร์หลักทั้งหมดเพื่อนำไปใช้งานในปัจจุบันเมื่อเบราว์เซอร์พบแท็กที่ไม่รู้จักที่ไม่รู้จักพวกเขาจะไม่สนใจทุกสิ่งในแท็กนั้น แท็กไม่มีจุดหมายและแม้กระทั่งพวกเขาจะทำงานในเบราว์เซอร์ของคุณเท่านั้น

คุณสามารถลองส่งกรณีการใช้งานให้กับ w3c ได้ แต่ฉันสงสัยว่ามันจะไปได้ทุกที่

ไม่มันไม่ใช่วิธีปฏิบัติที่ดีสำหรับเหตุผลทั้งหมดที่จัดทำโดยคำตอบอื่น ๆ ทั้งหมด แทนที่จะพูดซ้ำประเด็นเหล่านั้นฉันต้องการนำเสนอตัวเลือกที่ฉันไม่ได้เห็นในคำตอบเหล่านั้น!

ในกรณีที่ไม่มีแท็กที่มีอยู่ซึ่งมีความหมายเชิงความหมายตรงกับเป้าหมายของคุณคุณสามารถใช้การผสมผสานของ CSS และdata-*แอตทริบิวต์ใหม่ในข้อมูลจำเพาะ HTML 5 แน่นอนว่านี่จะใช้ได้กับแท็กส่วนใหญ่ที่คุณเลือก

ตัวอย่าง:

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.

แม้ว่านี่จะไม่ใช่โซลูชันที่สมบูรณ์แบบเนื่องจากไม่มีความหมายเชิงความหมายที่กำหนดไว้อย่างดีสำหรับdata-*แอตทริบิวต์ แต่อย่างน้อยจะช่วยให้คุณสามารถให้ข้อมูลเพิ่มเติมแก่ผู้ที่รู้จักความหมายของdata-typeแอตทริบิวต์ของคุณ