แท็ก <hr> ใน HTML ใช้เพื่อสร้างเส้นคั่นแนวนอนในหน้าเว็บ (horizontal rule) โดยไม่มีการแสดงผลเนื้อหาภายในแท็ก เป็นแท็กที่ไม่ต้องการปิดหรือมีเนื้อหาใด ๆ ข้างใน (self-closing tag) ลักษณะการทำงานหลักของแท็กนี้คือการแบ่งส่วนต่าง ๆ ของเนื้อหา หรือแยกเนื้อหาบางส่วนออกจากกัน เพื่อเพิ่มความชัดเจนให้กับการจัดระเบียบข้อมูลในหน้าเว็บ
โครงสร้างของแท็ก <hr>
1 | <hr> |
คุณสมบัติหลักของ <hr>
สร้างเส้นคั่นแนวนอน ปรากฏเป็นเส้นแนวนอนในหน้าเว็บเพื่อแบ่งเนื้อหา
ไม่มีเนื้อหา แท็ก <hr> ไม่มีการแสดงผลข้อความหรือข้อมูลใด ๆ ภายใน มันเป็นเพียงเส้นคั่นเท่านั้น
ไม่มีปิดแท็ก เป็น self-closing tag หมายความว่าไม่ต้องมีการปิดแท็ก (ไม่มี </hr>)
การกำหนดสไตล์ให้กับ <hr> ด้วย CSS
แม้ว่าค่าเริ่มต้นของแท็ก <hr> จะเป็นเส้นคั่นที่ดูเรียบง่าย แต่เราสามารถปรับแต่งสไตล์ของมันได้ เช่น สี ความกว้าง ความสูง หรือรูปแบบเส้นได้ตามต้องการ โดยใช้ CSS เช่น
1 | <hr style="border: 2px solid red; width: 50%; margin: 20px 0;"> |
คำอธิบายโค้ด
border: 2px solid red;กำหนดให้เส้นคั่นมีความหนา 2px สีแดง และรูปแบบเป็นเส้นทึบwidth: 50%;กำหนดความกว้างของเส้นคั่นให้เป็น 50% ของความกว้างพื้นที่ที่อยู่margin: 20px 0;กำหนดระยะห่างด้านบนและล่างจากเนื้อหาให้เป็น 20px
การประยุกต์ใช้ <hr> ในงานจริง
แยกส่วนบทความ เมื่อคุณต้องการแบ่งเนื้อหาของบทความยาว ๆ ให้ชัดเจนขึ้น
คั่นส่วนหัวและส่วนเนื้อหา ใช้ <hr> เพื่อแยกส่วนหัว (header) ออกจากส่วนเนื้อหา (content) เพื่อให้โครงสร้างหน้าเว็บชัดเจนมากขึ้น
คั่นเนื้อหากับ footer ใช้เส้นคั่นเพื่อแบ่งเนื้อหาหลักของหน้าเว็บกับส่วนท้าย (footer)
ตัวอย่างการใช้งาน
01 02 03 04 05 06 07 08 09 10 11 12 | <h1>บทความเรื่อง HTML</h1><p>นี่คือเนื้อหาของบทความเกี่ยวกับ HTML...</p><hr><h2>ตอนที่ 1: แนะนำ HTML</h2><p>ในตอนนี้ เราจะเรียนรู้เกี่ยวกับ HTML...</p><hr style="border: 1px dashed blue;"><h2>ตอนที่ 2: แท็กพื้นฐาน</h2><p>แท็กพื้นฐานใน HTML มีหลายแท็กที่สำคัญ...</p> |
ความสำคัญ
แท็ก <hr> มีความสำคัญในเรื่องของการจัดโครงสร้างและจัดระเบียบเนื้อหาในหน้าเว็บให้ชัดเจนและเป็นระเบียบ โดยที่เราไม่ต้องเพิ่มเส้นหรือสไตล์ด้วยตนเอง