แท็ก <hr> ใน HTML ใช้เพื่อสร้างเส้นคั่นแนวนอนในหน้าเว็บ (horizontal rule) โดยไม่มีการแสดงผลเนื้อหาภายในแท็ก เป็นแท็กที่ไม่ต้องการปิดหรือมีเนื้อหาใด ๆ ข้างใน (self-closing tag) ลักษณะการทำงานหลักของแท็กนี้คือการแบ่งส่วนต่าง ๆ ของเนื้อหา หรือแยกเนื้อหาบางส่วนออกจากกัน เพื่อเพิ่มความชัดเจนให้กับการจัดระเบียบข้อมูลในหน้าเว็บ
โครงสร้างของแท็ก <hr>
<hr>
คุณสมบัติหลักของ <hr>
สร้างเส้นคั่นแนวนอน ปรากฏเป็นเส้นแนวนอนในหน้าเว็บเพื่อแบ่งเนื้อหา
ไม่มีเนื้อหา แท็ก <hr> ไม่มีการแสดงผลข้อความหรือข้อมูลใด ๆ ภายใน มันเป็นเพียงเส้นคั่นเท่านั้น
ไม่มีปิดแท็ก เป็น self-closing tag หมายความว่าไม่ต้องมีการปิดแท็ก (ไม่มี </hr>)
การกำหนดสไตล์ให้กับ <hr> ด้วย CSS
แม้ว่าค่าเริ่มต้นของแท็ก <hr> จะเป็นเส้นคั่นที่ดูเรียบง่าย แต่เราสามารถปรับแต่งสไตล์ของมันได้ เช่น สี ความกว้าง ความสูง หรือรูปแบบเส้นได้ตามต้องการ โดยใช้ CSS เช่น
<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)
ตัวอย่างการใช้งาน
<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> มีความสำคัญในเรื่องของการจัดโครงสร้างและจัดระเบียบเนื้อหาในหน้าเว็บให้ชัดเจนและเป็นระเบียบ โดยที่เราไม่ต้องเพิ่มเส้นหรือสไตล์ด้วยตนเอง