Frontend Academy · บทเรียน

HTML เชิงความหมายในฐานะรากฐาน

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

HTML เชิงความหมายในฐานะรากฐาน เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

HTML เชิงความหมายช่วยให้เข้าถึงได้โดยไม่ต้องเพิ่มอะไร

การใช้องค์ประกอบ HTML ที่เหมาะสมช่วยให้มีการรองรับแป้นพิมพ์ การประกาศโดยโปรแกรมอ่านหน้าจอ และบทบาท ARIA ที่ถูกต้องโดยอัตโนมัติ ปัญหาด้านการเข้าถึงส่วนใหญ่มาจากการใช้ div ร่วมกับ JavaScript แทนที่จะใช้องค์ประกอบดั้งเดิม

ปุ่มเทียบกับองค์ประกอบแบ่งส่วนที่ใช้ onClick

<button> สามารถรับ focus ได้ โปรแกรมอ่านหน้าจอจะประกาศว่า “ปุ่ม” ทำงานเมื่อกดแป้นเอนเทอร์หรือสเปซ และทำงานร่วมกับการส่งแบบฟอร์มได้ ส่วน <div onClick> ไม่มีคุณสมบัติเหล่านี้

<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>

<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>

ใช้ปุ่มสำหรับการทำงาน ใช้ลิงก์สำหรับการนำทาง

หากการทำงานนำทางไปยังที่อยู่เว็บ ให้ใช้ <a href> หากการทำงานเปลี่ยนแปลงบางอย่างบนหน้า ให้ใช้ <button> อย่าใช้จุดยึดเป็นปุ่ม (ไม่มี href และมีเพียง onclick) เพราะจะทำให้เทคโนโลยีสิ่งอำนวยความสะดวกสับสน

หัวข้อช่วยสร้างโครงร่างเอกสาร

ใช้ h1-h6 ตามลำดับเพื่อสร้างโครงร่างที่เป็นเหตุเป็นผล ผู้ใช้โปรแกรมอ่านหน้าจอจะนำทางผ่านหัวข้อต่าง ๆ การข้ามระดับหัวข้อจะทำให้เกิดช่วงที่ขาดหายและสร้างความสับสน

<h1>Article Title</h1>
  <h2>Section One</h2>
    <h3>Subsection</h3>
  <h2>Section Two</h2>

<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>

องค์ประกอบระบุส่วนสำคัญ

องค์ประกอบระบุส่วนสำคัญของ HTML5 (header, nav, main, aside, footer) ช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอกระโดดไปมาระหว่างภูมิภาคหลักได้ แต่ละหน้าควรมี <main> เพียงหนึ่งรายการ

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <h1>Page Title</h1>
  <article>...</article>
  <aside>Sidebar</aside>
</main>
<footer>...</footer>

องค์ประกอบรายการ

ใช้ <ul> สำหรับรายการที่ไม่เรียงลำดับ ใช้ <ol> สำหรับรายการที่เรียงลำดับ และใช้ <dl> สำหรับรายการคำจำกัดความ โปรแกรมอ่านหน้าจอจะประกาศว่า “รายการจำนวน N รายการ” ซึ่งเป็นข้อมูลช่วยนำทางที่มีประโยชน์

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->

แบบฟอร์ม: ใส่ป้ายกำกับให้ input ทุกตัว

input ทุกตัวต้องมี <label> ที่เชื่อมโยงกัน คู่ for/id จะเชื่อมองค์ประกอบทั้งสองเข้าด้วยกัน เมื่อคลิกป้ายกำกับ focus จะย้ายไปยัง input และโปรแกรมอ่านหน้าจอจะประกาศป้ายกำกับเมื่อ input ได้รับ focus

<label for="email">Email</label>
<input id="email" name="email" type="email">

<!-- Or wrap (no for/id needed): -->
<label>
  Email
  <input name="email" type="email">
</label>

ชุดช่องข้อมูลและคำอธิบายสำหรับกลุ่ม

จัดกลุ่ม input ที่เกี่ยวข้องกัน (เช่น ปุ่มตัวเลือก) ด้วย <fieldset> + <legend> โปรแกรมอ่านหน้าจอจะประกาศคำอธิบายกลุ่มทุกครั้งที่ input สมาชิกได้รับ focus

<fieldset>
  <legend>Choose a plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

องค์ประกอบตารางสำหรับข้อมูลแบบตาราง

ใช้ <table> ร่วมกับ <thead>, <tbody> และ <th scope="col"> อย่าใช้ตารางเพื่อจัดวางหน้า โปรแกรมอ่านหน้าจอจะนำทางเซลล์แบบสองมิติและประกาศหัวตาราง

article, section และ figure

<article>: เนื้อหาที่อยู่ได้ด้วยตัวเอง (โพสต์บล็อก ความคิดเห็น) <section>: การจัดกลุ่มตามหัวข้อพร้อมหัวเรื่อง <figure> + <figcaption>: สื่อพร้อมคำบรรยาย

ใช้ ARIA เท่าที่จำเป็น

กฎข้อแรกของ ARIA คืออย่าใช้ ARIA หากมีองค์ประกอบ HTML ดั้งเดิมที่เหมาะสม ให้ใช้องค์ประกอบนั้น ใช้ ARIA เฉพาะเมื่อไม่มีองค์ประกอบเชิงความหมายที่เหมาะกับวิดเจ็ตแบบกำหนดเอง เช่น กล่องคำสั่งผสม แท็บ หรือแผนผัง

ตรวจสอบความเข้าใจ

เหตุใดจึงควรใช้ <button onclick="..."> แทน <div onclick="...">?

ทบทวน: HTML เชิงความหมาย

ใช้องค์ประกอบให้ถูกต้อง: ปุ่มสำหรับการทำงาน ลิงก์สำหรับการนำทาง h1-h6 ตามลำดับเพื่อสร้างโครงร่าง องค์ประกอบระบุส่วนสำคัญ (header, nav, main, footer) ul/ol สำหรับรายการ label สำหรับ input ทุกตัว fieldset/legend สำหรับกลุ่มปุ่มตัวเลือก และ table สำหรับตารางข้อมูล HTML ดั้งเดิมช่วยให้เข้าถึงได้โดยไม่ต้องเพิ่มอะไร ส่วน ARIA ควรเป็นทางเลือกสุดท้าย

คำถามที่พบบ่อย

บทเรียน “HTML เชิงความหมายในฐานะรากฐาน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “HTML เชิงความหมายในฐานะรากฐาน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “HTML เชิงความหมายในฐานะรากฐาน”

ใช้องค์ประกอบ HTML ดั้งเดิม เช่น button, nav และ heading เพื่อรับความสามารถในการเข้าถึงที่มีมาให้โดยไม่ต้องทำเพิ่ม ก่อนเลือกใช้ ARIA คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “HTML เชิงความหมายในฐานะรากฐาน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy