Basic Content Tags

1. หัวข้อนี้คืออะไร

ลิงก์ (Link) คือสิ่งที่ใช้เชื่อมหน้าเว็บหรือทรัพยากรต่าง ๆ เข้าหากัน ใน HTML เราสร้างลิงก์ด้วยแท็ก a (Anchor) และใส่ปลายทาง (Destination) ผ่านแอตทริบิวต์ (Attribute) เอชเรฟ (href) ลิงก์พาผู้ใช้ไปได้หลายแบบ: - ไปหน้าอื่นในเว็บไซต์เดียวกัน - ไปเว็บไซต์ภายนอก - ไปยังส่วนหนึ่งของหน้าเดียวกัน

2. ทำไมหัวข้อนี้สำคัญ

• ลิงก์เป็นหัวใจของการนำทาง (Navigation) บนเว็บ
• ถ้าไม่มีลิงก์ ผู้ใช้จะย้ายจากข้อมูลหนึ่งไปอีกข้อมูลหนึ่งได้ยากมาก
• ลิงก์ที่เขียนชัดเจนช่วยให้ผู้ใช้เข้าใจว่าจะไปไหนก่อนคลิก
• โครงสร้างลิงก์ที่ดีช่วยทั้งการใช้งานจริงและการเข้าถึง (Accessibility)

3. ตัวอย่างจากชีวิตจริง

ลองนึกถึงห้างสรรพสินค้าที่มีป้ายบอกทางและประตูเชื่อมห้องต่าง ๆ ข้อความบนป้ายบอกว่า "ไปโซนอาหาร" คือข้อความลิงก์ ประตูที่พาเราไปโซนอาหารจริง ๆ คือปลายทาง (Destination) บนเว็บก็เหมือนกัน: - ข้อความที่คลิกได้ คือข้อความลิงก์ - ค่า href คือข้อมูลที่บอกว่าจะพาไปที่ไหน

4. แนวคิดหลักที่ต้องเข้าใจ

• แท็ก a (Anchor) ใช้สร้างลิงก์
• href คือข้อมูลปลายทางที่สำคัญที่สุดของลิงก์
• ลิงก์แบบแอบโซลูต (Absolute URL) เช่น https://example.com ใช้เมื่อจะไปโดเมนเต็ม
• ลิงก์แบบรีเลทีฟ (Relative URL) เช่น /learn/html ใช้เมื่อไปหน้าภายในโปรเจกต์เดียวกัน
• target="_blank" ใช้เปิดแท็บใหม่ได้ แต่ควรใช้อย่างระมัดระวังและใส่ rel="noopener noreferrer"
• ข้อความลิงก์ควรสื่อความหมาย เช่น "อ่านคู่มือ HTML" แทนคำกว้าง ๆ เช่น "กดที่นี่"

5. การทำงานทีละขั้นตอน

• 1) สร้างแท็ก a
• 2) ใส่ข้อความลิงก์ที่บอกจุดหมายได้ชัด
• 3) กำหนด href เป็นปลายทางที่ถูกต้อง
• 4) เบราว์เซอร์ (Browser) ทำให้องค์ประกอบนี้คลิกได้
• 5) เมื่อผู้ใช้คลิก ระบบจะนำทางไปยังปลายทางตามค่า href

6. ตัวอย่างเชิงเทคนิค / โค้ด

ตัวอย่างพื้นฐานที่ใช้บ่อยที่สุดมี 3 แบบ: ลิงก์ภายนอก, ลิงก์ภายในโปรเจกต์, และลิงก์ภายในหน้าเดียวกัน

<!-- 1) ลิงก์ไปเว็บไซต์ภายนอก (Absolute URL) -->
<a
  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
  target="_blank"
  rel="noopener noreferrer"
>
  อ่านเอกสารแท็ก a (Anchor) บน MDN
</a>

<!-- 2) ลิงก์ไปหน้าอื่นในโปรเจกต์ (Relative URL) -->
<a href="/learn/html/basic-content-tags/images">
  ไปบทถัดไป: รูปภาพ (Images)
</a>

<!-- 3) ลิงก์ไปยังส่วนหนึ่งของหน้าเดียวกัน -->
<a href="#faq">ข้ามไปส่วนคำถามที่พบบ่อย</a>

<section id="faq">
  <h2>คำถามที่พบบ่อย</h2>
  <p>เนื้อหาส่วนนี้จะถูกเลื่อนไปเมื่อคลิกลิงก์ด้านบน</p>
</section>

7. จุดที่ผู้เริ่มต้นมักสับสน

• ลืมใส่ href ทำให้ลิงก์ไม่มีปลายทางจริง
• ใช้ข้อความลิงก์ไม่สื่อความหมาย เช่น "กดที่นี่" อย่างเดียว
• สับสนระหว่าง Absolute URL กับ Relative URL
• ใช้ target="_blank" แต่ไม่เข้าใจผลด้านประสบการณ์และความปลอดภัย
• คิดว่าแท็ก a ใช้ได้กับข้อความเท่านั้น ทั้งที่ครอบองค์ประกอบอื่นได้เมื่อใช้ในบริบทที่เหมาะสม

8. เปรียบเทียบกับสิ่งที่ใกล้เคียง

9. สรุปท้ายบทแบบจำง่าย

• แท็ก a ใช้เพื่อเชื่อมไปยังปลายทาง (Destination)
• href คือข้อมูลที่สำคัญที่สุดของลิงก์
• เลือก Absolute หรือ Relative ให้เหมาะกับปลายทาง
• ข้อความลิงก์ควรสื่อความหมายชัดเจน
• ใช้ target="_blank" อย่างระมัดระวัง และควรใส่ rel="noopener noreferrer"

10. Lab 1: สร้างลิงก์พื้นฐาน

ชื่อ Lab: ลิงก์แรกของฉัน เป้าหมาย: สร้างลิงก์พื้นฐานที่มีปลายทางชัดเจน โจทย์: ใน <main> ให้สร้างลิงก์ 1 ตัวด้วย id="start-link" ข้อความ "เริ่มเรียน HTML" และ href="/learn/html/fundamentals/what-is-html" เงื่อนไข: ต้องมีลิงก์ตาม id ที่กำหนด และข้อความต้องตรง สิ่งที่ระบบควรตรวจ: selector exists + text content + attribute value แนวทางการคิด: สร้างแท็ก a ก่อน แล้วเติมข้อความและค่า href ให้ตรงตามโจทย์ เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 2: สร้างลิงก์ภายในและภายนอก

ชื่อ Lab: ลิงก์สองแบบที่ต้องใช้บ่อย เป้าหมาย: แยกการใช้งานลิงก์ภายในเว็บกับลิงก์ภายนอกเว็บ โจทย์: สร้างลิงก์ 2 ตัวภายใน section#resource-links - ลิงก์ที่ 1 id="internal-link" ข้อความ "ไปบท CSS" href="/learn/css" - ลิงก์ที่ 2 id="external-link" ข้อความ "อ่านคู่มือ MDN" href="https://developer.mozilla.org/" เงื่อนไข: ต้องมีลิงก์ครบ 2 ตัว และ href ของแต่ละตัวต้องตรง สิ่งที่ระบบควรตรวจ: selector count + attribute value + browser runtime แนวทางการคิด: กำหนด id ให้ชัดก่อน แล้วใส่ href ตามประเภทลิงก์ เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 3: แก้ลิงก์ที่เขียนผิด

ชื่อ Lab: ซ่อมลิงก์ให้พาไปปลายทางถูกต้อง เป้าหมาย: แก้โค้ดลิงก์ที่ขาด href และข้อความไม่ตรงโจทย์ โจทย์: แก้ลิงก์ใน nav ให้เป็นดังนี้: - a#guide-link ข้อความ "คู่มือผู้เริ่มต้น" href="/learn/html/fundamentals/what-is-html" - a#support-link ข้อความ "ติดต่อทีมสอน" href="/support" เงื่อนไข: ต้องคง id เดิมไว้ และมีลิงก์ทั้งหมด 2 ตัว สิ่งที่ระบบควรตรวจ: source text + attribute value + text content + browser runtime แนวทางการคิด: ตรวจ id เดิมก่อน จากนั้นแก้ข้อความและ href ทีละลิงก์ เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 4: สร้างลิงก์พื้นฐานในบทความ

ชื่อ Lab: เพิ่มลิงก์อ่านต่อในบทความ เป้าหมาย: ใช้ a tag สร้างลิงก์พื้นฐานพร้อมข้อความและ href ที่ถูกต้อง โจทย์: ใน article ให้เพิ่มลิงก์ 1 ตัว โดยต้องเป็น a#read-more ข้อความ "อ่านบทเรียนถัดไป" และ href="/learn/html/links-and-images" เงื่อนไข: ต้องมีลิงก์ภายใน article จำนวน 1 ตัว และต้องคง id ที่กำหนดไว้ สิ่งที่ระบบควรตรวจ: selector exists + attribute value + text content + browser runtime แนวทางการคิด: เริ่มจากสร้าง a พร้อม id ก่อน แล้วค่อยเติมข้อความและ href ให้ตรงตามโจทย์ เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 5: เพิ่มลิงก์หลายตัวในเมนูการเรียนรู้

ชื่อ Lab: เมนูลิงก์สำหรับหน้าเรียน เป้าหมาย: สร้างลิงก์หลายตัวใน nav ให้ข้อความและปลายทางถูกต้อง โจทย์: ใน nav.learning-nav ให้เพิ่มลิงก์ 3 ตัวตามนี้: - a#intro-link ข้อความ "บทนำ HTML" href="/learn/html/introduction" - a#tags-link ข้อความ "รู้จักแท็กพื้นฐาน" href="/learn/html/basic-tags" - a#practice-link ข้อความ "ไปที่แบบฝึกหัด" href="/practice/html" เงื่อนไข: ต้องมีลิงก์ทั้งหมด 3 ตัว และลำดับใน DOM ต้องตรงตามโจทย์ สิ่งที่ระบบควรตรวจ: selector count + source text + attribute value + browser runtime แนวทางการคิด: สร้างทีละลิงก์ตามลำดับที่กำหนด และตรวจ id, ข้อความ, href ให้ครบทุกตัว เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 6: ซ่อมลิงก์ที่ปลายทางและข้อความสลับกัน

ชื่อ Lab: แก้ลิงก์ที่สลับข้อความกับปลายทาง เป้าหมาย: ซ่อม a tag ที่มีข้อความถูกบางส่วน แต่ href และลำดับยังผิด โจทย์: แก้ลิงก์ใน section.quick-links ให้เป็นดังนี้: - a#docs-link ข้อความ "เอกสาร HTML" href="/docs/html" - a#faq-link ข้อความ "คำถามที่พบบ่อย" href="/faq" เงื่อนไข: ต้องคง id เดิมไว้, ต้องมีลิงก์ทั้งหมด 2 ตัว, และต้องไม่มี href="/help" เหลืออยู่ สิ่งที่ระบบควรตรวจ: selector count + source text + attribute value + browser runtime แนวทางการคิด: เริ่มจากหาแต่ละ id ให้เจอ แล้วแก้ข้อความกับ href ให้ตรงตามโจทย์ทีละตัว เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check