HTML <h1>ถึง<h6>แท็ก
ตัวอย่าง
หกหัวเรื่อง HTML ที่แตกต่างกัน:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แท็ ก<h1>to <h6>ใช้เพื่อกำหนดส่วนหัวของ HTML
<h1>กำหนดหัวเรื่องที่สำคัญที่สุด <h6>กำหนดหัวเรื่องที่สำคัญน้อยที่สุด
หมายเหตุ:ใช้เพียง<h1>
หน้าเดียว - ควรแสดงหัวข้อ/หัวเรื่องหลักสำหรับทั้งหน้า นอกจากนี้ อย่าข้ามระดับส่วนหัว - เริ่มต้นด้วย<h1>จากนั้นใช้<h2>และอื่นๆ
รองรับเบราว์เซอร์
| Element | |||||
|---|---|---|---|---|---|
| <h1> - <h6> | Yes | Yes | Yes | Yes | Yes |
คุณสมบัติสากล
แท็ ก<h1>to <h6>ยังสนับสนุนGlobal Attributes ใน HTML
คุณสมบัติของเหตุการณ์
แท็ ก<h1>to <h6>ยังสนับสนุน แอตทริบิวต์เหตุการณ์ ในHTML
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตั้งค่าสีพื้นหลังและสีข้อความของส่วนหัว (ด้วย CSS):
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello
World</h2>
ตัวอย่าง
ตั้งค่าการจัดตำแหน่งหัวเรื่อง (ด้วย CSS):
<h1 style="text-align:center">This is heading 1</h1>
<h2 style="text-align:left">This
is heading 2</h2>
<h3 style="text-align:right">This is heading 3</h3>
<h4 style="text-align:justify">This is heading 4</h4>
หน้าที่เกี่ยวข้อง
กวดวิชา HTML: ส่วนหัว HTML
การอ้างอิง HTML DOM: หัวเรื่อง Object
การตั้งค่า CSS เริ่มต้น
เบราว์เซอร์ส่วนใหญ่จะแสดง<h1>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
เบราว์เซอร์ส่วนใหญ่จะแสดง<h2>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
เบราว์เซอร์ส่วนใหญ่จะแสดง<h3>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
เบราว์เซอร์ส่วนใหญ่จะแสดง<h4>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
h4 {
display: block;
font-size:
1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
เบราว์เซอร์ส่วนใหญ่จะแสดง<h5>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
เบราว์เซอร์ส่วนใหญ่จะแสดง<h6>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
ตัวอย่าง
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}