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 ที่ถูกต้อง
- เริ่มต้นด้วย
<h1>: ใช้สำหรับหัวข้อหลักของหน้าเว็บ มีได้เพียงหนึ่งครั้งในหนึ่งหน้า - จัดลำดับตามความสำคัญ: ใช้
<h2>ถึง<h6>สำหรับหัวข้อรองตามลำดับ - อย่าใช้ headings เพื่อการตกแต่ง: ใช้ CSS เพื่อปรับขนาดหรือลักษณะข้อความแทน
ปรับแต่งขนาดหัวข้อด้วย CSS
หากต้องการกำหนดขนาดของ heading ให้ใช้ font-size ผ่าน inline style หรือ CSS
<h1 style="font-size:60px;">Heading 1</h1>
หรือใน CSS
h1 {
font-size: 60px;
}
ทำไม Headings ถึงสำคัญ?
- ช่วยในการอ่านของผู้ใช้งาน: Headings ช่วยให้เนื้อหาแบ่งเป็นส่วนย่อย อ่านง่าย
- สำคัญสำหรับ SEO: Search engine จะใช้ headings ในการทำความเข้าใจโครงสร้างและเนื้อหาของหน้าเว็บ
- เน้นโครงสร้าง: การใช้ headings ให้เหมาะสมช่วยสร้าง hierarchy ของเนื้อหา
สรุป
<h1>ถึง<h6>ใช้สำหรับสร้างหัวข้อที่มีลำดับความสำคัญ- อย่าใช้ headings เพื่อทำข้อความให้ใหญ่หรือหนา ใช้ CSS แทน
- ใช้ headings เพื่อสร้างโครงสร้างที่ชัดเจนให้หน้าเว็บ ทั้งสำหรับผู้ใช้งานและ SEO