1. ความหมายของ Headings (H1–H6)

HTML มีหัวข้อทั้งหมด 6 ระดับ

H1 – หัวข้อใหญ่สุด ใช้สำหรับชื่อหน้าเว็บหรือหัวข้อหลัก
H2 – หัวข้อรอง แบ่ง Section ของเนื้อหา
H3 – หัวข้อย่อยภายใน H2
H4 – ย่อยลงไปอีกระดับ
H5 – ใช้น้อย แต่เน้นลำดับข้อมูล
H6 – เล็กสุด ใช้กับหัวข้อระดับลึก

H1 ควรมีเพียง 1 อันในแต่ละหน้า เพื่อช่วย SEO และโครงสร้างเอกสาร

2. ตัวอย่างการใช้ H1–H6

<h1>Welcome to My Website</h1>
<h2>HTML Basics</h2>
<h3>What is HTML?</h3>
<h4>HTML Syntax</h4>
<h5>Example Code</h5>
<h6>Note: Case Sensitive</h6>

เมื่อแสดงผลจะได้ขนาดลดหลั่นแบบนี้

H1: Welcome to My Website

H2: HTML Basics

H3: What is HTML?

H4: HTML Syntax

H5: Example Code

H6: Note about heading size

3. ถ้าอยากให้หัวข้อ “ใหญ่กว่า” หรือ “เล็กกว่า” ขนาดเดิม?

ใช้ CSS แทนการเลือก h1–h6 ผิดลำดับ เช่น :

h3 {
    font-size: 40px; /* ทำให้ H3 ใหญ่เท่า H1 ได้ */
    color: #c4005a;
}
h5 {
    font-size: 12px; /* ทำให้ H5 เล็กลงอีก */
}

หรือสามารถกำหนดเฉพาะบางหัวข้อได้:

<h3 style="font-size: 50px; color: blue;">Big Custom Heading</h3>

จำไว้ว่า ลำดับหัวข้อควรเป็น H1 → H2 → H3 ตามโครงสร้างเนื้อหา ไม่ควรใช้ H5 เพื่อให้ “ตัวเล็กลง” หรือใช้ H1 เพื่อให้ “ตัวใหญ่ขึ้น” → ต้องแก้ด้วย CSS เท่านั้น