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>
ตัวอย่างการใช้ Heading
<!DOCTYPE html>
<html>
<body>
<h1>หัวเรื่อง</h1>
<p>เนื้อหาภายในที่เล่าเรื่องที่เกี่ยวกับหัวเรื่อง<p>
</body>
</html>
