หัวข้อ 2: Tag พื้นฐาน

แนวคิดหลัก

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

Heading: <h1> ถึง <h6>

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

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

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

1. ใช้ <h1> เป็นหัวข้อหลักของหน้า
2. ใช้ <h2> สำหรับหัวข้อรอง
3. ไม่ควรข้ามลำดับหัวข้อโดยไม่มีเหตุผล เช่น จาก <h1> ไป <h4>
4. อย่าใช้ heading เพียงเพราะต้องการตัวอักษรใหญ่ ควรใช้ CSS จัดรูปแบบแทน

Paragraph: <p>

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

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

HTML จะยุบช่องว่างหลายช่องให้เหลือช่องเดียว หากต้องการจัดระยะห่างควรใช้ CSS เช่น margin, line-height หรือ padding

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

List

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

Unordered List

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

Ordered List

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

Description List

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

Link: <a>

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

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

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

Image: <img>

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

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

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

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

กิจกรรม

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

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

1. ทำไมไม่ควรใช้ <h1> หลายอันโดยไม่จำเป็น
2. ถ้าต้องการจัดช่องว่างระหว่างย่อหน้า ควรใช้ HTML หรือ CSS
3. <ul> และ <ol> ต่างกันอย่างไร
4. ทำไมลิงก์ target="_blank" ควรมี rel="noopener noreferrer"
5. alt ของ <img> สำคัญอย่างไร

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