หนึ่งในสิ่งที่นักพัฒนาต้องพิจารณาคือการทำให้เว็บไซต์เข้าถึงได้สำหรับผู้ที่ต้องใช้ screen reader HTML ช่วยในเรื่องนี้ด้วยการให้ใช้ semantic elements ในมาร์กอัป บทความนี้ครอบคลุม semantic elements ยอดนิยมสำหรับเว็บพัฒนา
Semantic HTML
เรื่อง 'semantic HTML' สามารถอธิบายได้จากคำว่า 'semantics' ตาม Merriam-Webster semantics คือการศึกษาความหมาย หรือความหมายของเครื่องหมาย ดังนั้น การเขียน semantic HTML คือการสร้างโค้ด HTML ที่บ่งบอกความหมายของแท็กชัดเจน
เราใช้ semantic markup เพื่ออธิบายโครงสร้างหน้าเว็บอย่างมาตรฐาน: ทำให้ screen readers และ voice assistants สแกน HTML elements และคืนข้อมูลที่เกี่ยวข้องให้ผู้ใช้เมื่อร้องขอ
Semantic Elements
เมื่อ HTML5 specification เปิดตัวในปี 2014 มาพร้อม semantic elements เพิ่มเติมเพื่อบ่งบอกโครงสร้างหน้าเว็บให้ดีขึ้น นี่คือแท็กที่ถือว่าเป็น semantic tags:
<header>
Headers เป็น container elements หลักที่ทำหน้าที่เป็น sectional semantic HTML elements ปกติประกอบด้วย logo, <nav> และ <h1> ที่อธิบายเว็บไซต์เอง ปกติ consistent ทุกหน้าในไซต์
<nav>
<nav> ย่อมาจาก navigational element จัดเก็บลิงก์นำผู้ใช้ไปส่วนอื่นของไซต์:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> header { height: 100px; background: lightblue; display: flex; align-items: center; } .logo-container { display: flex; flex-flow: column wrap; justify-content: flex-start; padding: 0px 20px; } h1 { font-size: 1rem; margin: 0; padding: 0; align-self: center; } img { width: 200px; height: 50px; } nav.navigation-links-container { width: calc(100% - 200px); display: flex; justify-content: space-around; } nav.navigation-links-container a { color: black; text-decoration: none; } nav.navigation-links-container a:hover { color: darkgoldenrod; text-decoration: underline; } </style> </head> <body> <header> <div class="logo-container"> <img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/> <h1>Kit Kat Logo</h1> </div> <nav class="navigation-links-container"> <a href="about-us.html">About Us</a> <a href="contact-us.html">Contact Us</a> <a href="services.html">Services</a> <a href="login.html">Login/Register</a> </nav> </header> <script src="script.js"></script> </body> </html>
Navigation elements อาจมีลิงก์, เมนู, และ submenus แต่ elements ไม่สามารถมี <nav> อื่นๆ ภายใน ตัวอย่างมี <img> เป็น placeholder logo และ <nav> มี anchor (<a>) elements ทั้งหมด nested ใน <header>
<main>, <section>, <h2> – <h6>
แท็ก <main> บอกเนื้อหาหลักของไซต์ นอกเหนือจาก <header> เริ่มต้น สามารถมี <section> tags ซึ่งมี <header> และ <h2>–<h6> ของตัวเอง
กฎทั่วไปเกี่ยวกับ heading tags: มี เพียงหนึ่ง <h1> ต่อหน้า ที่ตรงกับ title ของหน้า นอกจากนี้ ไม่ควรใช้ heading หมายเลขสูงกว่า จนกว่าจะใช้หมายเลขต่ำกว่าก่อน แต่สามารถลงจากหมายเลขสูงไปต่ำได้ไม่ตามลำดับ โครงสร้างพื้นฐานของหน้าเว็บควรเป็น:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> header.main-header { height: 100px; background: lightblue; display: flex; align-items: center; } .logo-container { display: flex; flex-flow: column wrap; justify-content: flex-start; padding: 0px 20px; } h1 { font-size: 1rem; margin: 0; padding: 0; align-self: center; } h6 { text-decoration: line-through; } h6.ok { text-decoration: none; } img { width: 200px; height: 50px; } nav.navigation-links-container { width: calc(100% - 200px); display: flex; justify-content: space-around; } nav.navigation-links-container a { color: black; text-decoration: none; } nav.navigation-links-container a:hover { color: darkgoldenrod; text-decoration: underline; } </style> </head> <body> <header class="main-header"> <div class="logo-container"> <img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/> <h1>Kit Kat Logo</h1> </div> <nav class="navigation-links-container"> <a href="about-us.html">About Us</a> <a href="contact-us.html">Contact Us</a> <a href="services.html">Services</a> <a href="login.html">Login/Register</a> </nav> </header> <body> <main> <header> <h2> I'm an h2 -- Semantic Elements -- Describes purpose of main content </h2> </header> <section> <header> <h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content</h3> </header> <div>Content and More stuff and things that pertain to h3 </div> <h4> I'm an h4 -- Even less important heading </h4> <div>More content that pertains to h4</div> </section> <section> <header> <h3> We can go back up to h3 even though we used h4</h3> </header> <div>More stuff and things that pertain to h3 </div> <h6>No h6 until h4 and h5</h6> <h4> This can't be h6, unless h4</h4> <div>More content that pertains to h4</div> <h5> and h5 are used first. </h5> <div>More content that pertains to h5</div> <h6 class="ok">Now h6 can be used!</h6> </section> </main> <footer> </footer> <script src="script.js"></script> </body> </html>
จำไว้ว่าแม้จะใช้ heading tags out-of-order ได้ แต่ไม่ใช่ best practice การมี hierarchy ที่ถูกต้องนำไปสู่ accessibility ที่ดีกว่า
สรุป
มีความเป็นไปได้มากมายสำหรับการใช้ semantic HTML เอกสารอยู่ที่ MDN และ W3C แท็กอื่นๆ ที่อธิบายเจตนาของตัวเองรายการอยู่ที่ทั้งสองไซต์ อย่าลืมเรียนรู้การค้นหาเอกสารและตระหนักว่า HTML processors ใช้ semantics ให้ข้อมูลลำดับชั้นเพิ่มเติมหากจำเป็น
