การมาร์กอัปเนื้อหาทำได้หลายวิธีด้วยองค์ประกอบ HTML กว่า 100 รายการ รวมถึงความสามารถในการสร้างองค์ประกอบที่กำหนดเอง แต่บางวิธี บางวิธีอาจดีกว่าวิธีอื่น โดยเฉพาะเชิงความหมาย
ความหมาย หมายถึง "เกี่ยวข้องกับความหมาย" การเขียน HTML เชิงความหมายหมายถึงการใช้องค์ประกอบ HTML เพื่อจัดโครงสร้างเนื้อหาตามความหมายขององค์ประกอบแต่ละรายการ ไม่ใช่ลักษณะที่ปรากฏ
ชุดข้อมูลนี้ยังไม่ครอบคลุมองค์ประกอบ HTML หลายอย่าง แต่ถึงแม้จะไม่รู้จัก HTML แต่ข้อมูลโค้ด 2 รายการต่อไปนี้ก็แสดงให้เห็นว่ามาร์กอัปเชิงความหมายจะให้บริบทของเนื้อหาได้อย่างไร ทั้งสองแบบจะใช้จำนวนคำแทน ipsum lorem เพื่อประหยัดการเลื่อน ด้วยจินตนาการของคุณเพื่อขยาย "30 คำ" เป็น 30 คำ:
ข้อมูลโค้ดรายการแรกใช้ <div>
และ <span>
ซึ่งเป็นองค์ประกอบ 2 รายการที่ไม่มีค่าความหมาย
<div>
<span>Three words</span>
<div>
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</div>
</div>
<div>
<div>
<div>five words</div>
</div>
<div>
<div>three words</div>
<div>forty-six words</div>
<div>forty-four words</div>
</div>
<div>
<div>seven words</h2>
<div>sixty-eight words</div>
<div>forty-four words</div>
</div>
</div>
<div>
<span>five words</span>
</div>
คุณพอจะเข้าใจถึงความหมายของคำเหล่านั้นไหม ไม่ครับ
เรามาลองเขียนโค้ดนี้ใหม่ด้วยองค์ประกอบเชิงความหมายกัน
<header>
<h1>Three words</h1>
<nav>
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</nav>
</header>
<main>
<header>
<h1>five words</h1>
</header>
<section>
<h2>three words</h2>
<p>forty-six words</p>
<p>forty-four words</p>
</section>
<section>
<h2>seven words</h2>
<p>sixty-eight words</p>
<p>forty-four words</p>
</section>
</main>
<footer>
<p>five words</p>
</footer>
โค้ดบล็อกใดที่อธิบายความหมาย การใช้เพียงองค์ประกอบที่ไม่ใช่ความหมายของ <div>
และ <span>
คุณจึงบอกไม่ได้จริงๆ ว่าเนื้อหาในโค้ดบล็อกแรกแสดงถึงอะไร ตัวอย่างโค้ดที่สองซึ่งมีองค์ประกอบเชิงความหมาย ให้บริบทเพียงพอสำหรับผู้ที่ไม่ใช่ตัวแปลงรหัสในการถอดรหัสวัตถุประสงค์และความหมายโดยที่ไม่เคยพบแท็ก HTML แน่นอนว่าเกมนี้มีบริบทเพียงพอให้นักพัฒนาซอฟต์แวร์เข้าใจโครงร่างของหน้าได้แม้ว่าจะไม่เข้าใจเนื้อหาอย่างเช่นเนื้อหาในภาษาต่างประเทศก็ตาม
ในโค้ดบล็อกที่ 2 เราจะเข้าใจสถาปัตยกรรมได้แม้จะไม่เข้าใจเนื้อหา เนื่องจากองค์ประกอบทางความหมายให้ความหมายและโครงสร้าง คุณจะทราบได้ว่าส่วนหัวแรกคือแบนเนอร์ของเว็บไซต์ โดย <h1>
น่าจะเป็นชื่อเว็บไซต์ ส่วนท้ายคือส่วนท้ายของเว็บไซต์ ข้อความ 5 คำอาจเป็นข้อความลิขสิทธิ์หรือที่อยู่ธุรกิจ
มาร์กอัปที่สื่อความหมายไม่ได้แค่ทำให้นักพัฒนาซอฟต์แวร์อ่านมาร์กอัปได้ง่ายขึ้นเท่านั้น แต่ส่วนใหญ่จะเป็นการทำให้เครื่องมืออัตโนมัติถอดรหัสได้ง่ายๆ ด้วย เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะแสดงให้เห็นด้วยว่าองค์ประกอบเชิงความหมายให้โครงสร้างที่เครื่องอ่านได้ด้วยเช่นกัน
โมเดลออบเจ็กต์การช่วยเหลือพิเศษ (AOM)
ขณะแยกวิเคราะห์เนื้อหาที่ได้รับ เบราว์เซอร์จะสร้างโมเดลออบเจ็กต์เอกสาร (DOM) และโมเดลออบเจ็กต์ CSS (CSSOM) และยังสร้างแผนผังการช่วยเหลือพิเศษอีกด้วย อุปกรณ์อำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ จะใช้ AOM ในการแยกวิเคราะห์และตีความเนื้อหา DOM เป็นโครงสร้างของโหนดทั้งหมดในเอกสาร AOM นั้นเหมือนกับ DOM เวอร์ชันเชิงความหมาย
ลองเปรียบเทียบว่าโครงสร้างเอกสารทั้ง 2 โครงสร้างนี้แสดงผลในแผงความสามารถเข้าถึงได้ง่ายของ Firefox อย่างไร
ในภาพหน้าจอที่ 2 มีบทบาทสำคัญ 4 บทบาทในโค้ดบล็อกที่ 2 โดยใช้จุดสังเกตเชิงความหมายที่ชื่อ <header>
, <main>
, <footer>
และ <nav>
เพื่อความสะดวกสำหรับ "การนำทาง" จุดสังเกตช่วยวางโครงสร้างให้กับเนื้อหาเว็บและช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของเนื้อหาสำคัญได้อย่างง่ายดาย
โปรดทราบว่า <header>
และ <footer>
เป็นจุดสังเกต โดยมีบทบาท banner
และ contentinfo
ตามลำดับ เมื่อไม่ได้ฝังอยู่ในจุดสังเกตอื่นๆ AOM ของ Chrome จะแสดงข้อมูลต่อไปนี้
เมื่อดูเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome คุณจะเห็นความแตกต่างอย่างมากระหว่างโมเดลออบเจ็กต์การช่วยเหลือพิเศษเมื่อใช้องค์ประกอบทางอรรถศาสตร์เทียบกับเมื่อไม่ใช้
เห็นได้ชัดว่าการใช้องค์ประกอบเชิงความหมายช่วยให้มีการช่วยเหลือพิเศษ และการใช้องค์ประกอบที่ไม่ใช่ความหมายจะลดการช่วยเหลือพิเศษ โดยทั่วไปแล้ว HTML สามารถเข้าถึงได้โดยค่าเริ่มต้น งานของเราในฐานะนักพัฒนาซอฟต์แวร์คือการปกป้องลักษณะการเข้าถึงเริ่มต้นของ HTML และดูแลให้เราเพิ่มความสามารถในการเข้าถึงให้ได้มากที่สุด คุณตรวจสอบ AOM ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้
แอตทริบิวต์ role
แอตทริบิวต์ role
อธิบายบทบาทที่องค์ประกอบมีในบริบทของเอกสาร แอตทริบิวต์ role
เป็นแอตทริบิวต์ส่วนกลาง ซึ่งหมายความว่าใช้ได้ในทุกองค์ประกอบ ซึ่งกำหนดโดยข้อกำหนด ARIA แทนที่จะเป็นข้อกำหนด WHATWG HTML ซึ่งมีการระบุเกือบทุกอย่างในชุดนี้
องค์ประกอบเชิงความหมายแต่ละองค์ประกอบมีบทบาทโดยนัย ทั้งนี้ขึ้นอยู่กับบริบท ตามที่เห็นในภาพหน้าจอของเครื่องมือช่วยเหลือพิเศษของ Firefox พบว่า <header>
, <main>
, <footer>
และ <nav>
ระดับบนสุดเป็นจุดสังเกตทั้งหมด ในขณะที่ <header>
ที่ฝังอยู่ใน <main>
เป็นส่วน ภาพหน้าจอของ Chrome แสดงบทบาท ARIA ขององค์ประกอบเหล่านี้ <main>
คือ main
, <nav>
คือ navigation
และ <footer>
เท่ากับส่วนท้ายของเอกสารคือ contentinfo
เมื่อ <header>
เป็นส่วนหัวของเอกสาร บทบาทเริ่มต้นจะเป็น banner
ซึ่งกำหนดส่วนนั้นเป็นส่วนหัวที่ติดทั่วเว็บไซต์ เมื่อ <header>
หรือ <footer>
ฝังอยู่ในองค์ประกอบแบบแยกส่วน จะไม่ใช่บทบาทจุดสังเกต ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ทั้ง 2 ภาพแสดงข้อมูลนี้
ชื่อบทบาทองค์ประกอบมีความสำคัญในการสร้าง AOM ความหมายขององค์ประกอบหรือ "บทบาท" มีความสำคัญต่อเทคโนโลยีความช่วยเหลือพิเศษ และในบางกรณี เครื่องมือค้นหา ผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษอาศัยความหมายในการไปยังส่วนต่างๆ และทำความเข้าใจความหมายของเนื้อหา บทบาทขององค์ประกอบช่วยให้ผู้ใช้เข้าถึงเนื้อหาที่ค้นหาได้อย่างรวดเร็ว และที่สำคัญคือ บทบาทจะแจ้งให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบถึงวิธีโต้ตอบกับองค์ประกอบแบบอินเทอร์แอกทีฟเมื่อได้โฟกัสแล้ว
องค์ประกอบแบบอินเทอร์แอกทีฟ เช่น ปุ่ม ลิงก์ ช่วง และช่องทำเครื่องหมาย ล้วนมีบทบาทโดยนัยและจะเพิ่มลงในลำดับแท็บของแป้นพิมพ์โดยอัตโนมัติ และทั้งหมดรองรับการดำเนินการของผู้ใช้ตามที่คาดหวังไว้เป็นค่าเริ่มต้น บทบาทโดยนัยหรือค่า role
ที่ชัดเจนบอกผู้ใช้ให้ทราบถึงการโต้ตอบของผู้ใช้ตามค่าเริ่มต้นเฉพาะองค์ประกอบ
เมื่อใช้แอตทริบิวต์ role
คุณจะกำหนดบทบาทให้องค์ประกอบใดก็ได้ รวมถึงบทบาทที่ต่างจากบทบาทที่แท็กบอกด้วย ตัวอย่างเช่น <button>
มีบทบาทโดยนัยของ button
เมื่อใช้ role="button"
คุณสามารถเปลี่ยนองค์ประกอบต่างๆ ตามความหมายให้เป็นปุ่มได้: <p role="button">Click Me</p>
แม้ว่าการเพิ่ม role="button"
ลงในองค์ประกอบจะเป็นการแจ้งให้โปรแกรมอ่านหน้าจอทราบว่าองค์ประกอบนั้นเป็นปุ่ม แต่ไม่มีการเปลี่ยนแปลงลักษณะที่ปรากฏหรือฟังก์ชันการทำงานขององค์ประกอบ องค์ประกอบ button
มีฟีเจอร์มากมายโดยที่คุณไม่ต้องทำอะไร ระบบจะเพิ่มองค์ประกอบ button
ลงในลำดับการเรียงแท็บของเอกสารโดยอัตโนมัติ ซึ่งหมายความว่าระบบจะโฟกัสแป้นพิมพ์ได้โดยค่าเริ่มต้น ทั้งแป้น Enter และ Space จะเปิดใช้งานปุ่มดังกล่าว ปุ่มยังมีเมธอดและพร็อพเพอร์ตี้ทั้งหมดที่อินเทอร์เฟซ HTMLButtonElement มีให้อีกด้วย หากไม่ใช้ปุ่มที่สื่อความหมายสำหรับปุ่ม คุณต้องตั้งโปรแกรมฟีเจอร์เหล่านั้นทั้งหมดกลับเข้าไปใหม่ ใช้งาน <button>
ได้ง่ายกว่าที่เคย
กลับไปที่ภาพหน้าจอของ AOM สำหรับบล็อกโค้ดที่ไม่ใช่ความหมาย โปรดทราบว่าองค์ประกอบที่ไม่ใช่ความหมายไม่มีบทบาทโดยนัย เราสามารถทำให้เวอร์ชันที่ไม่ใช่ความหมายตามความหมายด้วยการมอบหมายบทบาทให้แต่ละองค์ประกอบ ดังนี้
<div role="banner">
<span role="heading" aria-level="1">Three words</span>
<div role="navigation">
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</div>
</div>
แม้ว่าคุณจะใช้แอตทริบิวต์ role
เพื่อเพิ่มความหมายให้กับองค์ประกอบใดก็ได้ แต่คุณก็ควรใช้องค์ประกอบที่มีบทบาทโดยนัยที่คุณต้องการแทน
องค์ประกอบเชิงความหมาย
การถามตัวเองว่า "องค์ประกอบใดที่แทนฟังก์ชันของส่วนนี้ของมาร์กอัปได้ดีที่สุด" จะทำให้คุณเลือกองค์ประกอบที่ดีที่สุดสำหรับงาน องค์ประกอบที่คุณเลือกและแท็กที่คุณใช้ควรเหมาะสมกับเนื้อหาที่คุณแสดง เนื่องจากแท็กจะมีความหมายตามความหมาย
ควรใช้ HTML เพื่อจัดโครงสร้างเนื้อหา ไม่ใช่เพื่อกำหนดรูปลักษณ์ของเนื้อหา ลักษณะที่ปรากฏคือขอบเขตของ CSS แม้ว่าองค์ประกอบบางอย่างจะมีการกำหนดให้แสดงในลักษณะใดลักษณะหนึ่ง แต่อย่าใช้องค์ประกอบตามวิธีที่สไตล์ชีตของ User Agent ทำให้องค์ประกอบนั้นปรากฏโดยค่าเริ่มต้น แต่ให้เลือกแต่ละองค์ประกอบตามความหมายและฟังก์ชันการทำงานขององค์ประกอบ การเขียนโค้ด HTML อย่างสมเหตุสมผล มีความหมาย และมีความหมายช่วยให้มั่นใจได้ว่ามีการนำ CSS ไปใช้ตามที่ต้องการ
การเลือกองค์ประกอบที่เหมาะสมกับงานเมื่อคุณเขียนโค้ดทำให้คุณไม่ต้องแปลงโครงสร้างหรือแสดงความคิดเห็น HTML ของคุณ หากคุณนึกถึงการใช้องค์ประกอบที่เหมาะสมสำหรับงาน คุณมักจะเลือกองค์ประกอบที่เหมาะสมสำหรับงาน หากไม่มี คุณก็อาจจะไม่ทำเช่นนั้น เมื่อคุณเข้าใจความหมายของแต่ละองค์ประกอบและรู้ว่าเหตุใดการเลือกองค์ประกอบที่เหมาะสมจึงเป็นสิ่งสำคัญ โดยทั่วไปแล้วคุณจะเลือกได้อย่างถูกต้องโดยไม่ต้องลงแรงมากเพิ่มเติม
ในส่วนถัดไป คุณจะใช้องค์ประกอบเชิงความหมายเพื่อสร้างโครงสร้างเอกสาร
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับ HTML เชิงความหมาย
คุณควรเพิ่ม role="button"
ลงในองค์ประกอบ <button>
เสมอ
<button>
มีบทบาทนี้อยู่แล้ว