Basic Content Tags

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

แท็ก br ใช้สำหรับการขึ้นบรรทัดใหม่ (Line Break) ภายในข้อความเดียวกัน แท็ก hr ใช้สำหรับเส้นคั่นแนวนอน (Horizontal Rule) เพื่อแบ่งช่วงเนื้อหาที่เปลี่ยนหัวข้อหรือเปลี่ยนประเด็น สรุปสั้น ๆ: - br = ขึ้นบรรทัดใหม่ - hr = คั่นช่วงเนื้อหา

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

• ช่วยจัดการการแสดงผลข้อความเฉพาะกรณี เช่น ที่อยู่หรือบทกวี
• ช่วยแบ่งเนื้อหาเป็นช่วงแบบง่ายด้วยเส้นคั่น
• ทำให้หน้าอ่านง่ายขึ้นเมื่อใช้อย่างพอดี
• ลดการใช้แท็กผิดหน้าที่ เช่น ใช้ br ซ้ำแทนย่อหน้า

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

ลองเทียบกับงานเอกสารทั่วไป: - br เหมือนการขึ้นบรรทัดใหม่เวลาพิมพ์ที่อยู่หลายบรรทัด หรือบทกวี - hr เหมือนเส้นแบ่งหัวข้อในเอกสารเพื่อบอกว่าเนื้อหากำลังเข้าสู่ช่วงใหม่ ทั้งสองมีหน้าที่เฉพาะ ไม่ได้แทนโครงสร้างหลักของบทความ

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

• br ไม่ควรใช้แทนย่อหน้า (paragraph) หลายย่อหน้า
• hr ใช้เพื่อแบ่งช่วงเนื้อหา ไม่ใช่ใส่เพื่อความสวยงามอย่างเดียว
• ทั้ง br และ hr ควรใช้เท่าที่จำเป็น ไม่ใส่มากเกินไป
• ถ้าเนื้อหาเป็นโครงสร้างหลัก ควรใช้แท็กที่เหมาะสม เช่น p, h2, section
• br และ hr ไม่ได้มีไว้สำหรับจัด layout หน้าเว็บ

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

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

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

ตัวอย่างนี้เปรียบเทียบการใช้ br กับ hr และตัวอย่างการใช้ผิดบริบท

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

• ใช้ br แทนการสร้างย่อหน้าใหม่หลายย่อหน้า
• ใช้ hr เพื่อความสวยงามอย่างเดียวโดยไม่เกี่ยวกับความหมายของเนื้อหา
• สับสนว่าเมื่อไรควรใช้ p/section แทน br/hr
• คิดว่า br และ hr ใช้แทนการจัด layout ได้

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

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

• br ใช้ขึ้นบรรทัดใหม่ในข้อความเดียว
• hr ใช้คั่นช่วงเนื้อหาเมื่อประเด็นเปลี่ยน
• อย่าใช้ br แทนย่อหน้า
• อย่าใช้ hr เพื่อแต่งหน้าล้วนโดยไม่มีความหมายของเนื้อหา
• br และ hr ไม่ใช่เครื่องมือจัด layout

10. Lab 1: ใช้ br กับข้อมูลที่อยู่หลายบรรทัด

ชื่อ Lab: ที่อยู่แบบหลายบรรทัด เป้าหมาย: ใช้ br เพื่อขึ้นบรรทัดในข้อความเดียวอย่างถูกต้อง โจทย์: ใน div#address-card ให้สร้าง p ที่มีข้อความที่อยู่ 3 บรรทัด และใช้ br คั่นบรรทัด: บรรทัด 1: บริษัท เรียนเว็บไทย บรรทัด 2: 99 ถนนวิทยุ แขวงลุมพินี บรรทัด 3: เขตปทุมวัน กรุงเทพมหานคร 10330 เงื่อนไข: ต้องมี br จำนวน 2 ตัว และข้อความครบทั้ง 3 บรรทัด สิ่งที่ระบบควรตรวจ: selector count + text content + browser runtime แนวทางการคิด: วางข้อความครบก่อน แล้วคั่นแต่ละบรรทัดด้วย br เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 2: ใช้ hr แบ่งเนื้อหา 2 ส่วน

ชื่อ Lab: คั่นช่วงบทความสั้น เป้าหมาย: ใช้ hr แบ่งเนื้อหาเป็นสองช่วงอย่างมีความหมาย โจทย์: ใน article#note ให้สร้างโครงนี้: - h2: บทนำ - p: เนื้อหาบทนำ - hr จำนวน 1 ตัว - h2: สรุป - p: เนื้อหาสรุป เงื่อนไข: ต้องมี hr แค่ 1 ตัว และมีหัวข้อ/ย่อหน้า 2 ส่วนครบ สิ่งที่ระบบควรตรวจ: selector exists + selector count + browser runtime แนวทางการคิด: วางเนื้อหาส่วนแรกก่อน ใส่ hr แล้ววางส่วนที่สอง เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 3: แก้ HTML ที่ใช้ br และ hr ผิดบริบท

ชื่อ Lab: แก้โค้ดให้ใช้แท็กถูกหน้าที่ เป้าหมาย: ปรับโค้ดที่ใช้ br/hr ผิดบริบทให้เหมาะสม โจทย์: โค้ดเริ่มต้นมี br ซ้ำเกินจำเป็นและไม่มี hr คั่นช่วงสรุป ให้แก้ดังนี้: - ลด br ให้เหลือ 1 ตัวในย่อหน้าที่อยู่ - เพิ่ม hr 1 ตัวก่อนหัวข้อ "สรุป" - คงข้อความทั้งหมดไว้เหมือนเดิม เงื่อนไข: ต้องมี br = 1, hr = 1, และข้อความหลักไม่หาย สิ่งที่ระบบควรตรวจ: selector count + source text + browser runtime แนวทางการคิด: แก้จำนวนแท็กก่อน แล้วเช็กข้อความครบทั้งส่วนบทนำและสรุป เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check