มีคำถามถึงการใช้งาน Tag H ติดๆกันในช่วงนี้ ซึ่งผมตอบซ้ำๆไปหลายครั้งแล้วเลยคิดว่าเขียนเป็นบทความไปเลยจะดีกว่า

Tag H ประกอบด้วย H1 H2 H3 H4 H5 และ H6 โดยมีความหมายตามข้อกำหนดของ HTML เป็น Head หรือ หัวข้อ โดยที่ H1 จะมีความสำคัญสูงสุด และ H2 ถึง H6 จะมีความสำคัญรองลงมา

ลำดับความสำคัญของ H ใช้เพื่อบอกกับ Search Engine หรือ อุปกรณ์ช่วยอ่านอื่นๆ (เช่นสำหรับคนที่มีปัญหาการมองเห็น) ให้ทราบว่าข้อความภายใต้ Tag H คือ หัวข้อ และ H ตัวไหนคือหัวข้อหลัก

ก่อนจะทำความเข้าใจกับลำดับความสำคัญของ H มาศึกษาเรื่องโครงสร้างของเอกสาร หรือ Outline กันก่อน

ชื่อหนังสือ
  บทที่ 1
    ย่อหน้า ที่ 1
    ย่อหน้าที่ 2
  บทที่ 2
    ย่อหน้า ที่ 1
    ย่อหน้าที่ 2

Outline ก็คือโครงสร้างของเอกสาร ใช้เพื่ออธิบายว่าเอกสาร (หรือเว็บไซต์) มีรายละเอียดคร่าวๆเกี่ยวกับอะไรโดยดูจากหัวข้อ (H) หรือถ้าจะเปรียบเทียบง่ายๆก็เหมือนสารบัญของหนังสือนั่นเอง

จากตัวอย่างด้านบนถ้าเขียนเป็นโค้ดจะได้ดังนี้

<main>
  <h1>ชื่อหนังสือ</h>
  <article>
    <h2>บทที่ 1</h2>
    <section>
      <h3>ย่อหน้า ที่ 1</h3>
      ......
    </section>
    <section>
      <h3>ย่อหน้า ที่ 2</h3>
      ......
    </section>
  </article>
  <article>
    <h2>บทที่ 2</h2>
    <section>
      <h3>ย่อหน้า ที่ 1</h3>
      ......
    </section>
    <section>
      <h3>ย่อหน้า ที่ 2</h3>
      ......
    </section>
  </article>
</main>

เทคนิคการใช้งาน Tag H1 - H6

<article>
  <header>
    <h4>คำอธิบายย่อ</h4>
    <h2>หัวข้อของย่อหน้า</h2>
  </header>
  <p>........</p>
</article>

• การใช้งาน Tag H ควรอยู่ภายใต้แท็กที่มีความหมาย (Semantic Elements) เช่น main article section aside nav footer เนื่องจาก Tag เหล่านี้ใช้เพื่อแบ่งเอกสารออกเป็นส่วนต่างๆ และ Tag H ที่อยู่ภายใต้ส่วนนั้นๆใช้เพื่อบอกชื่อหรือหัวข้อของส่วนนั้นๆ
• ในแต่ละส่วน (เช่น ARTICLE ตามตัวอย่างด้านบน) ไม่จำเป็นต้องเรียงลำดับ Tag อย่างถูกต้อง และสามารถข้าม Tag H ที่มีความสำคัญน้อยกว่าได้โดยไม่สูญเสียความสำคัญด้านโครงสร้างของเอกสาร โดยจากตัวอย่างด้านบน H2 ยังคงเป็นหัวข้อหลักของย่อหน้านี้ และ H4 เป็นหัวข้อรองของย่อหน้านี้เช่นกัน (ข้อสังเกตุ จากตัวอย่างไม่มีการใช้ H3 ในเอกสาร)
• ภายในแต่ละส่วน สามารถมี H ลำดับสูงที่สุดได้เพียงตัวเดียวเท่านั้น เช่น ภายในหนึ่งหน้า สามารถมี H1 ได้เพียงตัวเดียว และ ในแต่ละ ARTICLE สามารถมี H2 ได้เพียงตัวเดียว เป็นต้น
• ถ้ามี H อยู่ติดกันมากกว่า 1 ตัว ควรครอบด้วย HEADER เพื่อบอกว่าเป็นส่วนหัว
• H1 ของเอกสารควรสัมพันธ์กับ ไตเติล ของเอกสาร (SEO)
• โครงสร้างของเอกสาร ต้องเรื่มจาก H1 เสมอ

คุณสามารถตรวจสอบความถูกต้องของโครงสร้างของเอกสารได้จากที่นี่ https://gsnedders.html5.org/outliner/