ทำความเข้าใจ HTML Headings

Nov. 23, 2024 · boychawin

HTML Headings คืออะไร?

HTML Headings เป็นส่วนที่ใช้แสดงหัวข้อหรือหัวเรื่องในหน้าเว็บ โดยมีระดับความสำคัญตั้งแต่ <h1> (สำคัญที่สุด) ถึง <h6>(สำคัญน้อยที่สุด) การใช้งานที่เหมาะสมจะช่วยสร้างโครงสร้างที่อ่านง่ายทั้งสำหรับผู้ใช้งานและเครื่องมือค้นหา (SEO)

ตัวอย่างการใช้งาน

<h1>Heading 1</h1> <!-- หัวข้อหลักของหน้า -->
<h2>Heading 2</h2> <!-- หัวข้อย่อย -->
<h3>Heading 3</h3> <!-- ย่อยของหัวข้อย่อย -->
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <!-- หัวข้อย่อยที่สุด -->

หลักการใช้ HTML Headings ที่ถูกต้อง

  1. เริ่มต้นด้วย <h1>: ใช้สำหรับหัวข้อหลักของหน้าเว็บ มีได้เพียงหนึ่งครั้งในหนึ่งหน้า
  2. จัดลำดับตามความสำคัญ: ใช้ <h2> ถึง <h6> สำหรับหัวข้อรองตามลำดับ
  3. อย่าใช้ headings เพื่อการตกแต่ง: ใช้ CSS เพื่อปรับขนาดหรือลักษณะข้อความแทน

ปรับแต่งขนาดหัวข้อด้วย CSS

หากต้องการกำหนดขนาดของ heading ให้ใช้ font-size ผ่าน inline style หรือ CSS

<h1 style="font-size:60px;">Heading 1</h1>

หรือใน CSS

h1 {
  font-size: 60px;
}

ทำไม Headings ถึงสำคัญ?

  1. ช่วยในการอ่านของผู้ใช้งาน: Headings ช่วยให้เนื้อหาแบ่งเป็นส่วนย่อย อ่านง่าย
  2. สำคัญสำหรับ SEO: Search engine จะใช้ headings ในการทำความเข้าใจโครงสร้างและเนื้อหาของหน้าเว็บ
  3. เน้นโครงสร้าง: การใช้ headings ให้เหมาะสมช่วยสร้าง hierarchy ของเนื้อหา

สรุป

  • <h1> ถึง <h6> ใช้สำหรับสร้างหัวข้อที่มีลำดับความสำคัญ
  • อย่าใช้ headings เพื่อทำข้อความให้ใหญ่หรือหนา ใช้ CSS แทน
  • ใช้ headings เพื่อสร้างโครงสร้างที่ชัดเจนให้หน้าเว็บ ทั้งสำหรับผู้ใช้งานและ SEO
Tags: html