แบตทิก HTML <h1> ถึง <h6>

กำหนดและวิธีใช้

<h1> ถึง <h6> แท็กใช้สำหรับกำหนดหัวข้อ HTML

<h1> กำหนดหัวข้อที่เด่นที่สุด<h6> กำหนดหัวข้อที่เด่นน้อยที่สุด

แจ้งเตือน

แต่ละหน้าใช้หัวข้อเฉพาะอย่างเดียว <h1> - นี่ควรนำเสนอชื่อหัวข้อหรือเรื่องหลักของหน้าเว็บทั้งหมด นอกจากนี้ โปรดไม่กระทำการละเลยระดับของหัวข้อ - <h1> เริ่มต้น แล้วใช้ <h2>ตามแบบภาพ

เนื่องจาก h องค์ประกอบมีความหมายที่เฉพาะเจาะจง ดังนั้น โปรดเลือกระดับหัวเรื่องอย่างระมัดระวังเพื่อสร้างโครงสร้างเอกสารของคุณ ดังนั้น โปรดไม่ใช้หัวเรื่องเพื่อเปลี่ยนขนาดตัวอักษรในแถวเดียวกัน แทนที่นั้น เราควรใช้ฐาน CSS ที่มีการปรับแต่งเพื่อให้มีการแสดงที่ดี

หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการเลือกและใช้สกัดฉาก HTML โปรดอ่านเล่ม《คุณภาพเว็บ》。

ดูเพิ่มเติมที่:

ตัวเรียน HTML:หัวข้อ HTML

คู่มืออ้างอิง HTML DOM:เป้าหมายของหัวเรื่อง

ตัวอย่าง

ตัวอย่าง 1

หัวเรื่อง HTML หกระดับ

<h1>นี่คือข้อความ 1</h1>
<h2>นี่คือข้อความ 2</h2>
<h3>นี่คือข้อความ 3</h3>
<h4>นี่คือข้อความ 4</h4>
<h5>นี่คือข้อความ 5</h5>
<h6>นี่คือข้อความ 6</h6>

ทดสอบด้วยตัวเอง

ตัวอย่าง 2

ตั้งค่าสีพื้นหลังและสีข้อความของข้อความหัวเรื่อง (ใช้ CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

ทดสอบด้วยตัวเอง

ตัวอย่าง 3

ตั้งค่าการจัดลำดับของข้อความหัวเรื่อง (ใช้ CSS):

<h1 style="text-align:center">นี่คือข้อความ 1</h1>
<h2 style="text-align:left">นี่คือข้อความ 2</h2>
<h3 style="text-align:right">นี่คือข้อความ 3</h3>
<h4 style="text-align:justify">นี่คือข้อความ 4</h4>

ทดสอบด้วยตัวเอง

คุณสมบัติโลกาล

<h1> - <h6> ตามแบบภาพ คุณสมบัติโลกาลใน HTML。

คุณสมบัติเหตุการณ์

<h1> - <h6> ตามแบบภาพ คุณสมบัติเหตุการณ์ใน HTML。

ระบบ CSS โดยเริ่มต้น

โดยทั่วไปแล้ว โปรแกรมนี้จะแสดงค่าปริยายดังนี้ <h1> องค์ประกอบ：

ตัวอย่าง 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ทดสอบด้วยตัวเอง

โดยทั่วไปแล้ว โปรแกรมนี้จะแสดงค่าปริยายดังนี้ <h2> องค์ประกอบ：

ตัวอย่าง 2

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> องค์ประกอบ：

ตัวอย่าง 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ทดสอบด้วยตัวเอง

โดยทั่วไปแล้ว โปรแกรมนี้จะแสดงค่าปริยายดังนี้ <h4> องค์ประกอบ：

ตัวอย่าง 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ทดสอบด้วยตัวเอง

โดยทั่วไปแล้ว โปรแกรมนี้จะแสดงค่าปริยายดังนี้ <h5> องค์ประกอบ：

ตัวอย่าง 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ทดสอบด้วยตัวเอง

โดยทั่วไปแล้ว โปรแกรมนี้จะแสดงค่าปริยายดังนี้ <h6> องค์ประกอบ：

ตัวอย่าง 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ทดสอบด้วยตัวเอง

การสนับสนุนโดยเครื่องนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน