HTML เชิงความหมาย

การมาร์กอัปเนื้อหาทำได้หลายวิธีด้วยองค์ประกอบ 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

ในภาพหน้าจอที่ 2 มีบทบาทสำคัญ 4 บทบาทในโค้ดบล็อกที่ 2 โดยใช้จุดสังเกตเชิงความหมายที่ชื่อ <header>, <main>, <footer> และ <nav> เพื่อความสะดวกสำหรับ "การนำทาง" จุดสังเกตช่วยวางโครงสร้างให้กับเนื้อหาเว็บและช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของเนื้อหาสำคัญได้อย่างง่ายดาย

โปรดทราบว่า <header> และ <footer> เป็นจุดสังเกต โดยมีบทบาท banner และ contentinfo ตามลำดับ เมื่อไม่ได้ฝังอยู่ในจุดสังเกตอื่นๆ AOM ของ Chrome จะแสดงข้อมูลต่อไปนี้

ข้อมูลโค้ดรายการแรก

ข้อมูลโค้ดที่ 2

เมื่อดูเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ 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> มีบทบาทนี้อยู่แล้ว

จริง

โปรดลองอีกครั้ง