หัวข้อ 3: Semantic HTML

แนวคิดหลัก

Semantic HTML คือการใช้ tag ที่บอกความหมายของเนื้อหา ไม่ใช่เพียงจัดกล่องแสดงผล เช่น ใช้ <nav> สำหรับเมนู ใช้ <article> สำหรับบทความ และใช้ <footer> สำหรับส่วนท้าย การใช้ semantic tag ช่วยทั้ง SEO, accessibility และการดูแลโค้ด

ประโยชน์ต่อ SEO และ Screen Reader

Semantic tags ช่วยให้ search engine และ screen reader เข้าใจโครงสร้างของหน้าเว็บได้ดีขึ้น เช่น รู้ว่าส่วนใดเป็นเมนู ส่วนใดเป็นเนื้อหาหลัก และส่วนใดเป็นบทความ

ประโยชน์หลัก:

  1. โครงสร้างเอกสารชัดเจน
  2. Screen reader นำทางได้ง่าย
  3. Search engine เข้าใจเนื้อหาดีขึ้น
  4. นักพัฒนาอ่านโค้ดแล้วเข้าใจเร็วขึ้น

ใช้แทนส่วนหัวของหน้าหรือ section อาจมีโลโก้ ชื่อเว็บไซต์ heading หรือเมนูย่อย

<header>
  <h1>CAI Online</h1>
  <p>ศูนย์รวมบทเรียนออนไลน์</p>
</header>

ใช้สำหรับเมนูนำทางหลักของเว็บไซต์หรือหน้า

<nav aria-label="เมนูหลัก">
  <a href="/">หน้าแรก</a>
  <a href="/courses">รายวิชา</a>
  <a href="/contact">ติดต่อ</a>
</nav>

<main>

ใช้แทนเนื้อหาหลักของหน้า ควรมีเพียง 1 อันต่อหน้า

<main>
  <h1>บทเรียน HTML</h1>
  <p>เนื้อหาหลักของบทเรียนอยู่ในส่วนนี้</p>
</main>

<section>

ใช้จัดกลุ่มเนื้อหาที่มีหัวข้อร่วมกัน ควรมี heading ภายใน section

<section>
  <h2>ผลลัพธ์การเรียนรู้</h2>
  <ul>
    <li>เข้าใจ semantic HTML</li>
  </ul>
</section>

<article>

ใช้กับเนื้อหาที่สมบูรณ์ในตัวเอง เช่น บทความ ข่าว โพสต์ หรือ card ของบทเรียน

<article>
  <h2>HTML คืออะไร</h2>
  <p>HTML ใช้กำหนดโครงสร้างหน้าเว็บ</p>
</article>

<aside>

ใช้กับเนื้อหาเสริม เช่น sidebar, กล่องแนะนำบทเรียน, โฆษณา หรือข้อมูลที่เกี่ยวข้องแต่ไม่ใช่เนื้อหาหลัก

<aside>
  <h2>บทเรียนที่เกี่ยวข้อง</h2>
  <a href="/css">CSS เบื้องต้น</a>
</aside>

ใช้สำหรับส่วนท้ายของหน้าหรือ section เช่น copyright, contact, link สำคัญ

<footer>
  <p>&copy; 2026 CAI Online</p>
</footer>

ตัวอย่างโครงสร้างหน้า

<header>
  <h1>Web Programming</h1>
</header>
<nav aria-label="เมนูบทเรียน">
  <a href="#overview">ภาพรวม</a>
  <a href="#lesson">บทเรียน</a>
</nav>
<main>
  <section id="overview">
    <h2>ภาพรวม</h2>
    <p>เรียนรู้พื้นฐาน HTML</p>
  </section>
  <article id="lesson">
    <h2>Semantic HTML</h2>
    <p>ใช้ tag ให้ตรงความหมาย</p>
  </article>
</main>
<footer>
  <p>กลับหน้าแรก</p>
</footer>

กิจกรรม

นำหน้า HTML ที่เคยใช้ <div> ทั้งหมดมาแก้ให้เป็น semantic HTML อย่างน้อย 5 tag

แบบทดสอบหลังเรียน

  1. Semantic HTML คืออะไร
  2. <main> ควรมีกี่อันต่อหน้า
  3. <section> และ <article> ต่างกันอย่างไร
  4. <aside> เหมาะกับเนื้อหาแบบใด
  5. Semantic HTML ช่วย screen reader อย่างไร

กลับสัปดาห์ที่ 2