html5 semantic tags

ส่วนที่ 1. การจัดโครงสร้างเนื้อหาที่มีแท็กความหมาย HTML5

1.1. โครงสร้าง

• HTML ช่วยให้เราสามารถจัดโครงสร้างเอกสารตามความหมายของเนื้อหา
• div, แท็กตารางใช้เพื่อสร้างโครงสร้างเค้าโครง แต่มันไม่ได้มีความหมาย
• แท็กความหมาย HTML - โครงสร้างของหน้าเว็บเพื่อแสดงความหมายไม่ใช่แค่เลย์เอาต์
• องค์ประกอบโครงสร้าง/การแบ่งส่วนความหมาย HTML ช่วยในการสร้างหน้าเว็บที่อ่านง่ายสามารถเข้าถึงได้และดีกว่าผลลัพธ์ของเครื่องมือค้นหาที่มุ่งเน้นง่ายต่อการปรับเปลี่ยน/อัปเดต
• องค์ประกอบความหมายอธิบายความหมายของทั้งเบราว์เซอร์และนักพัฒนาอย่างชัดเจน

หมายเหตุ : องค์ประกอบความหมาย HTML5 ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด

องค์ประกอบการแบ่งส่วนหัวของ HTML

H1 ถึง H6

องค์ประกอบโครงสร้าง/การแบ่งส่วนความหมาย HTML5

ติดแท็ก	ใช้
<main>	ระบุเนื้อหาหลักของเอกสาร
<header>	ระบุส่วนหัวสำหรับเอกสารหรือส่วนต่างๆ
<nav>	กำหนดลิงก์นำทาง
<section>	กำหนดส่วนในเอกสาร
<article>	กำหนดบทความ
<aside>	กำหนดเนื้อหานอกเหนือจากเนื้อหาหน้า
<footer>	กำหนดส่วนท้ายสำหรับเอกสารหรือส่วน

เหตุใดจึงมีการแนะนำองค์ประกอบโครงสร้าง/การแบ่งส่วนความหมายของ HTML5?

• ก่อนหน้านี้ด้วย HTML, นักพัฒนาที่ใช้/สร้างชื่อ ID/คลาสของตัวเองเป็นองค์ประกอบสไตล์เช่นส่วนหัว, ส่วนท้าย, Nav ด้านบน, Nav ด้านล่าง, เมนูหลัก, NAV - การนำทาง, คอนเทนเนอร์ด้านล่างซ้ายขวาขวา, เนื้อหา, บทความซ้าย, แถบด้านข้างขวา ฯลฯ
• สิ่งนี้ทำให้มันยากและเป็นไปไม่ได้สำหรับเครื่องมือค้นหาในการระบุเนื้อหาหน้าเว็บที่ถูกต้องและเป็นนักพัฒนาไปยังเบราว์เซอร์และแก้ไขเนื้อหา
• ด้วยองค์ประกอบความหมาย/ความหมายของ HTML5 ใหม่เช่น ( <header> <footer> <nav> <section> <article> <aside> ) สิ่งนี้จะง่ายขึ้น
• องค์ประกอบความหมาย/ความหมายของ HTML5 ทำให้หน้าเว็บสามารถอ่านได้มากขึ้นสำหรับเครื่องจักรเช่นเดียวกับผู้ใช้ที่มีความสามารถในการเข้าถึงผลลัพธ์ของเครื่องมือค้นหาที่สอดคล้องและง่ายขึ้น

• ตาม W3C เว็บความหมาย: "อนุญาตให้ใช้ข้อมูลและนำกลับมาใช้ใหม่ในแอปพลิเคชันองค์กรและชุมชน"

การใช้ลำดับชั้นของโครงสร้าง

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

• โดยเฉพาะอย่างยิ่งคุณควร use a single <h1> per page - นี่คือหัวข้อระดับบนสุดและคนอื่น ๆ ทั้งหมดอยู่ด้านล่างนี้ในลำดับชั้น
• ตรวจสอบให้แน่ใจว่าคุณใช้หัวเรื่องตามลำดับที่ถูกต้องในลำดับชั้น อย่าใช้ <h3>s เพื่อเป็นตัวแทนของหัวเรื่องย่อยตามด้วย <h2>s เพื่อแสดงถึงหัวเรื่องย่อย-ซึ่งไม่สมเหตุสมผลและจะนำไปสู่ผลลัพธ์ที่แปลกประหลาด

ทำไมเราต้องการโครงสร้าง?

• ผู้ใช้ที่ดูหน้าเว็บมีแนวโน้มที่จะสแกนอย่างรวดเร็วเพื่อค้นหาเนื้อหาที่เกี่ยวข้อง หากพวกเขาไม่เห็นสิ่งใดที่เป็นประโยชน์ภายในไม่กี่วินาทีพวกเขาอาจจะรู้สึกหงุดหงิดและไปที่อื่น
• เครื่องมือค้นหาดัชนีการจัดทำดัชนีหน้าของคุณพิจารณาเนื้อหาของส่วนหัวเป็นคำหลักที่สำคัญสำหรับการมีอิทธิพลต่อการจัดอันดับการค้นหาของหน้า โดยไม่มีหัวข้อหน้าของคุณจะทำงานได้ไม่ดีในแง่ของ SEO (Search Engine Optimization)
• คนที่มีความบกพร่องทางสายตามักจะไม่อ่านหน้าเว็บ พวกเขาฟังพวกเขาแทน หากไม่มีหัวข้อใดพวกเขาจะถูกบังคับให้ฟังเอกสารทั้งหมดที่อ่านออกมาดัง ๆ

1.2. โครงร่าง

• HTML ใช้องค์ประกอบความหมาย, ส่วนหัว, แท็กความหมายเพื่อสร้าง/อธิบายโครงร่างเอกสารของเนื้อหาหน้า (เอกสารร่าง = หัวข้อ, สารบัญ, ดัชนี)
• โครงร่างเอกสารถูกใช้โดยอุปกรณ์/เบราว์เซอร์ในการสแกนและค้นหาเนื้อหานำทางไปยังส่วนเฉพาะ/เฉพาะเพื่อกำหนดว่าเนื้อหาเกี่ยวข้องกันอย่างไร
• HTML5 Outliner ใช้เพื่อทำความเข้าใจและทราบโครงสร้างหน้าเว็บที่แน่นอนของหน้า HTML หน้า/เอกสาร
• ใช้ยูทิลิตี้นอก: https://gsnedders.html1.org/outliner/
• ตัวแก้ไขข้อความเช่น Brackets ใช้ Document Outliner Plugin/extension เพื่อแสดงเอกสารที่เหมาะสม/สารบัญของเนื้อหา/หัวข้อ/การจัดทำดัชนีของหน้าเว็บ
• วงเล็บ -> ดูเมนูดู -> แสดงโครงร่างเอกสาร

1.3. นาวิก

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

หมายเหตุ : ไม่ใช่กฎที่ลิงก์ทั้งหมดของเอกสารควรอยู่ในไฟล์

องค์ประกอบองค์ประกอบมีไว้สำหรับบล็อกหลักของลิงก์นำทาง

1.4. ส่วน

• แสดงถึงเอกสารทั่วไปหรือส่วนแอปพลิเคชัน
• ที่
  องค์ประกอบกำหนดส่วนในเอกสาร
• HTML
  องค์ประกอบหมายถึงส่วนสแตนด์อโลน

• ตามเอกสาร HTML5 ของ W3C: "ส่วนหนึ่งคือการจัดกลุ่มเนื้อหาเฉพาะเรื่องโดยทั่วไปจะมีส่วนหัว"

• โดยปกติแล้วหน้าเว็บอาจถูกแบ่งออกเป็นส่วนสำหรับการแนะนำเนื้อหาส่วนกลางที่มีส่วนซ้ายและขวา ฯลฯ

1.5. บทความ

• แสดงถึงเนื้อหาที่เป็นอิสระของเอกสารเช่นรายการบล็อกหรือบทความในหนังสือพิมพ์
• องค์ประกอบระบุเนื้อหาที่เป็นอิสระและมีอยู่ในตัวเอง
• องค์ประกอบ HTML แสดงถึงองค์ประกอบที่มีอยู่ในตัวเองในเอกสาร
• แท็ก HTML ใช้ในโพสต์บล็อก/ฟอรัมบทความหนังสือพิมพ์รายการบล็อก ฯลฯ

1.6. นอกเหนือจาก

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

1.7. ส่วนหัว

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

1.8. ส่วนท้าย

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

1.9. กลุ่ม

• แท็ก div เป็นที่รู้จักกันในชื่อ Division, Divider tag
• องค์ประกอบการแบ่งเนื้อหา HTML (
  ) เป็นคอนเทนเนอร์ทั่วไปสำหรับเนื้อหาการไหล
• ก่อนที่จะมีแท็กความหมาย HTML5 แท็ก DIV จะใช้ใน HTML เพื่อสร้างแผนกเนื้อหาในหน้าเว็บเช่น (ข้อความ, รูปภาพ, ส่วนหัว, ส่วนท้าย, แถบนำทาง, ฯลฯ )
• ที่
  แท็กเป็นแท็กคอนเทนเนอร์ที่ว่างเปล่าซึ่งกำหนดส่วนหรือส่วนโดยการระบุองค์ประกอบลูก
• ด้วยแท็กความหมายของ HTML5 Div A แท็กที่ทรงพลังยังใช้สำหรับการจัดโครงสร้างการหารเค้าโครงการแบ่งส่วนหน้า/เนื้อหากับ CSS หรือจัดการกับสคริปต์
• ที่
  แท็กเป็นองค์ประกอบระดับบล็อกดังนั้นจึงมีการพักบรรทัดก่อนและหลัง
• DIV เป็นแท็กที่ใช้งานได้มากที่สุดในการพัฒนาเว็บเพราะช่วยให้เราแยกข้อมูลในหน้าเว็บและเราสามารถสร้างส่วนเฉพาะได้
• มันถูกใช้กับกลุ่มของแท็กต่าง ๆ ของ HTML เพื่อให้สามารถสร้างส่วนและสามารถนำไปใช้กับรูปแบบได้

1.10. Wai-aria

• แอปพลิเคชันอินเทอร์เน็ตที่สามารถเข้าถึงได้ด้วยเว็บ
• มันเป็นชุดของคุณลักษณะที่จะช่วยเพิ่มความหมายของเว็บไซต์หรือเว็บแอปพลิเคชันเพื่อช่วยเทคโนโลยีช่วยเหลือเช่นตัวอ่านหน้าจอสำหรับคนตาบอดทำความเข้าใจกับบางสิ่งที่ไม่ได้มีถิ่นกำเนิดใน HTML
• Aria (Wai-Aria) เป็นชุดของคุณลักษณะที่คุณสามารถเพิ่มลงในองค์ประกอบ HTML คุณลักษณะเหล่านี้สื่อสารถึงบทบาทสถานะและความหมายของทรัพย์สินเพื่อช่วยเหลือเทคโนโลยีผ่าน APIs การเข้าถึงที่ใช้ในเบราว์เซอร์
• ARIA (WAI-ARIA) ให้วิธีที่ดีแก่ผู้ใช้ในการนำทางและโต้ตอบกับเว็บไซต์ของคุณ ทำให้รหัส HTML ของคุณมีความหมายมากที่สุดเพื่อให้รหัสเข้าใจง่ายสำหรับผู้เข้าชมและผู้อ่านหน้าจอ
• Wai-aria เป็นเทคโนโลยีที่ทรงพลังอย่างไม่น่าเชื่อที่ช่วยให้นักพัฒนาสามารถอธิบายวัตถุประสงค์สถานะและฟังก์ชั่นอื่น ๆ ของอินเทอร์เฟซผู้ใช้ที่มีสายตาได้อย่างง่ายดาย
• บทบาทสถานที่สำคัญ (ผู้อ่านหน้าจอและอุปกรณ์อื่น ๆ สแกนและข้ามไปยังบทบาทที่ต้องการ)

    - <header role="banner">
    - <nav role="navigation">
    - <main role="main">
    - <article role="article">
    - <footer role="footer">
    - <aside role="complementary">
    - <footer role="contentinfo">

1.11. เว็บไซต์ / บล็อก

• https://www.w3schools.com/html/html_accessibility.asp
• https://www.w3.org/wai/standards-guidelines/aria/
• https://www.w3.org/tr/wai-aria/
• https://developer.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/