reveal.js

# Tag พื้นฐาน

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

---

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

Tag พื้นฐานใช้จัดเนื้อหาให้มีความหมาย เช่น หัวข้อ ย่อหน้า รายการ ลิงก์ และรูปภาพ การเลือก tag ที่ถูกต้องช่วยให้เว็บอ่านง่าย ดูแลต่อได้ง่าย และเป็นมิตรกับ accessibility/SEO

---

## Heading

Heading ใช้กำหนดลำดับชั้นความสำคัญของหัวข้อ

```html
<h1>การโปรแกรมบนเว็บ</h1>
<h2>บทที่ 1 HTML</h2>
<h3>โครงสร้างเอกสาร</h3>
```

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

- ใช้ `<h1>` เป็นหัวข้อหลักของหน้า
- ใช้ `<h2>` สำหรับหัวข้อรอง
- ไม่ข้ามลำดับหัวข้อโดยไม่มีเหตุผล

---

## Paragraph

`<p>` ใช้สำหรับย่อหน้าข้อความ

```html
<p>HTML เป็นภาษาสำหรับกำหนดโครงสร้างของหน้าเว็บ</p>
```

HTML จะยุบช่องว่างหลายช่องให้เหลือช่องเดียว หากต้องการจัดระยะห่างควรใช้ CSS

```css
p {
  line-height: 1.7;
  margin-bottom: 1rem;
}
```

---

## List

รายการช่วยจัดข้อมูลให้อ่านง่าย

```html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol>
  <li>เปิด editor</li>
  <li>สร้างไฟล์ index.html</li>
  <li>เขียนโครงสร้าง HTML</li>
</ol>
```

---

## Description List

ใช้กับรายการแบบคำศัพท์และคำอธิบาย

```html
<dl>
  <dt>HTML</dt>
  <dd>ภาษาสำหรับกำหนดโครงสร้างหน้าเว็บ</dd>
  <dt>CSS</dt>
  <dd>ภาษาสำหรับจัดรูปแบบหน้าเว็บ</dd>
</dl>
```

---

## Link

ลิงก์ใช้เชื่อมไปยังหน้าอื่น ตำแหน่งในหน้าเดียวกัน ไฟล์ หรือเว็บไซต์ภายนอก

```html
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>
```

เมื่อใช้ `target="_blank"` ควรใส่ `rel="noopener noreferrer"` เพื่อลดความเสี่ยงด้านความปลอดภัยและ privacy

---

## Image

รูปภาพควรมี `alt` เพื่อบอกความหมายของรูปให้ screen reader และเป็นข้อความสำรองเมื่อโหลดรูปไม่ได้

```html
<img
  src="course-cover.jpg"
  alt="นักศึกษากำลังเรียนเขียนเว็บ"
  width="800"
  height="450"
  loading="lazy">
```

---

## แนวทางใช้รูปภาพ

- ใส่ `alt` ที่สื่อความหมาย
- ใส่ `width` และ `height` เพื่อลด layout shift
- ใช้ `loading="lazy"` กับรูปที่ไม่ได้อยู่ส่วนแรกของหน้า
- ปรับขนาดไฟล์ภาพให้เหมาะกับเว็บ

---

## กิจกรรม

สร้างหน้า HTML ที่มีหัวข้อ 3 ระดับ ย่อหน้า 2 ย่อหน้า รายการแบบ `ul`, `ol`, `dl` ลิงก์ภายนอก และรูปภาพที่มี `alt`

---

## จบบทเรียน

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