เทคนิคการใช้งาน Tag H
มีคำถามถึงการใช้งาน Tag H ติดๆกันในช่วงนี้ ซึ่งผมตอบซ้ำๆไปหลายครั้งแล้วเลยคิดว่าเขียนเป็นบทความไปเลยจะดีกว่า
Tag H ประกอบด้วย H1 H2 H3 H4 H5 และ H6 โดยมีความหมายตามข้อกำหนดของ HTML เป็น Head หรือ หัวข้อ โดยที่ H1 จะมีความสำคัญสูงสุด และ H2 ถึง H6 จะมีความสำคัญรองลงมา
ลำดับความสำคัญของ H ใช้เพื่อบอกกับ Search Engine หรือ อุปกรณ์ช่วยอ่านอื่นๆ (เช่นสำหรับคนที่มีปัญหาการมองเห็น) ให้ทราบว่าข้อความภายใต้ Tag H คือ หัวข้อ และ H ตัวไหนคือหัวข้อหลัก
ก่อนจะทำความเข้าใจกับลำดับความสำคัญของ H มาศึกษาเรื่องโครงสร้างของเอกสาร หรือ Outline กันก่อน
Outline ก็คือโครงสร้างของเอกสาร ใช้เพื่ออธิบายว่าเอกสาร (หรือเว็บไซต์) มีรายละเอียดคร่าวๆเกี่ยวกับอะไรโดยดูจากหัวข้อ (H) หรือถ้าจะเปรียบเทียบง่ายๆก็เหมือนสารบัญของหนังสือนั่นเอง
จากตัวอย่างด้านบนถ้าเขียนเป็นโค้ดจะได้ดังนี้
เทคนิคการใช้งาน Tag H1 - H6
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
ย่อหน้าที่ 2Outline ก็คือโครงสร้างของเอกสาร ใช้เพื่ออธิบายว่าเอกสาร (หรือเว็บไซต์) มีรายละเอียดคร่าวๆเกี่ยวกับอะไรโดยดูจากหัวข้อ (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 เสมอ