ทำไมคนเราถึงต้องมาร์กอย่างถูกต้องและมีความหมาย?

_{โปรดทราบว่าฉัน (ลอง) เพื่อทำเครื่องหมายในความหมายที่เป็นไปได้เพราะฉันชอบพวกเขาในแบบที่มันดูและรู้สึก แต่ไม่ใช่เพราะฉันรู้ถึงข้อดีที่น่าทึ่งอื่น ๆ ประเด็นคำถามของฉันคือการให้ความรู้แก่ผู้อื่น}

ฉันเคยเห็นบทความและแบบฝึกหัดมากมายซึ่งมักระบุว่า "ลองทำเครื่องหมายด้วยวิธีที่เป็นไปได้ทางความหมายมากที่สุด"

แต่ความคิดแปลก ๆ มาหาฉันทำไม

ทำไมต้องมี (หรือต้องการ) รบกวนองค์ประกอบเฉพาะที่ถ่ายทอดความหมายที่ถูกต้อง? โดยเฉพาะผมหมายถึงองค์ประกอบ HTML5 ใหม่เช่น<time>, หรือ<output> <address>โดยเฉพาะอย่างยิ่งหากหน้า "ใช้งานได้" (จะแสดงผลได้ดีในทุกเบราว์เซอร์)

เหตุใดฉันจึงต้องการใช้องค์ประกอบเช่น<time>หรือ<address>ในกรณีที่ไม่มีสิ่งใด (หรือในกรณีที่เลวร้ายที่สุดทั่วไป<span>) ใช้งานได้ดีเหมือนกัน?

ฉันถามสิ่งนี้เพราะฉันเห็นเว็บไซต์ (ยอดนิยม) มากมาย (อันนี้รวมอยู่) ซึ่งไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่เรียกว่าเหล่านี้

ฟังก์ชั่นฟรี

การใช้<label>s อย่างถูกต้องหมายความว่าคุณสามารถคลิกที่ป้ายกำกับเพื่อป้อนฟิลด์ข้อความ เบราว์เซอร์หลายคนจะเพิ่มฟังก์ชันการทำงานเริ่มต้นตรรกะที่จะแท็กมากต่อสเปคอย่างเป็นทางการหมายความว่าคุณสามารถใช้ปลั๊กอิน JavaScript น้อยลงและเขียนโค้ดน้อยกว่าเว็บไซต์ทั้งหมดออกจาก<div>และ<span>s

การเข้าถึง

เกี่ยวข้องกับการใช้งานฟรีความหมายหมายถึงซอฟต์แวร์ตัวอ่านหน้าจอมากมาย ข้อความที่อยู่ด้านหน้าของฟิลด์ป้อนข้อมูลจะไม่สามารถอ่านได้ในลักษณะเดียวกับความ<label>ประสงค์ โปรแกรมอ่านหน้าจอจะไม่สนใจ CSS ส่วนใหญ่ดังนั้นจึงขึ้นอยู่กับโครงสร้างของ HTML เป็นหลัก

โลจิคัล CSS

ทำไมต้องใช้ a div #headerเมื่อคุณสามารถใช้ a <header>และสไตล์ที่ตรงได้? แท็กความหมายทำให้ง่ายต่อการทำเครื่องหมายสิ่งต่าง ๆ และทำให้สไตล์ของคุณพกพาสะดวก หากคุณมีสไตล์บางอย่างสำหรับขีดฆ่าและใช้<del>องค์ประกอบเสมอสไตล์นั้นจะพกพาได้มากกว่า <del>หมายถึงสิ่งเดียวกันสำหรับทุกคน แต่ทุกคนจะตั้งชื่อ.deletedTextชั้นของพวกเขาแตกต่างกัน

นอกจากนี้ยังช่วยให้ทุกคนอยู่ในหน้าเดียวกันในโครงการขนาดใหญ่ ไม่มีใครสนุกกับการเรียนรู้อนุสัญญาการตั้งชื่อชั้นลึกลับของคนอื่น

SEO

เสิร์ชเอนจิ้นอย่าง Google นั้นใช้ซีแมนติก HTML และเมตาดาต้าเพิ่มขึ้น Rich Snippets ของ Google ยังใช้ข้อมูลเมตาพิเศษเพื่อสื่อความหมาย

ทำไมมันไม่เหมือนกันทั้งหมด

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

มันยากมากสำหรับคนที่ไม่ใช่ด้านเทคนิคในการทำความเข้าใจหรือประเมินความหมาย HTML

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

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

คำตอบที่เป็นเพียงการถ่ายทอดข้อมูลและโครงสร้างเอกสารของคุณ

เมื่อคุณใช้ช่วงและ divs เอกสารของคุณไม่มีโครงสร้าง ไม่มีรายการ, ไม่มีย่อหน้า, ไม่มีตาราง, ไม่มีไฮเปอร์ลิงก์ ไม่มีอะไร ไม่มีประโยชน์ที่จะเลือก HTML เป็นภาษามาร์กอัปและไม่สนใจคำศัพท์ที่เสนอเพื่อแสดงและจัดโครงสร้างเนื้อหาของคุณ โครงสร้างเป็นคำสำคัญที่นี่ btw HTML ใช้สำหรับการสร้างโครงสร้างไม่แสดง นั่นคือสิ่งที่ CSS มีไว้สำหรับ

หากคุณทำเครื่องหมายรหัสของคุณในเชิงความหมายคุณจะให้โอกาสผู้อ่านของมนุษย์และเครื่องจักรเพื่อทำความเข้าใจข้อมูลภายในองค์ประกอบของคุณ หากคุณใช้องค์ประกอบ span และ div ตลอดทางคุณจะไม่มีข้อมูลพิเศษนี้และอนุมานจากค่าเหล่านั้นเพียงอย่างเดียวอาจเป็นไปไม่ได้

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

สุดท้าย แต่ไม่ท้ายสุดถ้าคุณใช้ div และ spans เท่านั้นคุณจะมีสไตล์ที่ยากลำบากเหล่านี้ด้วย CSS CSS Selectors ทำงานกับโครงสร้างของเอกสารของคุณและหากเป็นโครงสร้างที่คลุมเครือส่วนใหญ่กฎ CSS จะได้รับไม่แน่นอนเมื่อนำไปใช้ คุณจะทำอย่างไรตัดสินใจว่าdiv div divมันหมายถึงtable tr tdหรือbody ul li? คุณจะต้องเพิ่มคลาสและรหัสแล้ว แต่จากนั้นคุณจะสร้างใหม่ล้อ

ดูคำแนะนำของ W3C

การใช้องค์ประกอบทางความหมายที่เหมาะสมจะทำให้แน่ใจว่าโครงสร้างนั้นพร้อมใช้งานสำหรับตัวแทนผู้ใช้ สิ่งนี้เกี่ยวข้องกับการระบุอย่างชัดเจนถึงบทบาทที่หน่วยต่าง ๆ มีในการทำความเข้าใจความหมายของเนื้อหา ลักษณะของเนื้อหาเช่นย่อหน้า, ส่วนหัว, ข้อความที่เน้น, ตาราง ฯลฯ สามารถแสดงได้ด้วยวิธีนี้ ในบางกรณีควรระบุความสัมพันธ์ระหว่างหน่วยเนื้อหาเช่นระหว่างส่วนหัวและหัวเรื่องย่อยหรือระหว่างเซลล์ของตาราง ตัวแทนผู้ใช้สามารถสร้างโครงสร้างให้ผู้ใช้รับรู้ได้ตัวอย่างเช่นการใช้การนำเสนอด้วยภาพที่แตกต่างกันสำหรับโครงสร้างประเภทต่างๆหรือโดยใช้เสียงหรือระดับเสียงที่แตกต่างกันในการนำเสนอการฟัง

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

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

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

ฉันควรทราบว่าคลาสไม่ได้แทนที่แท็กแบบความหมายโดยตรง ฉันมีคลาสที่สามารถใช้ซ้ำได้[error, information, warning]ซึ่งสื่อความหมายที่แตกต่างกันดังนั้นสไตล์จึงขึ้นอยู่กับแท็กที่แนบมาด้วย

เพราะมันจะมีประโยชน์หรือจำเป็นสำหรับซอฟต์แวร์รวบรวมข้อมูลและบริการเว็บ (คอมพิวเตอร์ AKA ที่สื่อสารกับคอมพิวเตอร์) ถ้าคุณเขียน:

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

... โปรแกรมรวบรวมข้อมูลเว็บไม่จำเป็นต้องเข้าใจว่าเป็นวันที่และเวลา หรือจะเป็นการยากที่จะระบุว่าเป็นข้อมูลวันที่

ถ้าคุณใช้:

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

... มันจะง่ายกว่าสำหรับโปรแกรมสืบค้นใด ๆ ที่จะค้นหาและวิเคราะห์เนื้อหา

เมื่อฉันพูดว่าซอฟต์แวร์รวบรวมข้อมูลฉันไม่ได้หมายถึงเครื่องมือค้นหาจำเป็น :)

ฉันใช้ บริษัท ให้คำปรึกษาทางเว็บขนาดเล็กและแนวทางปัจจุบันของเราคือไม่ใช้แท็ก HTML5 ใหม่เนื่องจากเรากำลังพยายามปรับสมดุลหลายปัจจัย ในกรณีนี้ความสมดุลระหว่างการใช้งานการใช้งานและ SEO:

• SEO: คำตอบอื่น ๆ ที่นี่กล่าวว่า - อาจช่วยเล็กน้อยสำหรับ SEO แม้ว่าตามประสบการณ์ของฉันยิ่งชัดเจนกลยุทธ์ SEO คือโอกาสน้อยที่จะช่วย

• การใช้งาน # 1: มีเหตุผลที่จะสมมติว่าแท็ก HTML5 มอบประโยชน์การใช้งานบางประเภท สำหรับผู้ใช้ที่ตาบอดก็มั่นใจได้ว่าสิ่งใดก็ตามที่เบราว์เซอร์ที่เข้าถึงได้ของพวกเขาจะให้สิ่งที่ดีกว่าสิ่งที่ฉันจะสามารถให้ได้ สำหรับผู้ใช้ทั่วไปของคุณมันเป็นที่ถกเถียงกันมากขึ้น บางทีการใช้เครื่องเล่นมีเดียที่ไม่ได้ใช้งานเบราว์เซอร์ของคุณจะช่วยให้คุณใช้งานได้ง่ายกว่าวิดเจ็ตที่คุ้นเคยน้อยกว่าที่ฉันเคยใส่ไว้ หรืออาจเป็นค่าเริ่มต้นของเบราว์เซอร์ของคุณเป็นอึ (เช่นวิธีที่เครื่องเล่น MP3 เริ่มต้นของ Chrome Windows เพียงหยุดทำงานเป็นระยะ)

• การใช้งาน # 2: IE เก่า IE เก่าต้องใช้ HTML5 ในการขยายหน้าเพื่อให้แท็กเหล่านี้ทำงาน คุณต้องเพิ่มสคริปต์บางส่วนลงในแท็กส่วนหัวที่เรียกใช้ CreateElement () แบบวนซ้ำทั่วแท็ก HTML5 ทั้งหมดที่คุณใช้ หากคุณไม่ต้องการใช้แท็กที่มีการใช้งานในแต่ละหน้าหมายความว่าทุกแท็ก HTML5 สิ่งนี้ต้องทำงานในทุกหน้าอินไลน์หมายถึงไม่มีการแคช และข่าวร้าย: IE เก่านั้นช้าที่สุดในการเรียกใช้ Javascript ดังนั้นมันจึงสร้างความรู้สึกเซื่องซึมเล็กน้อยในขณะที่โหลด จากนั้นคุณจะต้องเข้าร่วม Javascript และ CSS แบบเก่าเท่านั้นและบ่อยครั้งที่ Flash เพื่อให้องค์ประกอบที่ไม่สนับสนุนที่ใหม่กว่าแสดงผลอย่างถูกต้อง คุณสามารถตรวจจับคุณสมบัติก่อนตัดสินใจโหลดรหัส IE เก่า แต่จากนั้นคุณ กำลังทำให้ผู้ใช้ IE เก่ารอจนกระทั่งสคริปต์โหลดเพียงพอที่จะตรวจจับคุณสมบัติก่อนที่จะเริ่มขอสิ่งทั้งหมดที่ทำให้แท็กเหล่านั้นทำงานได้ คุณสามารถตรวจจับเบราว์เซอร์และส่งเฉพาะสิ่งเก่า IE ให้กับผู้ใช้ที่มีเบราว์เซอร์เหล่านั้น แต่สามารถทำให้แคชยากหรือเป็นไปไม่ได้ขึ้นอยู่กับแพลตฟอร์มของคุณ การส่งรหัสที่แตกต่างกันไปยังผู้ใช้ที่แตกต่างกันหมายถึงการทดสอบมีความซับซ้อนมากขึ้น - เคยมีข้อผิดพลาดแบบอะซิงโครนัสไหม? วิธีการเกี่ยวกับหนึ่งที่เกิดขึ้นเฉพาะในเบราว์เซอร์ที่เฉพาะเจาะจง? และในการผลิตเท่านั้น? สมัครเลย ดังนั้นคุณอาจจะส่งการขยายตัวนี้ให้กับทุกคน การส่งรหัสที่แตกต่างกันไปยังผู้ใช้ที่แตกต่างกันหมายถึงการทดสอบมีความซับซ้อนมากขึ้น - เคยมีข้อผิดพลาดแบบอะซิงโครนัสไหม? วิธีการเกี่ยวกับหนึ่งที่เกิดขึ้นเฉพาะในเบราว์เซอร์ที่เฉพาะเจาะจง? และในการผลิตเท่านั้น? สมัครเลย ดังนั้นคุณอาจจะส่งการขยายตัวนี้ให้กับทุกคน การส่งรหัสที่แตกต่างกันไปยังผู้ใช้ที่แตกต่างกันหมายถึงการทดสอบมีความซับซ้อนมากขึ้น - เคยมีข้อผิดพลาดแบบอะซิงโครนัสไหม? วิธีการเกี่ยวกับหนึ่งที่เกิดขึ้นเฉพาะในเบราว์เซอร์ที่เฉพาะเจาะจง? และในการผลิตเท่านั้น? สมัครเลย ดังนั้นคุณอาจจะส่งการขยายตัวให้ทุกคน

จนกว่า IE8 จะตายค่าในแท็ก HTML5 ที่ใหม่กว่าเหล่านี้จะไม่สูงพอสำหรับปัญหาด้านประสิทธิภาพที่เกิดขึ้น เรายังไม่ได้ทำงานกับผู้ชมที่ใกล้ตาย * แต่สักวัน

* เมตริกล่าสุดของเราแสดง IE8 ที่ 6% สำหรับไซต์ที่มีผู้เยี่ยมชมน้อยที่สุด IE8 และ 24% กับผู้เยี่ยมชม IE8 มากที่สุด ห่างไกลจากความตาย

คำตอบสั้น ๆ คือ“ ไม่มีเหตุผลที่ดีในทางปฏิบัติ” เกือบทุกข้อโต้แย้งที่ให้มาร์กอัป“ semantic” เป็นเพียงความคิดว่าอะไรที่จะเกิดขึ้นหรือควรจะเกิดขึ้นมากกว่าสิ่งที่จับต้องได้ ยกตัวอย่างเช่นเครื่องมือค้นหามักจะเรียก แต่ไม่มีหลักฐานของประชาชนในการดูแลของพวกเขาอย่างน้อยประมาณtimeหรือหรือoutputaddress

ทางอ้อมเราสามารถอนุมานได้ว่าพวกเขาจะไม่สนใจในอนาคตอันใกล้ schema.orgเว็บไซต์โดยบางเครื่องมือค้นหาชั้นนำโปรดปรานอย่างชัดเจนวิธีการที่เฉพาะเจาะจงเพื่อ“ความหมายมาร์กอัป” ขึ้นอยู่กับบางสิ่งบางอย่างที่แตกต่างกันอย่างสิ้นเชิงคือ microdata ( itemscopeและคุณลักษณะที่เกี่ยวข้อง) และพวกเขาทำสิ่งนี้เป็นหลักสำหรับเว็บไซต์เชิงพาณิชย์หรือชุมชนขนาดใหญ่

การใช้spanหรือใช้divงานได้ดีกว่า HTML5 novelties อย่างหลังเนื่องจาก IE เวอร์ชันเก่าไม่ได้รับการยอมรับแม้จะมีวัตถุประสงค์ในการออกแบบ ดังนั้นคุณต้องใช้กลอุบายเพื่อให้ "ทำงาน" แม้ในขณะที่องค์ประกอบภาชนะ

อย่างไรก็ตามมีองค์ประกอบ "ความหมาย" บางอย่างที่มีความหมายจริงที่กำหนดโดยเบราว์เซอร์ซอฟต์แวร์ช่วยเหลือหรือเครื่องมือค้นหา การใช้h1หัวข้อหลักเป็นแนวปฏิบัติที่ดีเสมอมาด้วยเหตุผลดังกล่าว การใช้labelสำหรับเลเบลของฟิลด์ฟอร์มมีผลกระทบอย่างแท้จริงต่อการใช้งานและการเข้าถึง และอื่น ๆ ; ดูคู่มือการปฏิบัติเพื่อ HTML: หลักการ

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