หัวข้อใน HTML (HTML Headings): <h1> ถึง <h6> และความสำคัญต่อ SEO

หัวข้อ HTML คืออะไร?

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

ลำดับความสำคัญและการใช้งาน

ความสำคัญต่อ SEO และ Accessibility

• Search Engines (Google, Bing): ใช้หัวข้อในการทำความเข้าใจโครงสร้างและหัวข้อหลักของหน้า <h1> มีน้ำหนักมากที่สุด
• Screen Readers: ผู้ใช้พิการสายตาใช้หัวข้อในการนำทาง (Navigate by headings) - ต้องเรียงลำดับถูกต้อง
• Featured Snippets: Google มักดึงเนื้อหาจาก <h2>, <h3> มาแสดงในผลค้นหา

กฎการใช้งานที่ถูกต้อง (Heading Hierarchy)

1. เริ่มต้นด้วย <h1> เพียง **หนึ่งครั้งต่อหน้า** (Single Page Application อาจมีหลายหน้าในหน้าเดียวกัน แต่แต่ละ View ควรมี h1 เดียว)
2. ไม่ข้ามระดับ: h1 → h2 → h3 ✅ | h1 → h3 ❌ (ข้าม h2)
3. ไม่ใช้หัวข้อเพื่อการจัดรูปแบบ (Styling) เท่านั้น - ให้ใช้ CSS
4. ไม่ใส่บล็อกเอลิเมนต์ (div, p, ul) ภายในหัวข้อ

ตัวอย่างโครงสร้างที่ถูกต้อง

<!DOCTYPE html>
<html>
<body>
  <h1>คู่มือการทำอาหารไทยฉบับสมบูรณ์</h1>
  
  <section>
    <h2>วัตถุดิบหลัก</h2>
    <p>เนื้อหาเกี่ยวกับวัตถุดิบ...</p>
    
    <h3>สมุนไพรไทย</h3>
    <p>รายละเอียดสมุนไพร...</p>
    
    <h3>เครื่องเทศ</h3>
    <p>รายละเอียดเครื่องเทศ...</p>
    
    <h4>พริกขี้หนู</h4>
    <p>รายละเอียดพริก...</p>
  </section>
  
  <section>
    <h2>วิธีการทำ</h2>
    <h3>ขั้นตอนเตรียมวัตถุดิบ</h3>
    <h3>ขั้นตอนปรุงอาหาร</h3>
  </section>
</body>
</html>

ตัวอย่างโต้ตอบ: เปลี่ยนระดับหัวข้อด้วย JavaScript

<!DOCTYPE html>
<html>
<body>
  <h2>ตัวอย่างเปลี่ยนระดับหัวข้อ</h2>
  <label>ข้อความ: <input type="text" id="txt" placeholder="พิมพ์หัวข้อ..."></label>
  <br><br>
  <label><input type="radio" name="level" value="h1" checked> H1</label>
  <label><input type="radio" name="level" value="h2"> H2</label>
  <label><input type="radio" name="level" value="h3"> H3</label>
  <label><input type="radio" name="level" value="h4"> H4</label>
  <label><input type="radio" name="level" value="h5"> H5</label>
  <label><input type="radio" name="level" value="h6"> H6</label>
  <br><br>
  <button onclick="preview()">แสดงตัวอย่าง</button>
  <div>ตัวอย่าง: <span id="preview">(จะแสดงที่นี่)</span></div>

  <script>
    function preview() {
      var text = document.getElementById('txt').value;
      var level = document.querySelector('input[name="level"]:checked').value;
      var preview = document.getElementById('preview');
      if (!text) { preview.innerHTML = '<em>กรุณาพิมพ์ข้อความ</em>'; return; }
      preview.innerHTML = '<' + level + '>' + text + '</' + level + '>';
    }
  </script>
</body>
</html>

ข้อผิดพลาดที่พบบ่อย

• ใช้ <h1> หลายครั้งในหน้าเดียว (สับสน Search Engine)
• ใช้ <h3> ทันทีหลัง <h1> โดยไม่มี <h2>
• ใช้หัวข้อสำหรับข้อความทั่วไปที่ไม่ใช่หัวข้อ (เช่น ใช้ h3 ทำให้ตัวอักษรใหญ่)
• ไม่มี <h1> เลยในหน้า