HTML Headings คือ ชื่อหรือคำบรรยายที่คุณต้องการแสดงบนหน้าเว็บ โดยจะมีขนาดใหญ่ไล่ไปเล็กตามความสำคัญของหัวข้อนั้นๆ
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML Headings จะกำหนดได้โดย Tag <h1> ถึง <h6>
<h1> กำหนดแทนหัวข้อใหญ่สุด <h6> กำหนดหัวข้อเล็กสุด
หมายเหตุ: เบราว์เซอร์จะเพิ่มระยะขอบ ก่อนและหลังส่วนหัวโดยอัตโนมัติ
ความสำคัญของ Heading
Heading มีความสำคัญอย่างมากเพราะ Search Engines จะใช้ส่วน Heading ในการจัดเก็บ Index (ดัชนี) ซึ่งส่งผลต่อการเข้าถึงและมองเห็นเว็บไซต์ของคุณ
ผู้ใช้มักจะเข้าชมเว็บไซต์ตามหัวเรื่อง สิ่งสำคัญคือต้องใช้ Heading เพื่อแสดงเนื้อหาภายในหน้านั้นๆ
<h1> ควรใช้หัวเรื่องสำหรับหัวเรื่องหลัก ตามด้วย <h2> หัวเรื่อง รองลงมามีความสำคัญน้อยกว่า <h3> และอื่นๆ
หมายเหตุ: ใช้ HTML Heading สำหรับส่วนหัวเรื่องเท่านั้น อย่าใช้ Heading เพื่อทำให้ข้อความใหญ่หรือหนา
Heading ที่ใหญ่กว่า
โดยปกติ Heading แต่ละตัวจะมีขนาดมาตรฐาน แต่คุณยังสามารถระบุขนาดหัวเรื่องใดๆ ที่มี Style Attribute โดยใช้คุณสมบัติของ CSS font-size ได้
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>