HTML Headings


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>