reveal.js

# Semantic HTML

หัวข้อ 3 · HTML โครงสร้างเอกสารและมาร์คอัพ

---

## แนวคิดหลัก

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

---

## ทำไม Semantic HTML สำคัญ

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

---

## `<header>` และ `<nav>`

`<header>` ใช้แทนส่วนหัวของหน้าหรือ section

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

`<nav>` ใช้สำหรับเมนูนำทาง

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

---

## `<main>`

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

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

ช่วยให้ผู้ใช้และ assistive technology ข้ามไปยังเนื้อหาหลักได้ง่าย

---

## `<section>` และ `<article>`

`<section>` ใช้จัดกลุ่มเนื้อหาที่มีหัวข้อร่วมกัน

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

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

---

## `<aside>` และ `<footer>`

`<aside>` ใช้กับเนื้อหาเสริม เช่น sidebar หรือบทเรียนที่เกี่ยวข้อง

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

`<footer>` ใช้สำหรับส่วนท้ายของหน้าหรือ section

---

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

```html
<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>
```

---

## กิจกรรม

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

---

## จบบทเรียน

<a href="/web-programming/02-html-markup/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>