reveal.js

# Attribute พิเศษ

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

---

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

Attribute ช่วยเพิ่มข้อมูลหรือพฤติกรรมให้ element บางตัวใช้เลือก element ด้วย CSS/JavaScript บางตัวใช้เก็บข้อมูล และบางตัวช่วยให้ผู้ใช้ที่ใช้ assistive technology เข้าถึงเว็บได้ดีขึ้น

---

## `id`

`id` เป็นตัวระบุเฉพาะต่อหน้า ไม่ควรซ้ำกันในเอกสารเดียวกัน

```html
<section id="overview">
  <h2>ภาพรวม</h2>
</section>
```

ใช้กับ CSS, JavaScript และ anchor link ได้

```css
#overview {
  padding: 20px;
}
```

---

## `class`

`class` เป็นตัวระบุที่ใช้ซ้ำได้ เหมาะกับการจัดกลุ่ม style หรือเลือก element หลายตัว

```html
<article class="course-card featured">
  <h2>HTML</h2>
</article>
```

```css
.course-card {
  border: 1px solid #ddd;
}
```

---

## `data-*`

Custom attribute สำหรับเก็บข้อมูลใน HTML โดยไม่ทำให้ HTML ผิดมาตรฐาน

```html
<button data-id="5" data-action="delete">ลบรายการ</button>
```

```js
const button = document.querySelector("button");
console.log(button.dataset.id);
console.log(button.dataset.action);
```

เหมาะกับ id, state หรือข้อมูลเล็ก ๆ ที่ JavaScript ต้องอ่านจาก element

---

## ARIA Attributes

ARIA ช่วยเพิ่ม accessibility เมื่อ semantic HTML อย่างเดียวไม่พอ

```html
<button aria-label="ปิดหน้าต่าง">X</button>
```

```html
<span aria-hidden="true">★</span>
```

```html
<button aria-expanded="false" aria-controls="menu">เมนู</button>
<nav id="menu">...</nav>
```

---

## `tabindex`

ใช้กำหนดลำดับการ focus ด้วยแป้น Tab

```html
<button tabindex="0">ปุ่มปกติ</button>
<div tabindex="0">กล่องที่ focus ได้</div>
```

แนวทางที่ดี:

- ใช้ `tabindex="0"` เพื่อเข้า flow การ tab ตามธรรมชาติ
- หลีกเลี่ยงค่าบวก เพราะทำให้ลำดับ focus สับสน
- ใช้ `tabindex="-1"` เมื่อต้องการ focus ด้วย JavaScript

---

## เปรียบเทียบ `id` และ `class`

| Attribute | ใช้ซ้ำได้ไหม | ใช้กับ |
|---|---|---|
| id | ไม่ควรซ้ำ | element เฉพาะตัว, anchor, JS |
| class | ใช้ซ้ำได้ | style หลาย element, grouping |

---

## กิจกรรม

สร้างรายการบทเรียน 5 รายการ โดยแต่ละรายการมี `class="lesson-card"` และ `data-id` ต่างกัน จากนั้นเพิ่มปุ่ม dropdown ที่มี `aria-expanded`

---

## จบบทเรียน

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