พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน hr Tag

ใน HTML5 แท็ก <hr> ใช้สำหรับการสร้างเส้นคั่น (horizontal rule) ซึ่งมักใช้เพื่อแบ่งส่วนของเนื้อหาหรือเพื่อแยกกลุ่มของเนื้อหาในหน้าเว็บให้ดูชัดเจนขึ้น โดยแท็กนี้เป็นแท็กที่ไม่มีการปิด (self-closing) และไม่ต้องใส่ข้อความใดๆ ภายใน

คุณสมบัติพื้นฐานของ <hr>

  • เป็นตัวแบ่งเส้นแนวนอน
  • เป็น block-level element หมายความว่ามันจะขึ้นบรรทัดใหม่เสมอและขยายเต็มความกว้างของ container ที่อยู่ภายใน
  • โดยทั่วไปจะใช้เพื่อแยกเนื้อหาส่วนต่างๆ ของหน้าเว็บ เช่น ระหว่างบทความหรือหัวข้อ

ตัวอย่างการใช้งานพื้นฐานของ <hr>

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้แท็ก hr</title>
</head>
<body>
    <h1>หัวข้อ 1</h1>
    <p>นี่คือย่อหน้าที่หนึ่ง มีเนื้อหาเกี่ยวกับหัวข้อที่หนึ่ง</p>
    
    <hr>
    
    <h2>หัวข้อ 2</h2>
    <p>นี่คือย่อหน้าที่สอง มีเนื้อหาเกี่ยวกับหัวข้อที่สอง</p>
</body>
</html>

การประยุกต์ใช้งาน <hr> ด้วยการปรับแต่ง CSS

ใน HTML5 เราสามารถปรับแต่งรูปแบบของเส้นคั่น <hr> ได้หลากหลายด้วยการใช้ CSS เช่น การกำหนดสี ความหนา สไตล์เส้น และความยาวของเส้นคั่น

การกำหนดสีและความหนา

เราสามารถใช้ CSS เพื่อกำหนดสีและความหนาของเส้นคั่นได้ เช่น

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการปรับแต่ง hr</title>
    <style>
        hr {
            border: 0; /* ลบขอบเริ่มต้น */
            height: 2px; /* ความหนาของเส้น */
            background-color: red; /* สีของเส้น */
        }
    </style>
</head>
<body>
    <h1>หัวข้อ 1</h1>
    <p>นี่คือย่อหน้าที่หนึ่ง</p>
    
    <hr>
    
    <h2>หัวข้อ 2</h2>
    <p>นี่คือย่อหน้าที่สอง</p>
</body>
</html>

การเปลี่ยนสไตล์เส้นให้เป็นจุดประ

การใช้เส้นประ (dashed) หรือจุด (dotted) สามารถสร้างความแตกต่างให้กับเส้นคั่นได้

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างเส้นคั่นแบบจุดประ</title>
    <style>
        hr {
            border: 0;
            height: 2px;
            border-top: 2px dashed blue; /* เส้นประ */
        }
    </style>
</head>
<body>
    <h1>หัวข้อ 1</h1>
    <p>นี่คือย่อหน้าที่หนึ่ง</p>
    
    <hr>
    
    <h2>หัวข้อ 2</h2>
    <p>นี่คือย่อหน้าที่สอง</p>
</body>
</html>

การปรับความยาวของเส้น

การปรับความยาวของเส้นให้ไม่เต็มความกว้างของหน้าสามารถทำได้โดยกำหนดความกว้าง (width) ให้กับ <hr>

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการกำหนดความยาว hr</title>
    <style>
        hr {
            width: 50%; /* ความยาวของเส้น */
            border: 0;
            height: 5px;
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>หัวข้อ 1</h1>
    <p>นี่คือย่อหน้าที่หนึ่ง</p>
    
    <hr>
    
    <h2>หัวข้อ 2</h2>
    <p>นี่คือย่อหน้าที่สอง</p>
</body>
</html>

การสร้างเงาให้กับเส้น

การใช้เงากับ <hr> สามารถสร้างมิติและทำให้เส้นดูน่าสนใจยิ่งขึ้น

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้เงากับ hr</title>
    <style>
        hr {
            border: 0;
            height: 2px;
            background-color: gray;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* เงา */
        }
    </style>
</head>
<body>
    <h1>หัวข้อ 1</h1>
    <p>นี่คือย่อหน้าที่หนึ่ง</p>
    
    <hr>
    
    <h2>หัวข้อ 2</h2>
    <p>นี่คือย่อหน้าที่สอง</p>
</body>
</html>

สรุป

  • แท็ก <hr> เป็นแท็กที่ใช้แบ่งเนื้อหาของเว็บเพจ
  • สามารถปรับแต่งเส้นคั่นให้เป็นสไตล์ต่างๆ ได้ เช่น เส้นประ เส้นจุด สี และขนาดต่างๆ โดยการใช้ CSS
  • ใช้ในการจัดการโครงสร้างหน้าเว็บเพื่อความเป็นระเบียบและแยกส่วนเนื้อหาให้ชัดเจน
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ